From 3ed19ae4e18e449f3aab6d29fd4bd00d39526ab7 Mon Sep 17 00:00:00 2001 From: megaVE Date: Sun, 5 Nov 2023 14:08:50 -0300 Subject: [PATCH] Arrays, Objects and DOM sections update --- 3-arrays_and_objects/index.html | 58 ++++++++++++++++++++++++ 3-arrays_and_objects/js/script.js | 75 +++++++++++++++++++++++++++++++ 4-dom/index.html | 56 +++++++++++++++++++++++ 4-dom/js/script.js | 59 +++++++++++++++++++++--- index.html | 4 +- 5 files changed, 245 insertions(+), 7 deletions(-) diff --git a/3-arrays_and_objects/index.html b/3-arrays_and_objects/index.html index 9ed39bc..2f42d24 100644 --- a/3-arrays_and_objects/index.html +++ b/3-arrays_and_objects/index.html @@ -8,11 +8,69 @@

23. Duplicated Elements

+
+
+ + +
+ +

+
+

24. Concatenating Arrays

+
+
+ + +
+
+ + +
+ +

+
+

25. Intersection

+
+
+ + +
+
+ + +
+ +

+
+

26. Elements Mean

+
+
+ + +
+ +

+
+

27. Properties Sum

+
+ +

+
+

28. Filtering Properties

+
+ +

+
+

29. Uniting Objects

+
+ +

+
\ No newline at end of file diff --git a/3-arrays_and_objects/js/script.js b/3-arrays_and_objects/js/script.js index 69e92e3..0b81ede 100644 --- 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") +}) \ No newline at end of file diff --git a/4-dom/index.html b/4-dom/index.html index eec78f2..73b7c7c 100644 --- a/4-dom/index.html +++ b/4-dom/index.html @@ -8,13 +8,69 @@

30. Changing Content

+
+

Title

+ + +
+

31. Changing CSS

+
+
+

This is a paragraph

+

This is another paragraph

+

This is a third paragraph

+
+ + +
+

32. Changing Classes

+
+ +
+

33. Adding Elements through DOM

+
+ + + +
+

34. Removing Elements

+
+ +
+

35. Filtering Items

+
+ + + + +
+

36. Moving Items

+
+ +
+

37. Modal

+
+ +
+

38. Accordion

+
+ +
\ No newline at end of file diff --git a/4-dom/js/script.js b/4-dom/js/script.js index 4cd65f6..c661577 100644 --- 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() +// }) \ No newline at end of file diff --git a/index.html b/index.html index 77beeaf..dd190d9 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,8 @@

JavaScript Exercises

1 - Fundamentals

2 - Functions

- - +

3 - Arrays and Objects

+

4 - DOM