Solves the exercise and finish the course

divertimentos · Aug 24, 2023 · ab96aff · ab96aff
1 parent 1a1073e
commit ab96aff
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -39,6 +39,11 @@ <h2>
             <a href="pages/dom/dom.html">Accessing elements in the DOM</a>
           </h2>
         </li>
+        <li>
+          <h2>
+            <a href="pages/tests/test.html">Exercise I</a>
+          </h2>
+        </li>
         <li>
           <h2>
             <a href="pages/nodes/nodes.html">Nodes </a>

diff --git a/pages/dynamic/dynamic.css b/pages/dynamic/dynamic.css
@@ -7,7 +7,8 @@ p {
 }
 
 #removal,
-#clone-container {
+#clone-container,
+#animals-container {
   border: 3px solid #4a4e69;
   display: flex;
   justify-content: space-between;

diff --git a/pages/dynamic/dynamic.html b/pages/dynamic/dynamic.html
@@ -128,7 +128,7 @@ <h3>node.insertBefore() e node.removeChild()</h3>
               Insert Before The Last
             </button>
             <button class="another-button" onclick="removeBeforeFunc()" type="">
-              Do another thing
+              Remove the added item
             </button>
           </div>
         </div>
@@ -152,7 +152,7 @@ <h3>remove()</h3>
             </button>
           </div>
         </div>
-        <h3>cloneNode</h3>
+        <h3>cloneNode()</h3>
         <div>
           <p>O <code>cloneNode()</code>recebe um argumento booleano:</p>
           <code>false</code> para clonar somente o elemento escolhido e
@@ -175,6 +175,17 @@ <h3>cloneNode</h3>
             </button>
           </div>
         </div>
+
+        <h3>Cool Animals (exercise)</h3>
+        <div id="animals-container">
+          <ul id="animals-parent"></ul>
+
+          <div class="buttons-container">
+            <button class="insert-button" onclick="addAnimals()" type="">
+              Generate the animals using JS
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </body>

diff --git a/pages/dynamic/dynamic.js b/pages/dynamic/dynamic.js
@@ -2,12 +2,14 @@ let newPara = document.createElement("p");
 let parent = document.getElementById("parent");
 parent.appendChild(newPara);
 
+// ESCOLHENDO ONDE INSERIR ELEMENTOS-FILHOS
 let contentParent = document.getElementById("content");
 let anotherPara = document.createElement("p");
 anotherPara.textContent =
   "Eu sou um parágrafo cujo texto foi adicionado via JS!";
 contentParent.append(anotherPara);
 
+// node.insertBefore() e node.removeChild()
 let olFather = document.getElementById("ol-father");
 let afterBefore = document.getElementById("after-before");
 
@@ -25,6 +27,7 @@ function removeBeforeFunc() {
   if (olFather.children.length === 3) olFather.removeChild(liElement);
 }
 
+// remove()
 function removeFunc() {
   let fatherRemoval = document.getElementById("removal-ol");
   console.log(fatherRemoval.children.length);
@@ -44,6 +47,7 @@ function restore() {
   }
 }
 
+// cloneNode()
 function clone() {
   let cloneParent = document.querySelector("#clone-parent");
   let murilo = document.querySelector("#murilo");
@@ -66,3 +70,24 @@ function stopClone() {
   clearInterval(intervalId);
   cloneParent.appendChild(stop);
 }
+
+// Exercise (Animals)
+let animalsArray = [
+  "Dog",
+  "Cat",
+  "Warthog",
+  "Eagle",
+  "Elephant",
+  "Giraffe",
+  "Lion",
+];
+
+function addAnimals() {
+  let animalsParent = document.querySelector("#animals-parent");
+
+  for (let i = 0; i < animalsArray.length; i++) {
+    let item = document.createElement("li");
+    item.textContent = `${animalsArray[i]}`;
+    animalsParent.appendChild(item);
+  }
+}
diff --git a/tests/test.css → pages/tests/test.css b/tests/test.css → pages/tests/test.css
@@ -1,16 +1,15 @@
-body {
-  text-align: center;
-}
-h1 {
-  color: rgb(101, 7, 239);
-}
 button {
   cursor: pointer;
-  background-color: black;
-  color: white;
+  background-color: inherit;
+  color: #4a4e69;
+  border: solid 3px #4a4e69;
   width: 300px;
   padding: 1em;
   margin: 0.5em;
+  &:hover {
+    background-color: #ccd9e6;
+    transition: 0.2s;
+  }
 }
 
 .container {

diff --git a/pages/tests/test.html b/pages/tests/test.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Test</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" type="" href="../../josh-reset.css" />
+    <link rel="stylesheet" type="" href="../../style.css" />
+    <link rel="stylesheet" type="" href="test.css" />
+    <script src="test.js" async></script>
+  </head>
+  <body>
+    <div id="first-parent">
+      <h1>
+        <a href="../../index.html"> Exercise about getElementsByClassName()</a>
+      </h1>
+    </div>
+
+    <div id="list-container">
+      <div class="container">
+        <button onclick="green()" class="green undo">
+          Click to change this to Mint Green
+        </button>
+        <button onclick="blue()" class="blue undo">
+          Click to change this to Powder Blue
+        </button>
+        <button onclick="red()" class="red undo">
+          Click to change this to Orchid Pink
+        </button>
+        <button onclick="undo()">Undo painting</button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/tests/test.js → pages/tests/test.js b/tests/test.js → pages/tests/test.js
@@ -1,23 +1,25 @@
 const painter = (className, colorName) => {
   document.getElementsByClassName(className)[0].style.backgroundColor =
     colorName;
+  document.getElementsByClassName(className)[0].style.color = "whitesmoke";
 };
 
 function green() {
-  painter("green", "green");
+  painter("green", "#BADFD1");
 }
 
 function blue() {
-  painter("blue", "blue");
+  painter("blue", "#ACCCF1");
 }
 
 function red() {
-  painter("red", "red");
+  painter("red", "#F2B4B8");
 }
 
 function undo() {
   const elems = document.getElementsByClassName("undo");
   for (let i = 0; i < elems.length; i++) {
-    elems[i].style.backgroundColor = "black";
+    elems[i].style.backgroundColor = "#fbe9ec";
+    elems[i].style.color = "#4a4e69";
   }
 }
diff --git a/pages/traversing/traversing.html b/pages/traversing/traversing.html
@@ -48,7 +48,7 @@ <h3>children</h3>
         </div>
       </div>
       <div>
-        <h2>childNodes vs children (test)</h2>
+        <h2>childNodes vs children (Exercise)</h2>
         <div>
           <ul id="item-ul">
             <li>Item 1</li>

diff --git a/tests/test_skeleton.html b/tests/test_skeleton.html