Arrays, Objects and DOM sections update

megaVE · Nov 5, 2023 · 3ed19ae · 3ed19ae
1 parent 8ac9076
commit 3ed19ae
Show file tree

Hide file tree

Showing 5 changed files with 245 additions and 7 deletions.
diff --git a/3-arrays_and_objects/index.html b/3-arrays_and_objects/index.html
@@ -8,11 +8,69 @@
 </head>
 <body>
     <h2>23. Duplicated Elements</h2>
+    <form>
+        <div>
+            <label for="array-23">Element List (separated by SPACE): </label>
+            <input type="text" name="array-23" id="array-23">
+        </div>
+        <input type="submit" id="duplicate-submit-23" value="Filter">
+        <p id="duplicate-23"></p>
+    </form>
+
     <h2>24. Concatenating Arrays</h2>
+    <form>
+        <div>
+            <label for="array-1-24">Element List (separated by SPACE): </label>
+            <input type="text" name="array-1-24" id="array-1-24">
+        </div>
+        <div>
+            <label for="array-2-24">Element List (separated by SPACE): </label>
+            <input type="text" name="array-2-24" id="array-2-24">
+        </div>
+        <input type="submit" id="concatenate-submit-24" value="Concatenate">
+        <p id="concatenate-24"></p>
+    </form>
+
     <h2>25. Intersection</h2>
+    <form>
+        <div>
+            <label for="array-1-25">Element List (separated by SPACE): </label>
+            <input type="text" name="array-1-25" id="array-1-25">
+        </div>
+        <div>
+            <label for="array-2-25">Element List (separated by SPACE): </label>
+            <input type="text" name="array-2-25" id="array-2-25">
+        </div>
+        <input type="submit" id="intersection-submit-25" value="Check">
+        <p id="intersection-25"></p>
+    </form>
+
     <h2>26. Elements Mean</h2>
+    <form>
+        <div>
+            <label for="array-26">Element List (separated by SPACE): </label>
+            <input type="text" name="array-26" id="array-26">
+        </div>
+        <input type="submit" id="mean-submit-26" value="Calculate">
+        <p id="mean-26"></p>
+    </form>
+
     <h2>27. Properties Sum</h2>
+    <form>
+        <input type="submit" id="sum-submit-27" value="Calculate">
+        <p id="sum-27"></p>
+    </form>
+
     <h2>28. Filtering Properties</h2>
+    <form>
+        <input type="submit" id="filter-submit-28" value="Filter">
+        <p id="filter-28"></p>
+    </form>
+
     <h2>29. Uniting Objects</h2>
+    <form>
+        <input type="submit" id="unite-submit-29" value="Unite">
+        <p id="unite-29"></p>
+    </form>
 </body>
 </html>
diff --git a/3-arrays_and_objects/js/script.js b/3-arrays_and_objects/js/script.js
@@ -1,26 +1,101 @@
 // 23th Exercise
 
+const duplicateSubmit = document.querySelector("#duplicate-submit-23")
 
+duplicateSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const array = document.querySelector("#array-23").value.split(" ")
+    const duplicate = document.querySelector("#duplicate-23")
+
+    let duplicateArray = []
+    array.forEach(element => {
+        if(!duplicateArray.includes(element))
+            duplicateArray.push(element)
+    })
+
+    duplicate.textContent = `The array without duplicated elements is [${duplicateArray.join(", ")}]`
+})
 
 // 24th Exercise
 
+const concatenateSubmit = document.querySelector("#concatenate-submit-24")
+
+concatenateSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
 
+    const array1 = document.querySelector("#array-1-24").value.split(" ")
+    const array2 = document.querySelector("#array-2-24").value.split(" ")
+    const concatenate = document.querySelector("#concatenate-24")
+
+    const concatenateArray = [...array1, ...array2]
+
+    concatenate.textContent = `The concatenation of both arrays is [${concatenateArray.join(", ")}]`
+})
 
 // 25th Exercise
 
+const intersectionSubmit = document.querySelector("#intersection-submit-25")
+
+intersectionSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const array1 = document.querySelector("#array-1-25").value.split(" ")
+    const array2 = document.querySelector("#array-2-25").value.split(" ")
+    const intersection = document.querySelector("#intersection-25")
+
+    const intersectionArray = array1.filter(element => array2.includes(element))
 
+    let duplicateArray = []
+    intersection.forEach(element => {
+        if(!duplicateArray.includes(element))
+            duplicateArray.push(element)
+    })
+
+    intersection.textContent = `The intersection of both arrays is [${duplicateArray.join(", ")}]`
+})
 
 // 26th Exercise
 
+const meanSubmit = document.querySelector("#mean-submit-26")
+
+meanSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const array = document.querySelector("#array-26").value.split(" ")
+    const mean = document.querySelector("#mean-26")
+
+    const meanArray = array.reduce((acc, element) => Number(element) + acc, 0)
 
+    mean.textContent = `The mean of the elements in the array is ${(meanArray / array.length).toFixed(2)}`
+})
 
 // 27th Exercise
 
+const sumSubmit = document.querySelector("#sum-submit-27")
 
+sumSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const sum = document.querySelector("#sum-27")
+})
 
 // 28th Exercise
 
