2nd Section (functions) added

megaVE · Oct 31, 2023 · 8ac9076 · 8ac9076
1 parent 2c11155
commit 8ac9076
Show file tree

Hide file tree

Showing 11 changed files with 449 additions and 11 deletions.
diff --git a/2-functions/index.html b/2-functions/index.html
@@ -4,9 +4,82 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <script src="./js/script.js"></script>
+    <script src="./js/script.js" defer></script>
 </head>
 <body>
-
+    <h2>15. Even or Odd</h2>
+    <form>
+        <input type="number" name="number-15" id="number-15">
+        <input type="submit" id="even-odd-submit-15" value="Check">
+        <p id="even-odd-15"></p>
+    </form>
+
+    <h2>16. Factorial</h2>
+    <form>
+        <input type="number" name="number-16" id="number-16">
+        <input type="submit" id="factorial-submit-16" value="Calculate">
+        <p id="factorial-16"></p>
+    </form>
+
+    <h2>17. Minimum and Maximum</h2>
+    <form>
+        <input type="number" name="number-1-17" id="number-1-17">
+        <input type="number" name="number-2-17" id="number-2-17">
+        <select name="mode-17" id="mode-17">
+            <option value="min">Lower</option>
+            <option value="max">Higher</option>
+        </select>
+        <input type="submit" id="min-max-submit-17" value="Analyse">
+        <p id="min-max-17"></p>
+    </form>
+
+    <h2>18. Reverting String</h2>
+    <form>
+        <input type="text" name="string-18" id="string-18">
+        <input type="submit" id="reverse-submit-18" value="Revert">
+        <p id="reverse-18"></p>
+    </form>
+
+    <h2>19. Vowel Counter</h2>
+    <form>
+        <input type="text" name="string-19" id="string-19">
+        <input type="submit" id="vowel-submit-19" value="Count">
+        <p id="vowel-19"></p>
+    </form>
+
+    <h2>20. Palindrome</h2>
+    <form>
+        <input type="text" name="string-20" id="string-20">
+        <input type="submit" id="palindrome-submit-20" value="Check">
+        <p id="is-palindrome-20"></p>
+    </form>
+
+    <h2>21. Random Number Array</h2>
+    <form>
+        <div>
+            <label for="number-1-21">Lower Value: </label>
+            <input type="number" name="number-1-21" id="number-1-21">
+        </div>
+        <div>
+            <label for="number-2-21">Higher Value: </label>
+            <input type="number" name="number-2-21" id="number-2-21">
+        </div>
+        <div>
+            <label for="length-21">Length: </label>
+            <input type="number" name="length-21" id="length-21">
+        </div>
+        <input type="submit" id="random-submit-21" value="Generate">
+        <p id="random-21"></p>
+    </form>
+
+    <h2>22. Elements Frequency</h2>
+    <form>
+        <div>
+            <label for="list-22">Element List (separated by SPACE): </label>
+            <input type="text" name="list-22" id="list-22">
+        </div>
+        <input type="submit" id="frequency-submit-22" value="Calculate">
+        <p id="frequency-22"></p>
+    </form>
 </body>
 </html>
