Project - 1 and DOM/EditRemove file is added.

SachinDevTech · SachinDevTech · commit f2e53f22eedb · 2024-01-18T10:51:26.000+05:30
diff --git a/06_DOM/05_EditRemove.html b/06_DOM/05_EditRemove.html
@@ -5,5 +5,36 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Edit and Remove Concept in JS DOM</title>
   </head>
-  <body></body>
+  <body style="background-color: #212121; color: beige">
+    <ul class="language">
+      <li>Javascript</li>
+    </ul>
+
+    <script>
+      //Basic way to add or create new HTML tag inside the existing one.
+      function addNewLang(langName) {
+        const newListItem = document.createElement('li');
+        newListItem.innerHTML = `${langName}`;
+        document.querySelector('.language').appendChild(newListItem);
+      }
+      addNewLang('Java - My Love');
+      addNewLang('C++');
+
+      // The best and optimized way to to create function to add elements
+      function addLangByOptimizedWay(langName) {
+        const li = document.createElement('li');
+        li.appendChild(document.createTextNode(langName))
+        document.querySelector(".language").appendChild(li);
+      }
+      addLangByOptimizedWay("HTML");
+      addLangByOptimizedWay("CSS")
+
+
+      // Now how to "Edit" values?
+      const secondLang = document.querySelector("li:nth-child(2)"); // nth-child indexing starts from zero
+      secondLang.innerHTML = "SachinLang"; 
+      secondLang.remove(); //after commenting this you can see "SachinLang"
+
+    </script>
+  </body>
 </html>
diff --git a/07_Projects/Project - 1 (DOM)/index.html b/07_Projects/Project - 1 (DOM)/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>JavaScript Background Color Switcher</title>
+  </head>
+  <body>
+    <div class="canvas">
+      <!-- <a
+        style="
+          background-color: #fff;
+          padding: 10px 30px;
+          border-radius: 8px;
+          color: #212121;
+          text-decoration: none;
+          border: 2px solid #212121;
+        "
+        href="../index.html"
+        >Back to Home Page</a
+      > -->
+      <h1>Color Scheme Switcher</h1>
+      <span class="box" id="grey"></span>
+      <span class="box" id="pink"></span>
+      <span class="box" id="blue"></span>
+      <span class="box" id="yellow"></span>
+      <h2>
+        Try clicking on one of the colors above
+        <span>to change the background color of this page!</span>
+      </h2>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/07_Projects/Project - 1 (DOM)/projectSetOne.md b/07_Projects/Project - 1 (DOM)/projectSetOne.md
@@ -0,0 +1,48 @@
+# Projects related to DOM
+
+## Projects Link:
+[Click Here to get all the Projects we've made.](https://stackblitz.com/edit/dom-project-chaiaurcode?file=index.html) 
+
+# Solution Code
+
+## Project - 1 (Basic Method)
+
+```javascript
+console.log("Hey, there!");
+const boxes = document.querySelectorAll(".box");
+const body = document.querySelector("body");
+
+boxes.forEach(function (box) {
+    console.log(boxes);
+    box.addEventListener('click', function (event) {
+        console.log(event);
+        // console.log(eventts.target);
+        if (event.target.id === "grey") {
+            document.body.style.backgroundColor = event.target.id;
+        }
+        else if (event.target.id === "pink") {
+            document.body.style.backgroundColor = event.target.id;
+        }
+        else if (event.target.id === "blue") {
+            document.body.style.backgroundColor = event.target.id;
+        }
+        else {
+            document.body.style.backgroundColor = event.target.id;
+        }
+    });
+});
+```
+
+## Project - 1 (Best/Optimized method)
+
+```javascript
+const buttons = document.querySelectorAll(".button");
+const body = document.body;
+
+buttons.forEach(button => {
+    button.addEventListener('click', event => {
+        const color = event.target.id;
+        body.style.backgroundColor = color;
+    });
+});
+```
diff --git a/07_Projects/Project - 1 (DOM)/script.js b/07_Projects/Project - 1 (DOM)/script.js
@@ -0,0 +1,22 @@
+const boxes = document.querySelectorAll(".box");
+const body = document.querySelector("body");
+
+boxes.forEach(function (box) {
+    console.log(boxes);
+    box.addEventListener('click', function (event) {
+        console.log(event);
+        // console.log(eventts.target);
+        if (event.target.id === "grey") {
+            document.body.style.backgroundColor = event.target.id;
+        }
+        else if (event.target.id === "pink") {
+            document.body.style.backgroundColor = event.target.id;
+        }
+        else if (event.target.id === "blue") {
+            document.body.style.backgroundColor = event.target.id;
+        }
+        else {
+            document.body.style.backgroundColor = event.target.id;
+        }
+    })
+})
diff --git a/07_Projects/Project - 1 (DOM)/styles.css b/07_Projects/Project - 1 (DOM)/styles.css
@@ -0,0 +1,28 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    margin: 20px;
+    /* display: flex;
+    flex-direction: row;
+    flex-wrap: wrap; */
+}
+
+.box{
+    height: 150px;
+    width: 150px;
+    display: inline-block;
+    border: 2px solid wheat;
+}
+#grey{
+    background-color: grey;
+}
+#pink{
+    background-color: rgb(243, 185, 185);
+}#blue{
+    background-color: blue;
+}#yellow{
+    background-color: yellow;
+}
diff --git a/07_Projects/Project - 2 (DOM)/index.html b/07_Projects/Project - 2 (DOM)/index.html
diff --git a/07_Projects/Project - 2 (DOM)/script.js b/07_Projects/Project - 2 (DOM)/script.js
diff --git a/07_Projects/Project - 2 (DOM)/styles.css b/07_Projects/Project - 2 (DOM)/styles.css
diff --git a/LICENSE b/LICENSE
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
