|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <title>Advanced Function Exercise</title> |
| 5 | + <style> |
| 6 | + .btn-subscribe { |
| 7 | + font-weight: 15px; |
| 8 | + height: 40px; |
| 9 | + width: 80px; |
| 10 | + background-color: rgb(217, 17, 17); |
| 11 | + color: white; |
| 12 | + border: none; |
| 13 | + border-radius: 5px; |
| 14 | + cursor: pointer; |
| 15 | + } |
| 16 | + |
| 17 | + .js-size-double { |
| 18 | + font-size: 30px; |
| 19 | + height: 80px; |
| 20 | + width: 160px; |
| 21 | + } |
| 22 | + </style> |
| 23 | + </head> |
| 24 | + <body> |
| 25 | + <h3> |
| 26 | + Create a variable multiply and assign a function to this variable that |
| 27 | + multiplies two numbers. call this method from the variable |
| 28 | + </h3> |
| 29 | + <h4 id="arrowFunction"></h4> |
| 30 | + |
| 31 | + <h3> |
| 32 | + create a function runTwice that takes a function as a parameter and then |
| 33 | + runs that method twice (CallBack Function) |
| 34 | + </h3> |
| 35 | + <h4 id="callbackFunction"></h4> |
| 36 | + |
| 37 | + <h3> |
| 38 | + Create a button which should grow double in size on clicking after 2 |
| 39 | + seconds |
| 40 | + </h3> |
| 41 | + |
| 42 | + <!-- short trick, when call setTimeout..no need to round bracket or parenthesis after function name bcz setTimeout upon call the method --> |
| 43 | + |
| 44 | + <!-- <button class="btn-subscribe" onclick="setTimeout(doubleTheSize, 2000)" ;> |
| 45 | + Subscribe |
| 46 | + </button> --> |
| 47 | + |
| 48 | + <button class="btn-subscribe">Subscribe</button> |
| 49 | + |
| 50 | + <h3 id="forEach"> |
| 51 | + Create a function that sums an array of numbers. Do this using forEach |
| 52 | + loop |
| 53 | + </h3> |
| 54 | + <h4 id="array"></h4> |
| 55 | + <h4 id="result"></h4> |
| 56 | + |
| 57 | + <h3> |
| 58 | + Create a function that takes an array of numbers and return their squares |
| 59 | + using map function |
| 60 | + </h3> |
| 61 | + <h4 id="map"></h4> |
| 62 | + |
| 63 | + <script> |
| 64 | + let multiply = (num1, num2) => num1 * num2; |
| 65 | + |
| 66 | + let num = 5, |
| 67 | + num2 = 6; |
| 68 | + |
| 69 | + document.querySelector( |
| 70 | + "#arrowFunction" |
| 71 | + ).innerText = ` => Multiplication of ${num} & ${num2} is ${multiply( |
| 72 | + num, |
| 73 | + num2 |
| 74 | + )}`; |
| 75 | + |
| 76 | + console.log(multiply(5, 6)); |
| 77 | + |
| 78 | + let printGreeting = () => console.log("Hello, Mr. Sofian"); |
| 79 | + |
| 80 | + let printGreeting1 = () => { |
| 81 | + let element = document.querySelector("#callbackFunction"); |
| 82 | + element.innerText += "=> Hello, Mr. Sofian\n"; |
| 83 | + }; |
| 84 | + |
| 85 | + let runTwice = (inputFunction) => { |
| 86 | + inputFunction(); |
| 87 | + inputFunction(); |
| 88 | + }; |
| 89 | + |
| 90 | + runTwice(printGreeting); |
| 91 | + runTwice(printGreeting1); |
| 92 | + |
| 93 | + let buttonElement = document.querySelector(".btn-subscribe"); |
| 94 | + |
| 95 | + buttonElement.addEventListener("click", () => { |
| 96 | + setTimeout(() => { |
| 97 | + buttonElement.classList.add("js-size-double"); |
| 98 | + }, 2000); |
| 99 | + }); |
| 100 | + |
| 101 | + /* buttonElement.addEventListener("click", (event) => |
| 102 | + setTimeout(doubleTheSize, 2000) |
| 103 | + ); */ |
| 104 | + |
| 105 | + function doubleTheSize() { |
| 106 | + let buttonElement = document.querySelector(".btn-subscribe"); |
| 107 | + buttonElement.classList.add("js-size-double"); |
| 108 | + } |
| 109 | + |
| 110 | + let arr = [10, 20, 30, 40, 50]; |
| 111 | + let sum = 0; |
| 112 | + |
| 113 | + arr.forEach((num) => { |
| 114 | + sum += num; |
| 115 | + }); |
| 116 | + |
| 117 | + // let forEachMethod = document.querySelector("#forEach"); |
| 118 | + // forEachMethod.innerText = `Sum is ${sum}`; |
| 119 | + |
| 120 | + console.log(sum); |
| 121 | + console.log(arr); |
| 122 | + |
| 123 | + function sumOfArray(numbers) { |
| 124 | + let sum = 0; |
| 125 | + |
| 126 | + numbers.forEach((num) => { |
| 127 | + sum += num; |
| 128 | + }); |
| 129 | + |
| 130 | + return sum; |
| 131 | + } |
| 132 | + |
| 133 | + let array = [10, 20, 30, 40, 50]; |
| 134 | + let total = sumOfArray(array); |
| 135 | + |
| 136 | + document.querySelector("#array").innerText = `Array = (${ |
| 137 | + array.length |
| 138 | + }) [${array.join(", ")}]`; |
| 139 | + |
| 140 | + document.querySelector("#result").innerText = `=> Sum is ${total}`; |
| 141 | + |
| 142 | + // forEach doesn't return anything; its just takes once all values for each array elements using callback function |
| 143 | + |
| 144 | + let squares = array.map((num) => num * num); |
| 145 | + |
| 146 | + document.querySelector("#map").innerText = `=> Array of Squares (${ |
| 147 | + squares.length |
| 148 | + }) [${squares.join(", ")}]`; |
| 149 | + console.log(squares); |
| 150 | + </script> |
| 151 | + </body> |
| 152 | +</html> |
0 commit comments