diff --git a/2-functions/js/script.js b/2-functions/js/script.js
@@ -0,0 +1,171 @@
+// 15th Exercise
+
+const evenOrOdd = (value) => value % 2 === 0 ? "Even" : "Odd"
+
+const evenOddSubmit = document.querySelector("#even-odd-submit-15")
+
+evenOddSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const value = document.querySelector("#number-15").value
+    const evenOdd = document.querySelector("#even-odd-15")
+
+    evenOdd.textContent = `${value} is an ${evenOrOdd(Number(value)).toLowerCase()} number.`
+})
+
+// 16th Exercise
+
+const getFactorial = (value) => value < 2 ? 1 : getFactorial(value - 1) * value
+
+const factorialSubmit = document.querySelector("#factorial-submit-16")
+
+factorialSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const value = document.querySelector("#number-16").value
+    const factorial = document.querySelector("#factorial-16")
+
+    factorial.textContent = `The factorial of ${value} is ${getFactorial(Number(value))}`
+})
+
+// 17th Exercise
+
+const max = (value1, value2) => value1 > value2 ? value1 : value2
+
+const min = (value1, value2) => value1 < value2 ? value1 : value2
+
+const minMaxSubmit = document.querySelector("#min-max-submit-17")
+
+minMaxSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const value1 = document.querySelector("#number-1-17").value
+    const value2 = document.querySelector("#number-2-17").value
+    const mode = document.querySelector("#mode-17").value
+    const minMax = document.querySelector("#min-max-17")
+
+    minMax.textContent = `The ${mode === "min" ? "lower" : "higher"} in the array is ${mode === "min" ? min(Number(value1), Number(value2)) : max(Number(value1), Number(value2))}`
+})
+
+// 18th Exercise
+
+function revertString(text){
+    const textArray = text.split("")
+    const reverseArray = textArray.reverse()
+
+    return reverseArray.join("")
+}
+
+const reverseSubmit = document.querySelector("#reverse-submit-18")
+
+reverseSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const string = document.querySelector("#string-18").value
+    const reverse = document.querySelector("#reverse-18")
+
+    reverse.textContent = `The reverse of ${string} is ${revertString(string)}`
+})
+
+// 19th Exercise
+
+function vowelCounter(text){
+    const vowels = ["a", "e", "i", "o", "u"]
+    const lowerTextArray = text.toLowerCase().split("")
+
+    return lowerTextArray.reduce((acc, element) => vowels.includes(element) ? acc + 1 : acc, 0)
+}
+
+const vowelSubmit = document.querySelector("#vowel-submit-19")
+
+vowelSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const text = document.querySelector("#string-19").value
+    const vowel = document.querySelector("#vowel-19")
+
+    const vowelsInWord = vowelCounter(text)
+
+    vowel.textContent = `There are ${vowelsInWord} vowel${vowelsInWord > 1 ? "s" : ""} in the word ${text}.`
+})
+
+// 20th Exercise
+
+const isPalindrome = (text) => text === text.split("").reverse().join("")
+
+const palindromeSubmit = document.querySelector("#palindrome-submit-20")
+
+palindromeSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const text = document.querySelector("#string-20").value
+    const palindrome = document.querySelector("#is-palindrome-20")
+
+    palindrome.textContent = `${text} is ${isPalindrome(text) ? "" : "not "}a palindrome.`
+})
+
+// 21th Exercise
+
+function createRandomNumbersArray(arrayLength, min, max){
+    let randomArray = []
+
+    for(let i = 0; i < arrayLength; i++)
+        randomArray = [...randomArray, Math.floor(Math.random() * (max - min + 1) + min)]
+
+    return randomArray
+}
+
+const randomSubmit = document.querySelector("#random-submit-21")
+
+randomSubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const min = document.querySelector("#number-1-21").value
+    const max = document.querySelector("#number-2-21").value
+    const arrayLength = document.querySelector("#length-21").value
+    const random = document.querySelector("#random-21")
+
+    const randomArray = createRandomNumbersArray(Number(arrayLength), Number(min), Number(max))
+
+    random.textContent = `Random Array Generated: [${randomArray.join(", ")}].`
+})
+
+// 22th Exercise
+
+function maxElementFrequency(array){
+    array.sort()
+
+    let maxFrequencyName = ""
+    let maxFrequencyAmount = 0
+    let currentFrequency = 1
+    for(let i = 1; i < array.length; i++){
+        if(array[i] === array[i - 1])
+            currentFrequency++
+        else{
+            if(currentFrequency > maxFrequencyAmount){
+                maxFrequencyAmount = currentFrequency
+                maxFrequencyName = array[i-1]
+            }
+            currentFrequency = 1
+        }
+    }
+    if(currentFrequency > maxFrequencyAmount){
+        maxFrequencyAmount = currentFrequency
+        maxFrequencyName = array[array.length - 1]
+    }
+
+    return {maxFrequencyName, maxFrequencyAmount}
+}
+
+const frequencySubmit = document.querySelector("#frequency-submit-22")
+
+frequencySubmit.addEventListener("click", (e) => {
+    e.preventDefault()
+
+    const list = document.querySelector("#list-22").value
+    const frequency = document.querySelector("#frequency-22")
+
+    const maxFrequency = maxElementFrequency(list.split(" "))
+
+    frequency.textContent = `The element "${maxFrequency.maxFrequencyName}" repeated the most, with ${maxFrequency.maxFrequencyAmount} apparitions.`
+})
diff --git a/3-arrays_and_objects/index.html b/3-arrays_and_objects/index.html
@@ -4,9 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <script src="./js/script.js"></script>
+    <script src="./js/script.js" defer></script>
 </head>
 <body>
-
+    <h2>23. Duplicated Elements</h2>
+    <h2>24. Concatenating Arrays</h2>
+    <h2>25. Intersection</h2>
+    <h2>26. Elements Mean</h2>
+    <h2>27. Properties Sum</h2>
+    <h2>28. Filtering Properties</h2>
+    <h2>29. Uniting Objects</h2>
 </body>
 </html>
diff --git a/3-arrays_and_objects/js/script.js b/3-arrays_and_objects/js/script.js
@@ -0,0 +1,26 @@
+// 23th Exercise
+
+
+
+// 24th Exercise
+
+
+
+// 25th Exercise
+
+
+
+// 26th Exercise
+
+
+
+// 27th Exercise
+
+
+
+// 28th Exercise
+
+
+
+// 29th Exercise
+
diff --git a/4-dom/index.html b/4-dom/index.html
@@ -4,9 +4,17 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <script src="./js/script.js"></script>
+    <script src="./js/script.js" defer></script>
 </head>
 <body>
-
+    <h2>30. Changing Content</h2>
+    <h2>31. Changing CSS</h2>
+    <h2>32. Changing Classes</h2>
+    <h2>33. Adding Elements through DOM</h2>
+    <h2>34. Removing Elements</h2>
+    <h2>35. Filtering Items</h2>
+    <h2>36. Moving Items</h2>
+    <h2>37. Modal</h2>
+    <h2>38. Accordion</h2>
 </body>
 </html>
diff --git a/4-dom/js/script.js b/4-dom/js/script.js
@@ -0,0 +1,34 @@
+// 30th Exercise
+
+
+
+// 31th Exercise
+
+
+
+// 32th Exercise
+
+
+
+// 33th Exercise
+
+
+
+// 34th Exercise
+
+
+
+// 35th Exercise
+
+
+
+// 36th Exercise
+
+
+
+// 37th Exercise
+
+
+
+// 38th Exercise
+
diff --git a/5-asynchronous_programming/index.html b/5-asynchronous_programming/index.html
@@ -4,9 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <script src="./js/script.js"></script>
+    <script src="./js/script.js" defer></script>
 </head>
 <body>
-
+    <h2>39. Custom Timer</h2>
+    <h2>40. Array Mapping</h2>
+    <h2>41. Conditional Execution</h2>
+    <h2>42. Simulating API</h2>
+    <h2>43. Recovering Data with Fetch</h2>
+    <h2>44. Promise Chain</h2>
+    <h2>45. Promise Retry</h2>
 </body>
 </html>