Skip to content

Commit

Permalink
Arrays, Objects and DOM sections update
Browse files Browse the repository at this point in the history
megaVE committed Nov 5, 2023

Verified

This commit was signed with the committer’s verified signature.
1 parent 8ac9076 commit 3ed19ae
Showing 5 changed files with 245 additions and 7 deletions.
58 changes: 58 additions & 0 deletions 3-arrays_and_objects/index.html
Original file line number Diff line number Diff line change
@@ -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>
75 changes: 75 additions & 0 deletions 3-arrays_and_objects/js/script.js
Original file line number Diff line number Diff line change
@@ -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")
})
56 changes: 56 additions & 0 deletions 4-dom/index.html
Original file line number Diff line number Diff line change
@@ -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>
59 changes: 54 additions & 5 deletions 4-dom/js/script.js
Original file line number Diff line number Diff line change
@@ -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()
// })
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 3ed19ae

Please sign in to comment.