+const filterSubmit = document.querySelector("#filter-submit-28")
+
+filterSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
 
+    const filter = document.querySelector("#filter-28")
+})
 
 // 29th Exercise
 
+const uniteSubmit = document.querySelector("#unite-submit-29")
+
+uniteSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const unite = document.querySelector("#unite-29")
+})
diff --git a/4-dom/index.html b/4-dom/index.html
@@ -8,13 +8,69 @@
 </head>
 <body>
     <h2>30. Changing Content</h2>
+    <form>
+        <h1 id="title-h1-30">Title</h1>
+        <input type="text" name="title-30" id="title-30">
+        <input type="submit" id="content-submit-30" value="Change">
+    </form>
+
     <h2>31. Changing CSS</h2>
+    <form>
+        <div id="paragraph-31">
+            <p>This is a paragraph</p>
+            <p>This is another paragraph</p>
+            <p>This is a third paragraph</p>
+        </div>
+        <select name="color-31" id="color-31">
+            <option value="black">Black (Default)</option>
+            <option value="red">Red</option>
+            <option value="orange">Orange</option>
+            <option value="yellow">Yellow</option>
+            <option value="green">Green</option>
+            <option value="blue">Blue</option>
+            <option value="purple">Purple</option>
+        </select>
+        <input type="submit" id="color-submit-31" value="Change">
+    </form>
+
     <h2>32. Changing Classes</h2>
+    <form>
+        <input type="submit" id="class-submit-32" value="Change">
+    </form>
+
     <h2>33. Adding Elements through DOM</h2>
+    <form>
+        <ul id="list-33"></ul>
+        <input type="text" name="element-33" id="element-33">
+        <input type="submit" id="adding-submit-33" value="Add">
+    </form>
+
     <h2>34. Removing Elements</h2>
+    <form>
+
+    </form>
+
     <h2>35. Filtering Items</h2>
+    <form>
+        <ul id="list-35"></ul>
+        <input type="text" name="element-35" id="element-35">
+        <!-- <input type="submit" id="list-add-35" value="Add"> -->
+        <!-- <input type="button" id="filter-submit-35" value="Filter"> -->
+    </form>
+
     <h2>36. Moving Items</h2>
+    <form>
+        <ul id="list-36"></ul>
+    </form>
+
     <h2>37. Modal</h2>
+    <form>
+
+    </form>
+
     <h2>38. Accordion</h2>
+    <form>
+
+    </form>
 </body>
 </html>
diff --git a/4-dom/js/script.js b/4-dom/js/script.js
@@ -1,34 +1,83 @@
 // 30th Exercise
 
+const contentSubmit = document.querySelector("#content-submit-30")
 
+contentSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const title = document.querySelector("#title-30").value
+    const h1element = document.querySelector("#title-h1-30")
+
+    h1element.textContent = title
+})
 
 // 31th Exercise
 
+const colorSubmit = document.querySelector("#color-submit-31")
+
+colorSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    console.log("object");
 
+    const newColor = document.querySelector("#color-31").value
+    const list = document.querySelector("#paragraph-31")
+
+    list.style.color = newColor
+})
 
 // 32th Exercise
 
+const classSubmit = document.querySelector("#class-submit-32")
 
+classSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+})
 
 // 33th Exercise
 
+const addingSubmit = document.querySelector("#adding-submit-33")
 
+addingSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
 
-// 34th Exercise
+    const element = document.querySelector("#element-33").value
+    const list = document.querySelector("#list-33")
 
+    const newElement = document.createElement("li")
+    newElement.textContent = element
 
+    list.appendChild(newElement)
+})
 
-// 35th Exercise
+// // 34th Exercise
 
+// .addEventListener("click", (e) => {
+//     e.preventDefault()
+// })
 
+// 35th Exercise
 
-// 36th Exercise
+const filterSubmit = document.querySelector("#filter-submit-35")
 
+filterSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+})
 
+// // 36th Exercise
 
-// 37th Exercise
+// .addEventListener("click", (e) => {
+//     e.preventDefault()
+// })
 
+// // 37th Exercise
 
+// .addEventListener("click", (e) => {
+//     e.preventDefault()
+// })
 
-// 38th Exercise
+// // 38th Exercise
 
+// .addEventListener("click", (e) => {
+//     e.preventDefault()
+// })
diff --git a/index.html b/index.html
@@ -9,8 +9,8 @@
     <h1>JavaScript Exercises</h1>
     <h2><a href="./1-fundamentals/index.html">1 - Fundamentals</a></h2>
     <h2><a href="./2-functions/index.html">2 - Functions</a></h2>
-    <!-- <h2><a href="./3-arrays_and_objects/index.html">3 - Arrays and Objects</a></h2> -->
-    <!-- <h2><a href="./4-dom/index.html">4 - DOM</a></h2> -->
+    <h2><a href="./3-arrays_and_objects/index.html">3 - Arrays and Objects</a></h2>
+    <h2><a href="./4-dom/index.html">4 - DOM</a></h2>
     <!-- <h2><a href="./5-asynchronous_programming/index.html">5 - Asynchronous Programming</a></h2> -->
     <!-- <h2><a href="./6-extra/index.html">6 - Extra</a></h2> -->
 </body>