├── Challenges ├── [ 017 ] Challenge │ ├── index.html │ └── main.js ├── [ 022 ] Challenge │ ├── index.html │ └── main.js ├── [ 030 ] Challenge │ ├── index.html │ └── main.js ├── [ 037 ] Challenge │ ├── index.html │ └── main.js ├── [ 039 ] challenge │ ├── index.html │ └── main.js ├── [ 047 ] challenge │ ├── index.html │ └── main.js ├── [ 056 ] challenge │ ├── index.html │ ├── main.js │ └── simpleStyle.css ├── [ 063 ] challenge │ ├── index.html │ └── main.js ├── [ 070 ] challenge │ ├── index.html │ └── main.js ├── [ 078 ] challenge │ ├── index.html │ └── main.js ├── [ 101 ] challenge │ ├── index.html │ └── main.js ├── [ 114 ] challenge │ ├── bg-desktop.jpg │ ├── bg-mobile.jpg │ ├── index.html │ ├── main.js │ ├── paper-plane-solid.svg │ └── style.css ├── [ 122 ] challenge │ ├── index.html │ └── main.js ├── [ 133 ] challenge │ ├── index.html │ └── main.js └── [ 145 ] challenge │ ├── index.html │ └── main.js ├── README.md ├── [ 001 ] - [ 009 ] ├── index.html └── main.js ├── [ 010 ] - [ 017 ] ├── index.html └── main.js ├── [ 018 ] - [ 022 ] ├── index.html └── main.js ├── [ 023 ] - [ 030 ] ├── index.html └── main.js ├── [ 031 ] - [ 032 ] ├── index.html └── main.js ├── [ 033 ] - [ 037 ] ├── index.html └── main.js ├── [ 038 ] - [ 039 ] ├── index.html └── main.js ├── [ 040 ] - [ 047 ] ├── index.html └── main.js ├── [ 048 ] - [ 053 ] ├── index.html └── main.js ├── [ 054 ] - [ 056 ] ├── index.html └── main.js ├── [ 057 ] - [ 063 ] ├── index.html └── main.js ├── [ 064 ] - [ 070 ] ├── index.html └── main.js ├── [ 071 ] - [ 078 ] ├── index.html └── main.js ├── [ 079 ] - [ 085 ] ├── index.html └── main.js ├── [ 086 ] - [ 093 ] ├── Assignment 1 │ ├── index.html │ └── main.js ├── Assignment 2 │ ├── index.html │ └── main.js ├── Assignment 3 │ ├── index.html │ ├── main.js │ └── style.css ├── Assignment 4 │ ├── index.html │ └── main.js ├── Assignment 5 │ ├── index.html │ └── main.js └── Assignment 6 │ ├── index.html │ ├── main.js │ └── style.css ├── [ 094 ] - [ 101 ] ├── Assignment 1 │ └── index.html ├── Assignment 2 │ ├── index.html │ ├── main.js │ └── style.css ├── Assignment 3 │ ├── index.html │ └── main.js ├── Assignment 4 │ ├── index.html │ └── main.js └── Assignment 5 │ ├── index.html │ └── main.js ├── [ 102 ] - [ 110 ] ├── Assignment 1 │ ├── index.html │ └── main.js ├── Assignment 2 │ ├── index.html │ ├── main.js │ └── style.css ├── Assignment 3 │ ├── index.html │ └── main.js ├── Assignment 4 │ ├── index.html │ └── main.js └── Assignment 5 │ ├── index.html │ └── main.js ├── [ 111 ] - [ 114 ] ├── Assignment 1 │ ├── index.html │ └── main.js ├── Assignment 2 │ ├── index.html │ └── main.js └── Local storage - practise │ ├── index.html │ └── main.js ├── [ 115 ] - [ 122 ] ├── Assignment 1 │ ├── index.html │ └── main.js ├── Assignment 2 │ ├── index.html │ └── main.js ├── Assignment 3 │ ├── index.html │ └── main.js ├── Assignment 4 │ ├── index.html │ └── main.js └── Assignment 5 │ ├── index.html │ └── main.js ├── [ 123 ] - [ 133 ] ├── Assignment 1 │ ├── index.html │ └── main.js ├── Assignment 2 │ ├── index.html │ └── main.js ├── Assignment 3 │ ├── index.html │ └── main.js ├── Assignment 4 │ ├── index.html │ └── main.js ├── Assignment 5 │ ├── index.html │ └── main.js ├── Assignment 6 │ ├── index.html │ └── main.js └── Assignment 7 │ ├── index.html │ └── main.js ├── [ 134 ] - [ 146 ] ├── Assignment 1 │ ├── index.html │ └── main.js ├── Assignment 2 │ ├── index.html │ └── main.js ├── Assignment 3 │ ├── index.html │ └── main.js ├── Assignment 4 │ ├── index.html │ └── main.js ├── Assignment 5 │ ├── index.html │ └── main.js ├── Assignment 6 │ ├── index.html │ └── main.js └── Assignment 7 │ ├── index.html │ └── main.js ├── [ 147 ] - [ 158 ] ├── Assignment 1 │ ├── index.html │ └── main.js ├── Assignment 2 │ ├── index.html │ └── main.js ├── Assignment 3 - challenge │ ├── index.html │ └── main.js ├── Assignment 4 │ ├── index.html │ └── main.js └── Assignment 5 │ ├── index.html │ └── main.js ├── [ 159 ] - [ 168 ] ├── Assignment 1 │ ├── index.html │ └── main.js ├── Assignment 2 │ ├── index.html │ └── main.js ├── Assignment 3 │ ├── index.html │ └── main.js ├── Assignment 4 │ ├── index.html │ └── main.js ├── Assignment 5 │ ├── index.html │ └── main.js ├── Assignment 6 │ ├── index.html │ └── main.js ├── Assignment 7 │ ├── index.html │ └── main.js └── Assignment 8 │ ├── index.html │ ├── main.js │ ├── mod-one.js │ └── mod-two.js ├── [ 169 ] - [ 178 ] ├── Assignment 1 │ ├── articles.json │ └── index.html ├── Assignment 2 │ ├── articles.json │ ├── index.html │ └── main.js ├── Assignment 3 │ ├── articles.json │ ├── index.html │ └── main.js └── Assignment 4 │ ├── articles.json │ ├── index.html │ └── main.js └── [ 179 ] - [ 188 ] ├── Assignment 1 ├── index.html ├── info.json └── main.js └── Assignment 2 ├── index.html ├── info.json └── main.js /Challenges/[ 017 ] Challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Challenges/[ 017 ] Challenge/main.js: -------------------------------------------------------------------------------- 1 | let zName = "Osama"; 2 | let description = "Elzero web school" 3 | let date = "25/10" 4 | 5 | document.write(` 6 |
7 |

Hello ${zName}

8 |

${description}

9 | ${date} 10 |
11 | `.repeat(4)); -------------------------------------------------------------------------------- /Challenges/[ 022 ] Challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Challenges/[ 022 ] Challenge/main.js: -------------------------------------------------------------------------------- 1 | // Challenge 1 2 | 3 | let a = 10; 4 | let b = "20"; 5 | let c = 80; 6 | 7 | console.log(++a + +b++ + +c++ - +a++); 8 | console.log(++a + -b + +c++ - -a++ + +a); 9 | console.log(--c + +b + --a * +b++ - +b * a + --a - +true); 10 | 11 | /* 12 | 13 | /* 14 | Code 1 => [++a] [+] [+b++] [+] [+c++] [-] [+a++] 15 | [++a] 16 | - Value: 11 17 | - Explain: pre-increment 18 | [+] 19 | - Explain: add (plus) operator 20 | [+b++] 21 | - Value: 20 22 | - Explain: unary plus operator & post-increment 23 | [+] 24 | - Explain: add (plus) operator 25 | [+c++] 26 | - Value: 80 27 | - Explain: unary plus operator & post-increment 28 | [-] 29 | - Explain: subtract (minus) operator 30 | [+a++] 31 | - Value: 11 32 | - Explain: unary plus operator & post-increment 33 | Code 2 => [++a] [+] [-b] [+] [+c++] [-] [-a++] [+] [+a] 34 | [++a] 35 | - Value: 13 36 | - Explain: pre-increment 37 | [+] 38 | - Explain: add (plus) operator 39 | [-b] 40 | - Value: -21 41 | - Explain: unary negation operator 42 | [+] 43 | - Explain: add (plus) operator 44 | [+c++] 45 | - Value: 81 46 | - Explain: unary plus operator & post-increment 47 | [-] 48 | - Explain: subtract (minus) operator 49 | [-a++] 50 | - Value: -13 51 | - Explain: unary negation operator & post-increment 52 | [+] 53 | - Explain: add (plus) operator 54 | [+a] 55 | - Value: 14 56 | - Explain: unary plus operator 57 | Code 3 => [--c] [+] [+b] [+] [--a] [*] [+b++] [-] [+] [b] [*] [a] [+] [--a] [-] [+] [true] 58 | [--c] 59 | - Value: 81 60 | - Explain: pre decrement 61 | [+] 62 | - Explain: add (plus) operator 63 | [+b] 64 | - Value: 21 65 | - Explain: unary plus operator 66 | [+] 67 | - Explain: add (plus) operator 68 | [--a] 69 | - Value: 13 70 | - Explain: pre decrement 71 | [*] 72 | - Explain: multiply operator 73 | [+b++] 74 | - Value: 21 75 | - Explain: unary plus operator & post-increment 76 | [-] 77 | - Explain: subtract (minus) operator 78 | [+b] 79 | - Value: 22 80 | - Explain: unary plus operator 81 | [*] 82 | - Explain: multiply operator 83 | [a] 84 | - Value: 13 85 | [+] 86 | - Explain: add (plus) operator 87 | [--a] 88 | - Value: 12 89 | - Explain: pre-decrement 90 | [-] 91 | - Explain: subtract (minus) operator 92 | [+true] 93 | - Value: 1 94 | - Explain: Boolean value with unary plus before it so it is changed to number (true = 1, false = 0) 95 | */ 96 | 97 | 98 | // Challenge 2 99 | 100 | let d = "-100"; 101 | let e = "20"; 102 | let f = 30; 103 | let g = true; 104 | 105 | // Only Use Variables Value 106 | // Do Not Use Variable Twice 107 | 108 | console.log((+d * -g) *e ); // 2000 109 | console.log(++e * ++g + -d + ++f); // 173 -------------------------------------------------------------------------------- /Challenges/[ 030 ] Challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Challenges/[ 030 ] Challenge/main.js: -------------------------------------------------------------------------------- 1 | // Numbers from variables Challenge 2 | 3 | let a = 100; 4 | let b = 2_00.5; 5 | let c = 1e2; 6 | let d = 2.4; 7 | 8 | // Order 1 9 | // Find Smallest Number In All Variables And Return Integer 10 | console.log(Math.trunc(Math.min(a, b, c, d))); // 2 11 | 12 | // Order 2 13 | // Use Variables a + d One Time To Get The Needed Output 14 | console.log(a ** Math.trunc(d)); // 10000 15 | 16 | // Order 3 17 | // Get Integer "2" From d Variable With 4 Methods 18 | console.log(parseInt(d)); // 2 19 | console.log(Math.round(d)); // 2 20 | console.log(Math.floor(d)); // 2 21 | console.log(Math.trunc(d)); // 2 22 | 23 | // Order 4 24 | // Use Variables b + d To Get This Valus 25 | console.log((Math.trunc(b) / Math.ceil(d)).toFixed(2)); // 66.67 => String 26 | console.log(Math.round(Math.trunc(b) / Math.ceil(d))); // 67 => Number 27 | 28 | // String Manipulation Challenge 29 | 30 | let e = "Elzero Web School"; 31 | 32 | // Order 1 33 | // Include This Method In Your Solution [slice, charAt] 34 | console.log(e.charAt(2).toUpperCase() + e.slice(3, 6)); // Zero 35 | 36 | // Order 2 37 | // 8 H 38 | console.log(e.charAt(e.indexOf("h")).toUpperCase().repeat(8)); // HHHHHHHH 39 | 40 | // Order 3 41 | // Return Array 42 | console.log(e.split(" ", 1)); // ["Elzero"] 43 | 44 | // Order 4 45 | // Use Only "substr" Method + Template Literals In Your Solution 46 | console.log(`${e.substr(0, 6)} ${e.substr(11, 18)}`); // Elzero School 47 | 48 | // Order 5 49 | // Solution Must Be Dynamic Because String May Changes 50 | console.log(e.charAt(0).toLowerCase() + e.slice(1, e.length-1).toUpperCase() + e[e.length-1].toLowerCase()); // eLZERO WEB SCHOOl -------------------------------------------------------------------------------- /Challenges/[ 037 ] Challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Challenges/[ 037 ] Challenge/main.js: -------------------------------------------------------------------------------- 1 | // Condition Met Challenge 2 | 3 | // Challenge 1 4 | 5 | let a = 10; 6 | /* 7 | if (a < 10) { 8 | console.log(10); 9 | } else if (a >= 10 && a <= 40) { 10 | console.log("10 To 40"); 11 | } else if (a > 40) { 12 | console.log("> 40"); 13 | } else { 14 | console.log("Unknown"); 15 | } 16 | */ 17 | 18 | (a < 10) 19 | ? console.log(10) 20 | : (a >= 10 && a <= 40) 21 | ? console.log("10 To 40") 22 | : (a > 40) 23 | ? console.log("> 40") 24 | : console.log("Unknown") 25 | 26 | 27 | // Challenge 2 28 | 29 | let st = "Elzero Web School"; 30 | 31 | // Order 1 32 | if (st.charAt(st.indexOf("W")).toLowerCase() === "w") { 33 | console.log("Good"); 34 | } 35 | 36 | // Order 2 37 | if (! typeof(st) !== "string") { 38 | console.log("Good"); 39 | } 40 | 41 | // Order 3 42 | if (typeof (st.length) === "number") { 43 | console.log("Good"); 44 | } 45 | 46 | // Order 4 47 | if ((st.slice(0,6).repeat(2)) === "ElzeroElzero") { 48 | console.log("Good"); 49 | } -------------------------------------------------------------------------------- /Challenges/[ 039 ] challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Challenges/[ 039 ] challenge/main.js: -------------------------------------------------------------------------------- 1 | // If And Switch Toggle Challenge 2 | 3 | // Order 1 4 | 5 | let job = "developer"; 6 | let salary = 0; 7 | 8 | /* 9 | if (job === "Manager") { 10 | salary = 8000; 11 | } else if (job === "IT" || job === "Support") { 12 | salary = 6000; 13 | } else if (job === "Developer" || job === "Designer") { 14 | salary = 7000; 15 | } else { 16 | salary = 4000; 17 | } 18 | */ 19 | 20 | switch (job.charAt(0).toUpperCase() + job.slice(1)) { 21 | case "Manager": 22 | salary = 8000; 23 | console.log(salary); 24 | break; 25 | case "IT": 26 | case "Support": 27 | salary = 6000; 28 | console.log(salary); 29 | break; 30 | case "Developer": 31 | case "Designer": 32 | salary = 7000; 33 | console.log(salary); 34 | break; 35 | default: 36 | salary = 4000; 37 | console.log(salary); 38 | } 39 | 40 | // Order 2 41 | 42 | let holidays = 0; 43 | let money = 0; 44 | 45 | /* 46 | switch (holidays) { 47 | case 0: 48 | money = 5000; 49 | console.log(`My Money is ${money}`); 50 | break; 51 | case 1: 52 | case 2: 53 | money = 3000; 54 | console.log(`My Money is ${money}`); 55 | break; 56 | case 3: 57 | money = 2000; 58 | console.log(`My Money is ${money}`); 59 | break; 60 | case 4: 61 | money = 1000; 62 | console.log(`My Money is ${money}`); 63 | break; 64 | case 5: 65 | money = 0; 66 | console.log(`My Money is ${money}`); 67 | break; 68 | default: 69 | money = 0; 70 | console.log(`My Money is ${money}`); 71 | } 72 | */ 73 | 74 | if (holidays == 0) { 75 | money = 5000; 76 | } else if (holidays == 1 || holidays == 2) { 77 | money = 3000; 78 | } else if (holidays == 3) { 79 | money = 2000; 80 | } else if (holidays == 4) { 81 | money = 1000; 82 | } else if (holidays == 5) { 83 | money = 0; 84 | } 85 | console.log(`My Money is ${money}`); 86 | -------------------------------------------------------------------------------- /Challenges/[ 047 ] challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Challenges/[ 047 ] challenge/main.js: -------------------------------------------------------------------------------- 1 | let zero = 0; 2 | let counter = 3; 3 | let my = ["Ahmed", "Mazero", "Elham", "Osama", "Gamal", "Ameer"]; 4 | 5 | // Order 1 6 | console.log(my.slice(zero,counter + true).reverse()); // ["Osama", "Elham", "Mazero", "Ahmed"]; 7 | 8 | // Order 2 9 | console.log(my.slice(counter - true, counter + true)); // ["Elham", "Mazero"] 10 | 11 | // Order 3 12 | console.log(my[counter - true].slice(zero, counter - true) + my[zero + true].slice(counter - true)); // "Elzero" 13 | 14 | // Order 4 15 | console.log(my[zero + true].slice(zero - true - true, zero - true) + my[zero + true].slice(--zero).toUpperCase()); // "rO" -------------------------------------------------------------------------------- /Challenges/[ 056 ] challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Challenges/[ 056 ] challenge/main.js: -------------------------------------------------------------------------------- 1 | let myAdmins = ["Ahmed", "Osama", "Sayed", "Stop", "Samera"]; 2 | let myEmployees = ["Amgad", "Samah", "Ameer", "Omar", "Othman", "Amany", "Samia", "Anwar"]; 3 | let showCount = 3 4 | 5 | document.write(`
We Have ${showCount} Admins
`); 6 | document.write(`
`); 7 | 8 | for (i = 0; i <= showCount; i++){ 9 | if (myAdmins[i] === "Stop" || myAdmins[i] === "stop") break; 10 | document.write(`
`); 11 | document.write(`

The Admin For Team ${i + 1} is ${myAdmins[i]}

`); 12 | document.write(`

Team members:

`); 13 | let counter = 1; 14 | for (j = 0; j < myEmployees.length; j++){ 15 | if (myEmployees[j][0] == myAdmins[i][0]) { 16 | document.write(`

${counter++}- ${myEmployees[j]}

`) 17 | } 18 | } 19 | counter = 1 20 | document.write(`
`); 21 | document.write(`
`); 22 | } 23 | -------------------------------------------------------------------------------- /Challenges/[ 056 ] challenge/simpleStyle.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-color: #006dd3; 3 | } 4 | * { 5 | box-sizing: border-box; 6 | } 7 | body { 8 | font-family: sans-serif; 9 | } 10 | div:first-of-type { 11 | text-align: center; 12 | font-size: 1.5rem; 13 | font-weight: bold; 14 | } 15 | div { 16 | background-color: #ededed; 17 | padding: .8rem; 18 | border-radius: .5rem; 19 | } 20 | span { 21 | font-weight: bold; 22 | color: var(--main-color); 23 | } 24 | h3 { 25 | color: var(--main-color); 26 | } 27 | p { 28 | border-left: 3px solid var(--main-color); 29 | padding-left: .4rem; 30 | margin-left: 1.3rem; 31 | } 32 | hr{ 33 | border: none; 34 | height: 1px; 35 | width: 100%; 36 | background-color: #eee; 37 | } 38 | -------------------------------------------------------------------------------- /Challenges/[ 063 ] challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Challenges/[ 063 ] challenge/main.js: -------------------------------------------------------------------------------- 1 | function checkStatus(a, b, c) { 2 | let check = [a, b, c] 3 | let zName, zAge, status; 4 | for (i = 0; i < check.length; i++){ 5 | if (typeof check[i] === "string") { 6 | zName = check[i]; 7 | } else if (typeof check[i] === "number") { 8 | zAge = check[i]; 9 | } else if (typeof check[i] === "boolean") { 10 | if (check[i] === true) { 11 | status = "Available"; 12 | } else { 13 | status = "Not available" 14 | } 15 | } 16 | } 17 | return `Hello ${zName}, Your age is ${zAge}, You are ${status} for hiring` 18 | } 19 | 20 | console.log(checkStatus(38, "Osama", true)); 21 | 22 | /* Needed Output 23 | checkStatus("Osama", 38, true); // "Hello Osama, Your Age Is 38, You Are Available For Hire" 24 | checkStatus(38, "Osama", true); // "Hello Osama, Your Age Is 38, You Are Available For Hire" 25 | checkStatus(true, 38, "Osama"); // "Hello Osama, Your Age Is 38, You Are Available For Hire" 26 | checkStatus(false, "Osama", 38); // "Hello Osama, Your Age Is 38, You Are Not Available For Hire" 27 | */ -------------------------------------------------------------------------------- /Challenges/[ 070 ] challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Challenges/[ 070 ] challenge/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | Function Arrow Challenges 3 | */ 4 | 5 | // [1] One Statement In Function 6 | // [2] Convert To Arrow Function 7 | // [3] Print The Output [Arguments May Change] 8 | 9 | let names = (...zNames) =>`String [${zNames.join("], [")}] => Done !`; 10 | 11 | console.log(names("Osama", "Mohamed", "Ali", "Ibrahim")); 12 | // String [Osama], [Mohamed], [Ali], [Ibrahim] => Done ! 13 | 14 | /* ================================= */ 15 | 16 | // [1] Replace ??? In Return Statement To Get The Output 17 | // [2] Create The Same Function With Regular Syntax 18 | // [3] Use Array Inside The Arguments To Get The Output 19 | 20 | let myNumbers = [20, 50, 10, 60]; 21 | 22 | calc = function (one, two, ...nums) { 23 | return one + two + parseInt(nums); 24 | } 25 | console.log(calc(10, 20, 50)); // 80 -------------------------------------------------------------------------------- /Challenges/[ 078 ] challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Challenges/[ 078 ] challenge/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | Higher Order Functions Challenges 3 | 4 | You Can Use 5 | - , 6 | - _ 7 | - Space 8 | - True => 1 => One Time Only In The Code 9 | 10 | You Cannot Use 11 | - Numbers 12 | - Letters 13 | 14 | - You Must Use [Filter + Map + Reduce + Your Knowledge] 15 | - Order Is Not Important 16 | - All In One Chain 17 | 18 | */ 19 | 20 | let myString = "1,2,3,EE,l,z,e,r,o,_,W,e,b,_,S,c,h,o,o,l,2,0,Z"; 21 | 22 | let solution = myString.split(",").filter((ele) => { 23 | return isNaN(ele); 24 | }).map((ele) => { 25 | return ele === "_" ? " " : ele; 26 | }).reduce((acc, current) => { 27 | return `${acc}${current}` 28 | }).slice(true, -isNaN(myString)); 29 | 30 | console.log(solution); // Elzero Web School -------------------------------------------------------------------------------- /Challenges/[ 101 ] challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Challenges/[ 101 ] challenge/main.js: -------------------------------------------------------------------------------- 1 | document.body.style.fontFamily = "Tahoma"; 2 | document.body.style.margin = "0"; 3 | 4 | // Create header Section with container 5 | let header = document.createElement("header"); 6 | let headerContainer = document.createElement("div"); 7 | header.appendChild(headerContainer); 8 | 9 | 10 | // Append header to body 11 | document.body.appendChild(header); 12 | // header container style [css Text] 13 | headerContainer.style.cssText = "display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 1rem;"; 14 | 15 | // Create logo div 16 | let logo = document.createElement("div"); 17 | let logoText = document.createTextNode("Elzero"); 18 | 19 | headerContainer.appendChild(logo); 20 | logo.appendChild(logoText); 21 | // logo style [inline] 22 | logo.style.color = "#348AC7"; 23 | logo.style.fontWeight = "bold"; 24 | logo.style.fontSize = "1.7rem"; 25 | 26 | // Create nav links (ul) 27 | let ul = document.createElement("ul"); 28 | ul.innerHTML = "
  • Home
  • About
  • Services
  • Contact
    • "; 29 | headerContainer.appendChild(ul) 30 | // ul style 31 | ul.style.display = "flex"; 32 | ul.style.color = "gray"; 33 | ul.style.fontSize = ".9rem"; 34 | ul.style.listStyle = 'none'; 35 | let lis = document.querySelectorAll(".li"); 36 | for (i = 0; i < lis.length; i++){ 37 | lis[i].style.paddingLeft = '1rem'; 38 | } 39 | 40 | /* ================================================== */ 41 | 42 | // Create grid container for products 43 | let productsContainer = document.createElement("div"); 44 | productsContainer.style.cssText = "display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 15px; gap: 15px; background-color: #eee; height: calc(100vh - 150px)"; 45 | // Create products 46 | for (j = 1; j <= 15; j++){ 47 | let product = document.createElement("div"); 48 | product.style.cssText = "display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: white; font-size: 1.7rem;"; 49 | product.innerHTML = `${j}Product`; 50 | productsContainer.appendChild(product); 51 | }; 52 | 53 | // append products section to body after header 54 | header.after(productsContainer) 55 | 56 | /* ================================================== */ 57 | 58 | // Create footer 59 | let footer = document.createElement("footer"); 60 | // footer style [inline] 61 | footer.style.backgroundColor = "#348AC7"; 62 | footer.style.height = "60px"; 63 | footer.style.display = "flex"; 64 | footer.style.justifyContent = "center"; 65 | footer.style.alignItems = "center"; 66 | footer.style.color = "white"; 67 | footer.textContent = "Copyright @ 2022 - Alaa Eldeyn" 68 | 69 | // Append footer to body after products section 70 | productsContainer.after(footer) -------------------------------------------------------------------------------- /Challenges/[ 114 ] challenge/bg-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alaa-Eldeyn/JavaScript-Bootcamp-Assignments/fc691ac24335bed9ed159bc85a6aea9116bf5b11/Challenges/[ 114 ] challenge/bg-desktop.jpg -------------------------------------------------------------------------------- /Challenges/[ 114 ] challenge/bg-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alaa-Eldeyn/JavaScript-Bootcamp-Assignments/fc691ac24335bed9ed159bc85a6aea9116bf5b11/Challenges/[ 114 ] challenge/bg-mobile.jpg -------------------------------------------------------------------------------- /Challenges/[ 114 ] challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BOM Challenge 8 | 9 | 10 |

    To Do list - Alaa Eldeyn

    11 |
    12 |
    13 | 14 | 15 |
    16 |
    17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /Challenges/[ 114 ] challenge/main.js: -------------------------------------------------------------------------------- 1 | let myTask = document.querySelector(".input"); 2 | let addBtn = document.querySelector(".add"); 3 | let taskList = document.querySelector(".tasks"); 4 | 5 | // Empty array to store the tasks 6 | let arrayOfTasks = []; 7 | 8 | // Check if there is tasks in local storage 9 | if (localStorage.getItem("tasks")) { 10 | arrayOfTasks = JSON.parse(localStorage.getItem("tasks")) 11 | } 12 | 13 | // Trigger Get data from local storage function 14 | getDataFromLS(); 15 | 16 | // Add task 17 | addBtn.onclick = function () { 18 | if (myTask.value !== "") { 19 | addTaskToArr(myTask.value); // Add task to Array of tasks 20 | myTask.value = ""; // Empty input field 21 | }; 22 | }; 23 | 24 | // Update data 25 | taskList.addEventListener("click", e => { 26 | // Delete button 27 | if (e.target.classList.contains("del")) { 28 | deleteTask(e.target.parentElement.getAttribute("data-id")); 29 | e.target.parentElement.remove(); 30 | }; 31 | // Complete task 32 | if (e.target.classList.contains("task")) { 33 | completedTask(e.target.getAttribute("data-id")) 34 | e.target.classList.toggle("done"); 35 | }; 36 | }); 37 | 38 | function addTaskToArr(taskText) { 39 | // Task data 40 | const task = { 41 | id: Date.now(), 42 | title: taskText, 43 | statue: false 44 | }; 45 | // Push tasks to Array of tasks 46 | arrayOfTasks.push(task); 47 | // Add tasks to page 48 | addElementsToPageFrom(arrayOfTasks); 49 | // Add tasks to local storage from array of tasks 50 | storeData(arrayOfTasks); 51 | }; 52 | 53 | function addElementsToPageFrom(arrayOfTasks) { 54 | // Empty tasks list container 55 | taskList.innerHTML = ""; 56 | // looping on tasks items 57 | arrayOfTasks.forEach(task => { 58 | // Create task div 59 | let div = document.createElement("div"); 60 | div.className = "task"; 61 | if (task.stat) { 62 | div.className = "task done"; 63 | }; 64 | div.setAttribute("data-id", task.id); 65 | div.appendChild(document.createTextNode(task.title)); 66 | // Create delete button 67 | let del = document.createElement("button"); 68 | del.className = "del"; 69 | del.appendChild(document.createTextNode("delete")); 70 | div.appendChild(del); 71 | // Append task div to page 72 | taskList.appendChild(div); 73 | }); 74 | }; 75 | 76 | function storeData(arrayOfTasks) { 77 | window.localStorage.setItem("tasks", JSON.stringify(arrayOfTasks)) 78 | } 79 | 80 | function getDataFromLS() { 81 | let data = window.localStorage.getItem("tasks"); 82 | if (data) { 83 | let tasks = JSON.parse(data); 84 | addElementsToPageFrom(tasks); 85 | }; 86 | }; 87 | 88 | function deleteTask(taskId) { 89 | arrayOfTasks = arrayOfTasks.filter(task => task.id != taskId); 90 | storeData(arrayOfTasks); 91 | }; 92 | 93 | function completedTask(taskId) { 94 | for (i = 0; i < arrayOfTasks.length; i++){ 95 | if (arrayOfTasks[i].id == taskId) { 96 | arrayOfTasks[i].statue == false ? (arrayOfTasks[i].statue = true) : (arrayOfTasks[i].statue = false); 97 | }; 98 | }; 99 | storeData(arrayOfTasks); 100 | }; 101 | 102 | document.addEventListener("keydown", (el) => { 103 | if (el.key === "Enter") { 104 | if (myTask.value !== "") { 105 | addTaskToArr(myTask.value); 106 | myTask.value = ""; 107 | myTask.focus(); 108 | } 109 | } 110 | }); -------------------------------------------------------------------------------- /Challenges/[ 114 ] challenge/paper-plane-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Challenges/[ 114 ] challenge/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | h1{ 5 | font-family: cairo,Tahoma,Arial; 6 | color: white; 7 | text-align: center; 8 | position: relative; 9 | } 10 | h1 span{ 11 | color: #00887a; 12 | } 13 | h1::after{ 14 | content: ''; 15 | position: absolute; 16 | bottom: -5px; 17 | left: 50%; 18 | transform: translateX(-50%); 19 | width: 75%; 20 | height: 1px; 21 | background-color: white; 22 | } 23 | body{ 24 | background: url(bg-desktop.jpg) center/cover; 25 | } 26 | @media(max-width: 500px){ 27 | body{ 28 | background: url(bg-mobile.jpg) center/cover; 29 | } 30 | } 31 | .container{ 32 | width: 90%; 33 | margin: 1rem auto; 34 | text-align: center; 35 | } 36 | @media (min-width: 500px){ 37 | .container{ 38 | width: 480px; 39 | } 40 | } 41 | .form{ 42 | display: flex; 43 | gap: 1rem; 44 | background-color: #eee; 45 | padding: 1rem; 46 | margin-bottom: 1rem; 47 | border-radius: .5rem; 48 | } 49 | .form input{ 50 | padding: 10px; 51 | border-radius: .25rem; 52 | border: none; 53 | } 54 | .form .input{ 55 | flex: 1; 56 | } 57 | .form .input:focus{ 58 | outline: none; 59 | } 60 | .form .add{ 61 | background-color: #00887a; 62 | color: white; 63 | padding: 10px 15px; 64 | cursor: pointer; 65 | } 66 | @media(max-width: 400px){ 67 | .form{ 68 | position: absolute; 69 | bottom: 0; 70 | left: 0; 71 | width: 100%; 72 | background-color: transparent; 73 | } 74 | .container .form .add{ 75 | border-radius: 50%; 76 | padding: 8px 16px; 77 | font-size: 1.5rem; 78 | } 79 | .form .input{ 80 | border-radius: 2rem; 81 | padding-left: 1rem; 82 | } 83 | } 84 | .tasks{ 85 | padding: 1rem; 86 | border-radius: 10px; 87 | background-color: #eee; 88 | cursor: pointer; 89 | max-height: 490px; 90 | overflow: scroll; 91 | } 92 | .tasks div{ 93 | display: flex; 94 | justify-content: space-between; 95 | align-items: center; 96 | background-color: white; 97 | padding: 0 10px; 98 | border-radius: 5px; 99 | height: 40px; 100 | } 101 | .tasks div:hover{ 102 | background-color: #f8f8f8; 103 | } 104 | .tasks div:not(:last-of-type){ 105 | margin-bottom: .8rem; 106 | } 107 | .done{ 108 | opacity: .5; 109 | } 110 | .del{ 111 | background-color: #075E54; 112 | color: white; 113 | cursor: pointer; 114 | border-radius: 5px; 115 | border: none; 116 | padding: 4px 8px; 117 | } -------------------------------------------------------------------------------- /Challenges/[ 122 ] challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Destructuring Challenge 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Challenges/[ 122 ] challenge/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | Destructuring 3 | - Challenge 4 | */ 5 | 6 | let chosen = 1; 7 | 8 | let myFriends = [ 9 | { title: "Osama", age: 39, available: true, skills: ["HTML", "CSS"] }, 10 | { title: "Ahmed", age: 25, available: false, skills: ["Python", "Django"] }, 11 | { title: "Sayed", age: 33, available: true, skills: ["PHP", "Laravel"] }, 12 | ]; 13 | 14 | 15 | showDetails() 16 | 17 | function showDetails() { 18 | let i = chosen - 1; 19 | let { title: name, age: zAge, available: statue, skills: [, last] } = myFriends[i]; 20 | console.log(`Name: ${name}\nAge: ${zAge}\n${statue == true ? 'Statue: Available' :'Statue: Not Available'}\nLast skill: ${last}`) 21 | // console.log(`Name: ${name}`); 22 | // console.log(`Age: ${zAge}`); 23 | // statue == true 24 | // ? console.log(`Statue: Available`) 25 | // : console.log(`Statue: Not Available`) 26 | // console.log(`Last skill: ${last}`); 27 | }; -------------------------------------------------------------------------------- /Challenges/[ 133 ] challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Map And Set Challenge 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Challenges/[ 133 ] challenge/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | Map And Set + What You Learn => Challenge 3 | Requirements 4 | - You Cant Use Numbers Or True Or False 5 | - Don't Use Array Indexes 6 | - You Cant Use Loop 7 | - You Cant Use Any Higher Order Function 8 | - Only One Line Solution Inside Console 9 | - If You Use Length => Then Only Time Only 10 | Hints 11 | - You Can Use * Operator Only In Calculation 12 | - Set 13 | - Spread Operator 14 | - Math Object Methods 15 | */ 16 | 17 | let n1 = [10, 30, 10, 20]; 18 | let n2 = [30, 20, 10]; 19 | 20 | console.log(Math.max(...n2) * [...n1, ...n2].length); // 210 -------------------------------------------------------------------------------- /Challenges/[ 145 ] challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Regular Expressions Challenge 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Challenges/[ 145 ] challenge/main.js: -------------------------------------------------------------------------------- 1 | let url1 = 'elzero.org'; 2 | let url2 = 'http://elzero.org'; 3 | let url3 = 'https://elzero.org'; 4 | let url4 = 'https://www.elzero.org'; 5 | let url5 = 'https://www.elzero.org:8080/articles.php?id=100&cat=topics'; 6 | let url6 = 'https://elzero.org/javascript-bootcamp-assignments-lesson-from-134-to-146/' 7 | 8 | let re = /(https?:\/\/)?(www.)?\w+.\w+(.)*/ig; // Write Your Pattern Here 9 | 10 | console.log(url1.match(re)); 11 | console.log(url2.match(re)); 12 | console.log(url3.match(re)); 13 | console.log(url4.match(re)); 14 | console.log(url5.match(re)); 15 | console.log(url6.match(re)); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript-Bootcamp-Assignments -------------------------------------------------------------------------------- /[ 001 ] - [ 009 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 21 | 22 | 23 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /[ 001 ] - [ 009 ]/main.js: -------------------------------------------------------------------------------- 1 | // Assignment 2 2 | 3 | document.write("

    Elzero

    "); 4 | 5 | document.querySelector("h1").style.color = "blue"; 6 | document.querySelector("h1").style.fontSize = "80px"; 7 | document.querySelector("h1").style.fontWeight = "bold"; 8 | document.querySelector("h1").style.fontFamily = "Arial"; 9 | document.querySelector("h1").style.textAlign = "center"; 10 | 11 | 12 | // Assignment 3 13 | 14 | console.log("%cElzero %cWeb %cSchool", 15 | "font-size:40px; color:red", 16 | "font-size:40px; color:green; font-weight:bold;", 17 | "font-size:40px; color:white; background-color:blue"); 18 | 19 | 20 | // Assignment 4 21 | 22 | console.group("Group One"); 23 | console.log("Massage One"); 24 | console.log("Massage Two"); 25 | console.group("Child group"); 26 | console.log("Massage One"); 27 | console.log("Massage Two"); 28 | console.group("Grand Child group"); 29 | console.log("Massage One"); 30 | console.log("Massage Two"); 31 | console.groupEnd(); 32 | console.groupEnd(); 33 | console.groupEnd(); 34 | console.group("Group Two") 35 | console.log("Massage One"); 36 | console.log("Massage Two"); 37 | 38 | 39 | // Assignment 5 40 | 41 | console.table(['Elzero', 'Ahmed', 'Sameh', 'Gamal', 'Aya']); 42 | 43 | 44 | // Assignment 6 45 | 46 | // Way one 47 | // console.log("Iam In Console"); 48 | // document.write("Iam In Page"); 49 | 50 | // Way two 51 | /* console.log("Iam In Console"); 52 | document.write("Iam In Page"); */ -------------------------------------------------------------------------------- /[ 010 ] - [ 017 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

    Elzero

    10 | 11 | 12 | -------------------------------------------------------------------------------- /[ 010 ] - [ 017 ]/main.js: -------------------------------------------------------------------------------- 1 | // Assignment 1 2 | 3 | // Add Variables Here 4 | let numberOne = 10; 5 | let numberTwo = 20; 6 | 7 | // Ouput 8 | console.log(numberOne + '' + numberTwo); // Normal Concatenate => 1020 9 | console.log(typeof(numberOne + '' + numberTwo)); // Normal Concatenate => String 10 | console.log(`${numberOne}${numberTwo}`); // Template Literals Way => 1020 11 | console.log(typeof(`${numberOne}${numberTwo}`)); // Template Literals Way => String 12 | 13 | console.log(numberTwo + "\n" + numberOne); 14 | /* 15 | Normal Concatenate 16 | 20 17 | 10 18 | */ 19 | 20 | console.log(`${numberTwo} 21 | ${numberOne}`); 22 | /* 23 | Template Literals Way 24 | 20 25 | 10 26 | */ 27 | 28 | 29 | // Assignment 2 30 | 31 | console.log(elzero.innerHTML); // object 32 | console.log(typeof elzero); // object 33 | 34 | 35 | // Assignment 3 36 | 37 | console.log("\`I'm In\n\\\\\nLove \\\\ \"\"\" \'\'\'\n++ With ++\n\\\"\"\"\\\"\"\"\n\"\"JavaScript\"\"\`\`"); 38 | 39 | 40 | 41 | // Assignment 4 42 | 43 | let a = 21; 44 | let b = 20; 45 | 46 | console.log(`_${`${a}_${b}`.repeat(4)}_`); // _21_2021_2021_2021_20_ -------------------------------------------------------------------------------- /[ 018 ] - [ 022 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 018 ] - [ 022 ]/main.js: -------------------------------------------------------------------------------- 1 | // Assignment 1 => تحدى 2 | 3 | // Replace ? With Arithmetic Operators 4 | console.log(10 * 20 - (15 % 3) + 190 + 10 - 400); // 0 5 | 6 | 7 | // Assignment 2 8 | 9 | let num = 3; 10 | 11 | // Solution One 12 | console.log(num + num); // 6 13 | 14 | // Solution Two 15 | console.log(num * num - num); // 6 16 | 17 | // Solution Three 18 | console.log(num * (num - true)); // 6 19 | 20 | // Solution Four 21 | console.log(num * --num); // 6 22 | 23 | // Solution Five 24 | console.log(num++*num); // 6 25 | 26 | // Solution Six 27 | console.log((typeof num).length); // 6 28 | 29 | 30 | // Assignment 3 31 | 32 | let numTwo = "10"; 33 | 34 | // Solution One 35 | console.log(+numTwo + +numTwo); // 20 36 | 37 | // Solution Two 38 | console.log(+numTwo *(+true + +true)); // 20 39 | 40 | // Solution Three 41 | console.log(+numTwo + --numTwo + --numTwo - --numTwo); // 20 42 | 43 | // Solution Four 44 | console.log(+numTwo + +numTwo + --numTwo); // 20 45 | 46 | 47 | // Assignment 3 48 | 49 | let points = 10; 50 | 51 | // Write Your Code Here 52 | points += ++points.toString().length 53 | console.log(points); // 13 54 | 55 | // Write Your Code Here 56 | 57 | points -= ++points.toString().length + true + true 58 | console.log(points); // 8; -------------------------------------------------------------------------------- /[ 023 ] - [ 030 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 023 ] - [ 030 ]/main.js: -------------------------------------------------------------------------------- 1 | // Assignment 1 2 | console.log(100_000); // 100000 3 | console.log(100000); // 100000 4 | console.log(5e4 + 5e4); // 100000 5 | 6 | // Your Solutions 7 | console.log(10e4); // 100000 8 | console.log(10 * 10e3); // 100000 9 | console.log(1000 * 100); // 100000 10 | console.log(Math.round(100000.22)); // 100000 11 | console.log(Math.ceil(99999.4)); // 100000 12 | console.log(Math.floor(100000.9)); // 100000 13 | console.log(Math.trunc(100000.6)); // 100000 14 | console.log(Math.pow(10,5)); // 100000 15 | console.log(Number(1e5)); // 100000 16 | console.log(parseInt(100000.661648)); // 100000 17 | 18 | 19 | // Assignment 2 20 | console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991 21 | 22 | 23 | // Assignment 3 24 | console.log((Number.MAX_SAFE_INTEGER).toString().length); // 16 25 | 26 | 27 | // Assignment 4 28 | let myVar = "100.56789 Views"; 29 | 30 | console.log(parseInt(myVar)); // 100 31 | console.log(parseFloat(myVar).toFixed(2)); // 100.57 32 | 33 | 34 | // Assignment 5 35 | let num = 10; 36 | 37 | console.log(Number.isInteger(num) + true); // 2 38 | 39 | 40 | // Assignment 6 41 | let flt = 10.4; 42 | 43 | console.log(Math.round(flt)); // 10 44 | console.log(Math.floor(flt)); // 10 45 | console.log(Math.trunc(flt)); // 10 46 | console.log(parseInt(flt)); // 10 47 | console.log(flt.toFixed(0)); // 10 48 | console.log(Math.ceil(--flt)); // 10 49 | 50 | 51 | // Assignment 7 52 | console.log(parseInt(Math.random()*4)); // 0 || 1 || 2 || 3 || 4 -------------------------------------------------------------------------------- /[ 031 ] - [ 032 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 031 ] - [ 032 ]/main.js: -------------------------------------------------------------------------------- 1 | // Assignment 1 2 | 3 | console.log(100 == "100"); // true 4 | console.log(100 !== 1000); // true 5 | console.log(110 > 100 && 10 < 20); // true 6 | console.log(-10 == "-10"); // true 7 | console.log(! -50 >= +"-40"); // true 8 | console.log(! 10 <= -"-40"); // true 9 | console.log(! "10" != 10); // true 10 | console.log(!20 === false); // true 11 | 12 | 13 | // Assignment 2 14 | 15 | let num1 = 10; 16 | let num2 = 20; 17 | 18 | console.log(num2 > num1); // true 19 | console.log(num1 != num2); // true 20 | console.log(num2 !== num1); // true 21 | console.log(!(num1 == num2)); // true 22 | console.log(!(num1 > num2)); // true 23 | console.log(!(num1 === num2)); // true 24 | 25 | 26 | // Assignment 3 27 | 28 | let a = 20; 29 | let b = 30; 30 | let c = 10; 31 | 32 | console.log(a < b && a > c || a < b); // true 33 | console.log(a < b && a > c); // true 34 | console.log(!(a > b) && !(a >= b) && !(a < c) && !(a <= c)); // true -------------------------------------------------------------------------------- /[ 033 ] - [ 037 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 033 ] - [ 037 ]/main.js: -------------------------------------------------------------------------------- 1 | // Assignment 1 2 | 3 | /* Test Case 1 4 | let num = 9; // "009" 5 | 6 | Test Case 2 7 | let num = 20; // "020" 8 | 9 | Test Case 3 10 | let num = 110; // "110" */ 11 | 12 | let num = 20; 13 | 14 | if (num >= 100) { 15 | console.log(num) 16 | } else if (num < 100 && num >= 10) { 17 | console.log(`0${num}`) 18 | } else { 19 | console.log(`00${num}`) 20 | } 21 | 22 | 23 | // Assignment 2 24 | 25 | let num1 = 9; 26 | let str = "9"; 27 | let str2 = "20"; 28 | 29 | if (num1 == str) { 30 | console.log("{num1} Is The Same Value As {str}") 31 | } 32 | if (num1 == str && typeof num1 !== typeof str) { 33 | console.log("{num1} Is The Same Value As {str} But Not The Same Type") 34 | } 35 | if (num1 !== str2 || typeof num1 != str2) { 36 | console.log("{num1} Is Not The Same Value Or The Same Type As {str2}") 37 | } 38 | if (typeof str == typeof str2 && str != str2) { 39 | console.log("{str} Is The Same Type As {str2} But Not The Same Value") 40 | } 41 | /* Output 42 | "{num1} Is The Same Value As {str}" 43 | "{num1} Is The Same Value As {str} But Not The Same Type" 44 | "{num1} Is Not The Same Value Or The Same Type As {str2}" 45 | "{str} Is The Same Type As {str2} But Not The Same Value" */ 46 | 47 | 48 | // Assignment 3 49 | 50 | let num2 = 10; 51 | let num3 = 30; 52 | let num4 = "30"; 53 | 54 | if (num4 > num2 && typeof num4 !== typeof num2) { 55 | console.log(`${num4} Is Larger Than ${num2} And Type string Not The Same Type As number`); 56 | } else if (num4 > num2 && num4 == num3 && typeof num4 !== typeof num3) { 57 | console.log(`${num4} Is Larger Than ${num2} And Value Is The Same As ${num4} And Type string Not The Same Type As number`) 58 | } else if (num4 !== num2 && typeof num4 !== typeof num3) { 59 | console.log(`${num4} Value And Type Is Not The Same As ${num2} And Type Is Not The Same As ${num3}`) 60 | } 61 | /* Needed Output 62 | "30 Is Larger Than 10 And Type string Not The Same Type As number" 63 | "30 Is Larger Than 10 And Value Is The Same As 30 And Type string Not The Same Type As number" 64 | "{num4} Value And Type Is Not The Same As {num2} And Type Is Not The Same As {num3}" */ 65 | 66 | 67 | // Assignment 4 68 | 69 | // Edit What You Want Here 70 | 71 | let num5 = 20; 72 | let num6 = 1; 73 | let num7 = 20; 74 | let num8 = 60; 75 | 76 | // Condition 1 77 | 78 | if (num5 > num6) { 79 | console.log("True"); 80 | } else { 81 | console.log("False"); 82 | } 83 | 84 | // Condition 2 85 | 86 | if (num5 > num6 && num5 < num8) { 87 | console.log("True"); 88 | } else { 89 | console.log("False"); 90 | } 91 | 92 | // Condition 3 93 | 94 | if (num5 > num6 && num5 === num7) { 95 | console.log("True"); 96 | } else { 97 | console.log("False"); 98 | } 99 | 100 | // Condition 4 101 | 102 | if ((num5 + num6) < num8) { 103 | console.log("True"); 104 | } else { 105 | console.log("False"); 106 | } 107 | 108 | // Condition 5 109 | 110 | if ((num5 + num7) < num8) { 111 | console.log("True"); 112 | } else { 113 | console.log("False"); 114 | } 115 | 116 | // Condition 6 117 | 118 | if ((num5 + num6 + num7) < num8) { 119 | console.log("True"); 120 | } else { 121 | console.log("False"); 122 | } 123 | 124 | // Condition 7 125 | 126 | if (num8 - (num5 + num7) + num6 === 21) { 127 | console.log("True"); 128 | } else { 129 | console.log("False"); 130 | } -------------------------------------------------------------------------------- /[ 038 ] - [ 039 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 038 ] - [ 039 ]/main.js: -------------------------------------------------------------------------------- 1 | let day = " friday "; 2 | // You Need To Remove Spaces And Make First Letter Capital => Friday 3 | day = day.trim() 4 | day = day.charAt(0).toUpperCase() + day.slice(1); 5 | 6 | switch (day) { 7 | case "Friday": 8 | case "Saturday": 9 | case "Sunday": 10 | console.log("Sorry, No Appointments Available Today"); 11 | break; 12 | case "Monday": 13 | case "Thursday": 14 | console.log("Today's Appointments Are Available From 10:00 AM To 5:00 PM"); 15 | break; 16 | case "Tuesday": 17 | console.log("Today's Appointments Are Available From 10:00 AM To 6:00 PM"); 18 | break; 19 | case "Wednesday": 20 | console.log("Today's Appointments Are Available From 10:00 AM To 7:00 PM"); 21 | break; 22 | default: 23 | console.log("Its not a valid day") 24 | }; 25 | 26 | // let day = "Friday"; 27 | // let day = "Saturday"; 28 | // let day = "Sunday"; 29 | // // Output => "No Appointments Available" 30 | 31 | // let day = "Monday"; 32 | // let day = "Thursday"; 33 | // // Output => "From 10:00 AM To 5:00 PM" 34 | 35 | // let day = "Tuesday"; 36 | // // Output => "From 10:00 AM To 6:00 PM" 37 | 38 | // let day = "Wednesday"; 39 | // // Output => "From 10:00 AM To 7:00 PM" 40 | 41 | // let day = "World"; 42 | // // Output => "Its Not A Valid Day" -------------------------------------------------------------------------------- /[ 040 ] - [ 047 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 040 ] - [ 047 ]/main.js: -------------------------------------------------------------------------------- 1 | // Assignment 1 2 | 3 | let myFriends = ["Ahmed", "Elham", "Osama", "Gamal"]; 4 | let num = 3; 5 | 6 | // Method 1 7 | myFriends.pop() 8 | console.log(myFriends); // ["Ahmed", "Elham", "Osama"]; 9 | 10 | // Method 2 11 | console.log(myFriends.slice(false,num)); // ["Ahmed", "Elham", "Osama"]; 12 | 13 | // Method 3 14 | myFriends.length = num 15 | console.log(myFriends); // ["Ahmed", "Elham", "Osama"]; 16 | 17 | // Method 4 18 | console.log(myFriends.splice(false, num)); // ["Ahmed", "Elham", "Osama"]; 19 | 20 | 21 | // Assignment 2 22 | 23 | let friends = ["Ahmed", "Eman", "Osama", "Gamal"]; 24 | 25 | // Write Your Code Here 26 | friends.shift() 27 | friends.pop() 28 | 29 | console.log(friends); // ["Eman", "Osama"] 30 | 31 | 32 | // Assignment 3 33 | 34 | let arrOne = ["C", "D", "X"]; 35 | let arrTwo = ["A", "B", "Z"]; 36 | let finalArr = []; 37 | 38 | // Write One Single Line Of Code 39 | 40 | finalArr = arrTwo.concat(arrOne).sort().reverse(); 41 | 42 | console.log(finalArr); // ["Z", "X", "D", "C", "B", "A"]; 43 | 44 | 45 | // Assignment 4 46 | 47 | let website = "Go"; 48 | let words = [`${website}ogle`, "Facebook", ["Elzero", "Web", "School"]]; 49 | 50 | console.log(words[website.length][0].slice(website.length).toUpperCase()); // ZERO 51 | 52 | 53 | // Assignment 5 54 | 55 | let needle = "JS"; 56 | let haystack = ["PHP", "JS", "Python"]; 57 | 58 | // Write 3 Solutions 59 | if (haystack.includes(needle)) { 60 | console.log("Found") 61 | } 62 | if (haystack.indexOf(needle) !== -1) { 63 | console.log("Found") 64 | } 65 | if (haystack.lastIndexOf(needle) !== -1) { 66 | console.log("Found") 67 | } 68 | 69 | 70 | // Assignment 6 71 | let arr1 = ["A", "C", "X"]; 72 | let arr2 = ["D", "E", "F", "Y"]; 73 | let allArrs = []; 74 | 75 | // Your Code Here 76 | allArrs = (arr2[arr1.length - true] + arr1[arr1.length - true] + arr2[arr1.length]).toLowerCase() 77 | console.log(allArrs); // fxy -------------------------------------------------------------------------------- /[ 048 ] - [ 053 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 048 ] - [ 053 ]/main.js: -------------------------------------------------------------------------------- 1 | // Assignment 1 2 | 3 | let startOne = 10; 4 | let endOne = 100; 5 | let exclude = 40; 6 | 7 | for (i = startOne; i <= endOne; i += startOne){ 8 | if (i == exclude) { 9 | continue; 10 | } 11 | console.log(i); 12 | } 13 | 14 | /* Output 15 | 10 16 | 20 17 | 30 18 | 50 19 | 60 20 | 70 21 | 80 22 | 90 23 | 100 24 | */ 25 | 26 | 27 | // Assignment 2 28 | 29 | let startTwo = 10; 30 | let endTwo = 0; 31 | let stop = 3; 32 | 33 | for (j = startTwo; j > endTwo; j--){ 34 | if (j == stop) { 35 | break; 36 | } 37 | if (j < startTwo) { 38 | console.log(`0${j}`) 39 | } else { 40 | console.log(j) 41 | } 42 | } 43 | 44 | /* Output 45 | 10 46 | 09 47 | 08 48 | 07 49 | 06 50 | 05 51 | 04 52 | 03 53 | */ 54 | 55 | 56 | // Assignment 3 57 | 58 | let startThree = 1; 59 | let endThree = 6; 60 | let breaker = 2; 61 | 62 | for (k = startThree; k <= endThree; k++){ 63 | console.log(k); 64 | for (l = breaker; l < endThree; l += breaker){ 65 | console.log(`-- ${l}`) 66 | } 67 | } 68 | 69 | /* Output 70 | 1 71 | -- 2 72 | -- 4 73 | 2 74 | -- 2 75 | -- 4 76 | 3 77 | -- 2 78 | -- 4 79 | 4 80 | -- 2 81 | -- 4 82 | 5 83 | -- 2 84 | -- 4 85 | 6 86 | -- 2 87 | -- 4 88 | */ 89 | 90 | 91 | // Assignment 4 92 | 93 | let index = 10; 94 | let jump = 2; 95 | let end = 0; 96 | 97 | g = index 98 | for (; ;) { 99 | if (g === jump) break; 100 | console.log(g) 101 | g -= jump 102 | } 103 | 104 | // Output 105 | // 10 106 | // 8 107 | // 6 108 | // 4 109 | 110 | 111 | // Assignment 5 112 | 113 | let friends = ["Ahmed", "Sayed", "Eman", "Mahmoud", "Ameer", "Osama", "Sameh"]; 114 | let letter = "a"; 115 | counter = +true; 116 | 117 | for (m = +false; m < friends.length; m++){ 118 | if (friends[m].startsWith("A")) { 119 | continue; 120 | } 121 | console.log(`${counter} => ${friends[m]}`) 122 | counter++ 123 | } 124 | 125 | /* Output 126 | "1 => Sayed" 127 | "2 => Eman" 128 | "3 => Mahmoud" 129 | "4 => Osama" 130 | "5 => Sameh" 131 | */ 132 | 133 | 134 | // Assignment 6 135 | 136 | let startFour = 0; 137 | let swappedName = "elZerO"; 138 | // swappedName.split(""); 139 | newName = []; 140 | // console.log(swappedName) 141 | 142 | for (n = startFour; n < swappedName.length; n++){ 143 | if (swappedName[n] === swappedName[n].toLowerCase()) { 144 | newName += swappedName[n].toUpperCase() 145 | } else if(swappedName[n] === swappedName[n].toUpperCase()){ 146 | newName += swappedName[n].toLowerCase() 147 | } 148 | } 149 | console.log(newName); 150 | 151 | // Output 152 | // "ELzERo" 153 | 154 | 155 | // Assignment 7 156 | 157 | let start = 0; 158 | let mix = [1, 2, 3, "A", "B", "C", 4]; 159 | 160 | for (t = start; t < mix.length; t++){ 161 | if (typeof mix[t] === "string" || mix[t] === 1) continue; 162 | console.log(mix[t]); 163 | } 164 | 165 | /* Output 166 | 2 167 | 3 168 | 4 169 | */ -------------------------------------------------------------------------------- /[ 054 ] - [ 056 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 054 ] - [ 056 ]/main.js: -------------------------------------------------------------------------------- 1 | let friends = ["Ahmed", "Sayed", "Ali", 1, 2, "Mahmoud", "Amany"]; 2 | let index = 0; 3 | let counter = 0; 4 | 5 | while (index < friends.length) { 6 | if (typeof friends[index] !== "number" && !friends[index].startsWith("A")) { 7 | console.log(`${counter + true} => ${friends[index]}`) 8 | counter++ 9 | }; 10 | index++; 11 | } 12 | 13 | /* Output 14 | "1 => Sayed" 15 | "2 => Mahmoud" 16 | */ -------------------------------------------------------------------------------- /[ 057 ] - [ 063 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 057 ] - [ 063 ]/main.js: -------------------------------------------------------------------------------- 1 | // Assignment 1 2 | 3 | function sayHello(theName, theGender) { 4 | if (theGender == "Male") { 5 | return `Hello Mr ${theName}`; 6 | } else if (theGender == "Female") { 7 | return `Hello Miss ${theName}`; 8 | } else { 9 | return theName; 10 | } 11 | }; 12 | 13 | console.log(sayHello("Alaa", 'Male')) 14 | 15 | /* Needed Output 16 | sayHello("Osama", "Male"); // "Hello Mr Osama" 17 | sayHello("Eman", "Female"); // "Hello Miss Eman" 18 | sayHello("Sameh"); // "Hello Sameh" 19 | */ 20 | 21 | 22 | // Assignment 2 23 | 24 | // Way one 25 | function calculate(firstNum, secondNum, operation) { 26 | if (secondNum === undefined) { 27 | return `Second number not found` 28 | } 29 | if (operation === "add") { 30 | return firstNum + secondNum; 31 | } else if (operation === "subtract") { 32 | return firstNum - secondNum; 33 | } else if (operation === "multiply") { 34 | return firstNum * secondNum; 35 | } else { 36 | return firstNum + secondNum; 37 | } 38 | }; 39 | console.log(calculate(20,30)) 40 | 41 | // Way two 42 | function calculate(firstNum, secondNum, operation) { 43 | if (secondNum === undefined) { 44 | return `Second number not found` 45 | } 46 | switch (operation) { 47 | case "add": 48 | default: 49 | return firstNum + secondNum; 50 | case "subtract": 51 | return firstNum - secondNum; 52 | case "multiply": 53 | return firstNum * secondNum; 54 | } 55 | } 56 | console.log(calculate(20,30)) 57 | 58 | /* Needed Output 59 | calculate(20); // Second Number Not Found 60 | calculate(20, 30); // 50 61 | calculate(20, 30, 'add'); // 50 62 | calculate(20, 30, 'subtract'); // -10 63 | calculate(20, 30, 'multiply'); // 600 64 | */ 65 | 66 | 67 | // Assignment 3 68 | 69 | function ageInTime(theAge) { 70 | if (theAge < 10 || theAge > 100) { 71 | return `Age out of range` 72 | } else { 73 | return `Months => ${theAge * 12} 74 | Weeks => ${theAge * 48} 75 | Days => ${theAge * 336} 76 | Hours => ${theAge * 8064} 77 | Minutes => ${theAge * 483840} 78 | Seconds => ${theAge * 29030400}` 79 | } 80 | }; 81 | 82 | console.log(ageInTime(20)) 83 | /* Needed Output 84 | ageInTime(110); // Age Out Of Range 85 | ageInTime(38); // Months Example => 456 Months 86 | */ 87 | 88 | 89 | 90 | // Assignment 4 => Challenge (in challenges folder) 91 | 92 | 93 | // Assignment 5 94 | 95 | function createSelectBox(startYear, endYear) { 96 | document.write(``) 101 | } 102 | createSelectBox(2000, 2021); 103 | 104 | 105 | 106 | // Assignment 6 107 | 108 | function multiply(...nums) { 109 | for (j = 0; j < nums.length; j++){ 110 | if (typeof nums[j] === "number") { 111 | return parseInt(nums[j]) * parseInt(nums[j + 1]); 112 | } else continue; 113 | } 114 | }; 115 | 116 | console.log(multiply(100.5, 10, "B")) 117 | 118 | /* multiply(10, 20); // 200 119 | multiply("A", 10, 30); // 300 120 | multiply(100.5, 10, "B"); // 1000 121 | */ -------------------------------------------------------------------------------- /[ 064 ] - [ 070 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 064 ] - [ 070 ]/main.js: -------------------------------------------------------------------------------- 1 | // Assignment 1 2 | 3 | function getDetails(zName, zAge, zCountry) { 4 | function namePattern(zName) { 5 | // Write Your Code Here 6 | zName = zName.trim().split(" ") 7 | return `${zName[0]} ${zName[1][0].toUpperCase()}.`; 8 | // Alaa Abdelnaser => Alaa A. 9 | // Osama Mohamed => Osama M. 10 | } 11 | function ageWithMessage(zAge) { 12 | // Write Your Code Here 13 | return `Your age is ${parseInt(zAge)}`; 14 | // 20 Is The Age => Your Age Is 20 15 | // 38 Is My Age => Your Age Is 38 16 | } 17 | function countryTwoLetters(zCountry) { 18 | // Write Your Code Here 19 | return `${zCountry.slice(0, 2).toUpperCase()}`; 20 | // Egypt => You Live In EG 21 | // Syria => You Live In SY 22 | } 23 | function fullDetails() { 24 | // Write Your Code Here 25 | return `Hello ${namePattern(zName)}, ${ageWithMessage(zAge)}, You Live In ${countryTwoLetters(zCountry)}` 26 | } 27 | return fullDetails(); // Do Not Edit This 28 | } 29 | 30 | console.log(getDetails("Osama Mohamed", "38 Is My Age", "Egypt")); 31 | // Hello Osama M., Your Age Is 38, You Live In EG 32 | 33 | console.log(getDetails("Alaa Abdelnaser", "20 Is The Age", "palestine")); 34 | // Hello Alaa A., Your Age Is 20, You Live In PA 35 | 36 | 37 | 38 | // Assignment 2 39 | 40 | let itsMe = () => `Iam An Arrow Function`; 41 | console.log(itsMe()); // Iam A Normal Function 42 | 43 | let urlCreate = (protocol, web, tld) => `${protocol}://www.${web}.${tld}`; 44 | console.log(urlCreate("https", "elzero", "org")); // https://www.elzero.org 45 | 46 | 47 | // Assignment 3 48 | 49 | checker = (zName) => (status) => (salary) => 50 | status === "Available" 51 | ? `${zName}, My Salary Is ${salary}` 52 | : `Iam Not Avaialble`; 53 | 54 | console.log(checker("Alaa")("Available")(4000)); // Alaa, My Salary Is 4000 55 | console.log(checker("Ahmed")("Not Available")()); // Iam Not Avaialble 56 | 57 | 58 | // Assignment 4 59 | 60 | function specialMix(...data) { 61 | // Your Code Here 62 | let result = 0; 63 | for (let i = 0; i < data.length; i++) { 64 | if (parseInt(data[i])) result += parseInt(data[i]); 65 | } 66 | if (result === 0) return "All is strings"; 67 | return result 68 | } 69 | 70 | console.log(specialMix(10, 20, 30)); // 60 71 | console.log(specialMix("10Test", "Testing", "20Cool")); // 30 72 | console.log(specialMix("Testing", "10Testing", "40Cool")); // 50 73 | console.log(specialMix("Test", "Cool", "Test")); // All Is Strings -------------------------------------------------------------------------------- /[ 071 ] - [ 078 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 071 ] - [ 078 ]/main.js: -------------------------------------------------------------------------------- 1 | // Assignment 1 2 | 3 | let mix = [1, 2, 3, "E", 4, "l", "z", "e", "r", 5, "o"]; 4 | 5 | let newMix = mix 6 | .map((ele) => Number(ele) ? "" : ele) 7 | .reduce((acc, current) => acc + current ); 8 | 9 | console.log(newMix); // Elzero 10 | 11 | 12 | // Assignment 2 13 | 14 | let myString = "EElllzzzzzzzeroo"; 15 | 16 | let newString = myString 17 | .split("") 18 | .filter((item, pos, arr) => arr.indexOf(item) == pos) 19 | .join(""); 20 | 21 | console.log(newString); // Elzero 22 | 23 | 24 | // Assignment 3 25 | 26 | let myArray = ["E", "l", "z", ["e", "r"], "o"]; 27 | 28 | let newArr = myArray 29 | .reduce((acc, current) => acc.concat(current), []) 30 | .join(''); 31 | console.log(newArr); // Elzero 32 | 33 | 34 | // Assignment 4 35 | 36 | let numsAndStrings = [1, 10, -10, -20, 5, "A", 3, "B", "C"]; 37 | 38 | let newNumsAndStrings = numsAndStrings.filter((ele) => { 39 | return Number(parseInt(ele)) 40 | }).map((ele) => { 41 | return -ele; 42 | }); 43 | 44 | console.log(newNumsAndStrings); // [-1, -10, 10, 20, -5, -3] 45 | 46 | 47 | // Assignment 5 48 | 49 | let nums = [2, 12, 11, 5, 10, 1, 99]; 50 | 51 | let newNums = nums.reduce((acc, current) => { 52 | if (current % 2 === 0) { 53 | return acc * current; 54 | } else { 55 | return acc + current; 56 | } 57 | }, 1); 58 | 59 | console.log(newNums) // 500 -------------------------------------------------------------------------------- /[ 079 ] - [ 085 ]/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 079 ] - [ 085 ]/main.js: -------------------------------------------------------------------------------- 1 | // Assignment 1 2 | 3 | // Create Your Object Here 4 | let member = { 5 | name: "Elzero", 6 | age: 38, 7 | country: "Egypt", 8 | fullDetails: () => { 9 | return `My Name Is ${member.name}, My Age Is ${member.age}, I Live in ${member.country}` 10 | }, 11 | }; 12 | 13 | console.log(member.name); // Elzero 14 | console.log(member.age); // 38 15 | console.log(member.country); // Egypt 16 | console.log(member.fullDetails()); 17 | // My Name Is Elzero, My Age Is 38, I Live in Egypt 18 | 19 | 20 | 21 | // Assignment 2 22 | 23 | // Method One 24 | // Create Your Object Here 25 | let objMethodOne = { 26 | property: "Method One" 27 | }; 28 | 29 | console.log(objMethodOne.property); // "Method One" 30 | 31 | // Method Two 32 | // Create Your Object Here 33 | let objMethodTwo = new Object({ 34 | property: "Method Two" 35 | }); 36 | 37 | console.log(objMethodTwo.property); // "Method Two" 38 | 39 | // Method Three 40 | // Create Your Object Here 41 | let objMethodThree = Object.create({ 42 | property: "Method Three" 43 | }); 44 | 45 | console.log(objMethodThree.property); // "Method Three" 46 | 47 | // Method Four 48 | // Create Your Object Here 49 | let objMethodFour = Object.assign({ 50 | property: "Method Four" 51 | }); 52 | 53 | console.log(objMethodFour.property); // "Method Four" 54 | 55 | 56 | // Assignment 3 57 | 58 | let a = 1; 59 | 60 | let threeNums = { 61 | b: 2, 62 | c: 3, 63 | d: 4, 64 | }; 65 | 66 | let twoNums = { 67 | e: 5, 68 | f: 6, 69 | }; 70 | 71 | // Create Your Object Here in One Line 72 | let finalObject = Object.assign({ a }, threeNums, twoNums); 73 | console.log(finalObject); 74 | 75 | /* 76 | a: 1 77 | b: 2 78 | c: 3 79 | d: 4 80 | e: 5 81 | f: 6 82 | */ 83 | 84 | 85 | // Assignment 4 86 | 87 | // The Object To Work With 88 | let myFavGames = { 89 | "Trinity Universe": { 90 | publisher: "NIS America", 91 | price: 40, 92 | }, 93 | "Titan Quest": { 94 | publisher: "THQ", 95 | bestThree: { 96 | one: "Immortal Throne", 97 | two: "Ragnarök", 98 | three: "Atlantis", 99 | }, 100 | price: 50, 101 | }, 102 | YS: { 103 | publisher: "Falcom", 104 | bestThree: { 105 | one: "Oath in Felghana", 106 | two: "Ark Of Napishtim", 107 | three: "origin", 108 | }, 109 | price: 40, 110 | }, 111 | }; 112 | 113 | // Code One => How To Get Object Length ? 114 | let objectLength = Object.keys(myFavGames).length; 115 | 116 | console.log(objectLength); 117 | 118 | let game = Object.keys(myFavGames); 119 | 120 | for (let i = 0; i < objectLength; i++) { 121 | console.log(`The Game Name Is ${game[i]}`); 122 | console.log(`The Publisher Is ${myFavGames[game[i]].publisher}`); 123 | console.log(`The Price Is ${myFavGames[game[i]].price}`); 124 | 125 | // Check If Nested Object Has Property (bestThree) 126 | if (myFavGames[game[i]].hasOwnProperty('bestThree')) { 127 | console.log("- Game Has Releases"); 128 | console.log(`First => ${myFavGames[game[i]].bestThree.one}`); 129 | console.log(`Second => ${myFavGames[game[i]].bestThree.two}`); 130 | console.log(`Third => ${myFavGames[game[i]].bestThree.three}`); 131 | } 132 | console.log("=".repeat(20)); 133 | } 134 | 135 | // Ouput 136 | /* 137 | "The Game Name Is Trinity Universe" 138 | "The Publisher Is NIS America" 139 | "The Price Is 40" 140 | "####################" 141 | "The Game Name Is Titan Quest" 142 | "The Publisher Is THQ" 143 | "The Price Is 50" 144 | "- Game Has Releases" 145 | "First => Immortal Throne" 146 | "Second => Ragnarök" 147 | "Third => Atlantis" 148 | "####################" 149 | "The Game Name Is YS" 150 | "The Publisher Is Falcom" 151 | "The Price Is 40" 152 | "- Game Has Releases" 153 | "First => Oath in Felghana" 154 | "Second => Ark Of Napishtim" 155 | "Third => origin" 156 | "####################" 157 | */ -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 |
    JavaScript
    10 | 11 | 12 | -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 1/main.js: -------------------------------------------------------------------------------- 1 | document.getElementById("elzero"); 2 | document.getElementsByClassName("element")[0]; 3 | document.getElementsByTagName("div")[0]; 4 | document.querySelector("#elzero"); 5 | document.querySelector(".element"); 6 | document.querySelector("div[name='js']"); 7 | document.querySelector("div")[0]; 8 | document.querySelectorAll(".element")[0]; 9 | document.querySelectorAll("#elzero")[0]; 10 | document.querySelectorAll("div[name='js']"); 11 | document.querySelectorAll("div")[0]; 12 | document.body.firstElementChild; 13 | document.body.children[0]; 14 | document.body.childNodes[1]; -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 |
    10 | 11 |
    12 |
    13 | 14 |
    15 |
    16 | 17 |
    18 |
    19 | 20 |
    21 |
    22 | 23 |
    24 |
    25 | 26 |
    27 |
    28 | 29 |
    30 |
    31 | 32 |
    33 |
    34 | 35 |
    36 |
    37 | 38 |
    39 | 40 | 41 | -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 2/main.js: -------------------------------------------------------------------------------- 1 | for (i = 0; i < document.images.length; i++){ 2 | let myImgs = document.images[i]; 3 | myImgs.setAttribute("src","https://elzero.org/wp-content/themes/elzero/imgs/logo.png") 4 | myImgs.setAttribute("alt", "Elzero Logo"); 5 | document.images[i].style.backgroundColor='#0075ff' 6 | }; -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 |
    11 | 12 |
    { 0 } USD Dollar
    =
    { 0 } EGP Pound
    13 |
    14 | 15 | 16 | -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 3/main.js: -------------------------------------------------------------------------------- 1 | let myInput = document.querySelector("form input"); 2 | let myResult = document.getElementsByClassName("result")[0]; 3 | 4 | myInput.oninput = () => { 5 | let inValue = myInput.value; 6 | let poundResult = (inValue * 15.6).toFixed(2); 7 | myResult.innerHTML = `{ ${inValue} } USD Dollar
    =
    { ${poundResult} } EGP Pound` 8 | }; -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 3/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | text-align: center; 6 | color: #111; 7 | font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 8 | } 9 | form{ 10 | background-color: #f8f8f8; 11 | padding: 5rem; 12 | width: 50%; 13 | border-radius: .2rem; 14 | border: 2px solid #e3e3e3; 15 | transition: .2s; 16 | } 17 | form:hover { 18 | border: 2px solid #6e6e6e; 19 | } 20 | form input{ 21 | padding: .3rem; 22 | margin-bottom: 1rem; 23 | border-radius: .2rem; 24 | border: 2px solid #e3e3e3; 25 | transition: .2s; 26 | } 27 | form input:focus{ 28 | border: 2px solid #6e6e6e; 29 | outline: none; 30 | } 31 | span{ 32 | color: #0088f1; 33 | } -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 |
    10 |
    Two
    11 |
    One
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 4/main.js: -------------------------------------------------------------------------------- 1 | let titleOne = document.querySelector(".one").textContent; 2 | let titleTwo = document.querySelector(".two").textContent; 3 | 4 | document.querySelector(".one").setAttribute("title", titleTwo.toLowerCase()) 5 | document.querySelector(".two").setAttribute("title", titleOne.toLowerCase()) 6 | 7 | document.querySelector(".one").textContent = titleTwo; 8 | document.querySelector(".two").textContent = `${ titleOne } ${document.getElementById("main").children.length}`; -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | One 10 | 11 | Three 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 5/main.js: -------------------------------------------------------------------------------- 1 | for (i = 0; i < document.images.length; i++){ 2 | (document.images[i].hasAttribute("alt")) 3 | ? document.images[i].alt = "Old" 4 | : document.images[i].alt = "Elzero New" 5 | } -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn JavaScript 8 | 9 | 10 |

    DOM div Generator

    11 |
    12 |
    13 | 14 | 15 | 19 | 20 |
    21 |
    22 |
    23 | 24 | 25 | -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 6/main.js: -------------------------------------------------------------------------------- 1 | let number = document.querySelector("[type='number']"); 2 | let boxText = document.querySelector("[type='text']"); 3 | let boxType = document.querySelector("[name='type']"); 4 | let result = document.querySelector(".results"); 5 | 6 | document.forms[0].onsubmit = (e) => { 7 | e.preventDefault(); 8 | document.querySelectorAll(".box").forEach(el => el.remove()) 9 | if (number.value !== "" && boxText.value !== "") { 10 | for (i = 1; i <= number.value; i++){ 11 | myElement = document.createElement(boxType.value); 12 | myText = document.createTextNode(boxText.value); 13 | 14 | // Adding attributes to box element 15 | myElement.className = "box"; 16 | myElement.setAttribute("title", "Element"); 17 | myElement.setAttribute("id", `id-${i}`); 18 | 19 | // Adding styles to box element 20 | myElement.style.padding = "10px"; 21 | myElement.style.color = "white"; 22 | myElement.style.backgroundColor = "#9b1bad"; 23 | myElement.style.minWidth = "200px" 24 | myElement.style.maxWidth = "1fr" 25 | myElement.style.flexGrow = "1"; 26 | myElement.style.borderRadius = "5px"; 27 | myElement.style.textAlign = "center"; 28 | 29 | // Adding element to document 30 | myElement.appendChild(myText); 31 | result.appendChild(myElement); 32 | } 33 | } else { 34 | window.alert("fill all fields, please") 35 | } 36 | } -------------------------------------------------------------------------------- /[ 086 ] - [ 093 ]/Assignment 6/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | text-align: center; 3 | font-family: 'Segoe UI', Tahoma, sans-serif; 4 | max-width: 910px; 5 | margin: .1rem auto; 6 | } 7 | .st{ 8 | border: 2px solid #eee; 9 | width: fit-content; 10 | padding: 10px; 11 | border-radius: 5px; 12 | margin: .1rem auto 1.5rem; 13 | } 14 | form input, form select{ 15 | display: flex; 16 | flex-direction: column; 17 | width: 250px; 18 | border-radius: 5px; 19 | padding: 10px; 20 | margin: .7rem auto; 21 | border: 2px solid #e3e3e3; 22 | } 23 | form select{ 24 | width: 273px; 25 | } 26 | :focus{ 27 | border: 2px solid #0065f8; 28 | outline: none; 29 | } 30 | form input:last-of-type{ 31 | background-color: #0065f8; 32 | color: white; 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | cursor: pointer; 37 | transition: .2s; 38 | margin-top: 2.5rem; 39 | } 40 | form input:last-of-type:hover{ 41 | transform: scale(1.05); 42 | } 43 | .results{ 44 | display: flex; 45 | flex-wrap: wrap; 46 | gap: 10px; 47 | } -------------------------------------------------------------------------------- /[ 094 ] - [ 101 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learn JavaScript 6 | 19 | 20 | 21 | Google 22 | Elzero 23 | Facebook 24 | Elzero 25 | 26 | 27 | -------------------------------------------------------------------------------- /[ 094 ] - [ 101 ]/Assignment 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn JavaScript 8 | 9 | 10 | 11 |
    12 | 13 | 14 |
    Current Element
    15 |
    16 |
    Current Element Class Lists
    17 |
    18 |
    19 |
    20 | 21 | 22 | -------------------------------------------------------------------------------- /[ 094 ] - [ 101 ]/Assignment 2/main.js: -------------------------------------------------------------------------------- 1 | let classAdd = document.querySelector(".classes-to-add"); 2 | let classRemove = document.querySelector(".classes-to-remove"); 3 | let currentEle = document.querySelector('[title="Current"]'); 4 | let classesDiv = document.querySelector(".classes-list div"); 5 | 6 | /* 7 | // Way 1 8 | classAdd.onblur = function () { 9 | let addValue = classAdd.value.toLowerCase(); 10 | if (addValue !== "") { 11 | addValue.split(" ").map(ele => { 12 | let newEle = document.createElement("span"); 13 | newEle.className = ele; 14 | newEle.textContent = ele; 15 | currentEle.classList.add(ele); 16 | classesDiv.appendChild(newEle); 17 | }); 18 | }; 19 | this.value = ""; 20 | }; 21 | 22 | classRemove.onblur = function () { 23 | let removeValue = classRemove.value.toLowerCase(); 24 | if (removeValue !== "") { 25 | document.querySelectorAll("span").forEach(el => { 26 | removeValue.split(" ").map(ele => { 27 | if (el.className === ele) { 28 | el.remove(); 29 | currentEle.classList.remove(ele); 30 | }; 31 | }); 32 | }); 33 | }; 34 | this.value = ""; 35 | }; 36 | */ 37 | 38 | 39 | 40 | // Way 2 41 | function addOrRemove() { 42 | document.querySelectorAll("span").forEach(ele => ele.remove()); 43 | for (let i = 0; i < this.value.trim().split(" ").length; i++){ 44 | if (classAdd.value) { 45 | currentEle.classList.add(classAdd.value.toLowerCase().trim().split(" ")[i]) 46 | } 47 | if (classRemove.value) { 48 | currentEle.classList.remove(classRemove.value.toLowerCase().trim().split(" ")[i]) 49 | } 50 | this.value = ""; 51 | 52 | if (currentEle.classList.length) { 53 | [...currentEle.classList].sort().forEach(ele => { 54 | let spans = document.createElement("span"); 55 | spans.textContent = ele; 56 | classesDiv.appendChild(spans); 57 | }); 58 | } else { 59 | classesDiv.textContent = "No classes to show"; 60 | } 61 | } 62 | } 63 | 64 | classAdd.onblur = addOrRemove; 65 | classRemove.onblur = addOrRemove; -------------------------------------------------------------------------------- /[ 094 ] - [ 101 ]/Assignment 2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | .assign { 5 | text-align: center; 6 | padding-top: 20px; 7 | } 8 | .assign input { 9 | padding: 10px; 10 | width: 300px; 11 | border: 1px solid #ddd; 12 | } 13 | .assign input:focus { 14 | outline: none; 15 | border-color: #ccc; 16 | } 17 | .assign [title="Current"] { 18 | padding: 20px; 19 | margin: 10px auto; 20 | width: 610px; 21 | background-color: #f1f0f0; 22 | } 23 | .assign .classes-list { 24 | padding: 20px; 25 | margin: 10px auto; 26 | width: 610px; 27 | background-color: #f1f0f0; 28 | } 29 | .assign .classes-list h5 { 30 | margin: 0 0 10px; 31 | text-align: left; 32 | } 33 | .assign .classes-list div span { 34 | background-color: #ff5722; 35 | padding: 6px 10px 8px; 36 | margin-right: 5px; 37 | border-radius: 6px; 38 | color: white; 39 | display: inline-flex; 40 | } -------------------------------------------------------------------------------- /[ 094 ] - [ 101 ]/Assignment 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 |
    Our Element
    10 |

    Paragraph

    11 | 12 | 13 | -------------------------------------------------------------------------------- /[ 094 ] - [ 101 ]/Assignment 3/main.js: -------------------------------------------------------------------------------- 1 | // Deleting paragraph 2 | let del = document.getElementsByTagName("p")[0]; 3 | del.remove(); 4 | 5 | // Adding div before .our-element 6 | let ourElement = document.getElementsByClassName("our-element")[0]; 7 | let divBefore = document.createElement("div"); 8 | divBefore.className = "start"; 9 | divBefore.setAttribute("title", "Start Element"); 10 | divBefore.setAttribute("data-value", "Start"); 11 | divBefore.textContent = "Start"; 12 | ourElement.before(divBefore) 13 | 14 | // Adding div after .our-element 15 | let divAfter = document.createElement("div") 16 | divAfter.className = "end"; 17 | divAfter.setAttribute("title", "End Element"); 18 | divAfter.setAttribute("data-value", "End"); 19 | divAfter.textContent = "End"; 20 | ourElement.after(divAfter) -------------------------------------------------------------------------------- /[ 094 ] - [ 101 ]/Assignment 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 |
    10 | Hello 11 | 12 | Elzero 13 |
    14 | 15 | 16 | -------------------------------------------------------------------------------- /[ 094 ] - [ 101 ]/Assignment 4/main.js: -------------------------------------------------------------------------------- 1 | let myDiv = document.getElementsByTagName("div")[0]; 2 | 3 | console.log(myDiv.lastChild.textContent.trim()); -------------------------------------------------------------------------------- /[ 094 ] - [ 101 ]/Assignment 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 |
    Element
    10 | Element 11 |

    Element

    12 |
    Element
    13 |
    Element
    14 | 15 | 16 | -------------------------------------------------------------------------------- /[ 094 ] - [ 101 ]/Assignment 5/main.js: -------------------------------------------------------------------------------- 1 | document.body.onclick = (e) => { 2 | console.log(`This is ${e.target.tagName.toLowerCase()}`) 3 | } -------------------------------------------------------------------------------- /[ 102 ] - [ 110 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 102 ] - [ 110 ]/Assignment 1/main.js: -------------------------------------------------------------------------------- 1 | let promptNum = prompt("Print Number From - T0 ", "Example: 5-20"); 2 | let nums = promptNum.split('-').sort((a, b) => a - b); 3 | 4 | 5 | for (let i = Number(nums[0]); i <= Number(nums[1]); i++){ 6 | let container = document.createElement("div"); 7 | container.textContent = i; 8 | document.body.append(container); 9 | }; 10 | -------------------------------------------------------------------------------- /[ 102 ] - [ 110 ]/Assignment 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn JavaScript 8 | 9 | 10 | 11 |
    12 |

    Welcome

    13 |

    Welcome to Elzero web school

    14 | 15 |
    16 | 17 | 18 | -------------------------------------------------------------------------------- /[ 102 ] - [ 110 ]/Assignment 2/main.js: -------------------------------------------------------------------------------- 1 | let popUp = document.getElementById("pop") 2 | let btn = document.getElementById("close"); 3 | 4 | setTimeout(function (){ 5 | popUp.style.display = "block" 6 | }, 5000); 7 | 8 | btn.onclick = function () { 9 | btn.parentElement.style.display = "none" 10 | }; -------------------------------------------------------------------------------- /[ 102 ] - [ 110 ]/Assignment 2/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 95vh; 6 | } 7 | #pop{ 8 | position: relative; 9 | width: 500px; 10 | height: 110px; 11 | text-align: center; 12 | border: 2px solid black; 13 | border-radius: 5px; 14 | box-shadow: 0 0 0 50vmax rgb(200, 200, 200); 15 | font-family: Tahoma; 16 | color: #111; 17 | display: none; 18 | } 19 | #pop #close{ 20 | position: absolute; 21 | background-color: rgb(49, 145, 214); 22 | color: white; 23 | border: none; 24 | font-weight: bold; 25 | padding: 6px 10px; 26 | border-radius: 50%; 27 | top: -12px; 28 | right: -15px; 29 | cursor: pointer; 30 | } -------------------------------------------------------------------------------- /[ 102 ] - [ 110 ]/Assignment 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 |
    10
    10 | 11 | 12 | -------------------------------------------------------------------------------- /[ 102 ] - [ 110 ]/Assignment 3/main.js: -------------------------------------------------------------------------------- 1 | let myDiv = document.querySelector("div"); 2 | 3 | function countDown() { 4 | myDiv.textContent -= 1; 5 | 6 | if (myDiv.textContent == "0") { 7 | clearInterval(counter); 8 | }; 9 | 10 | }; 11 | 12 | let counter = setInterval(countDown, 500) -------------------------------------------------------------------------------- /[ 102 ] - [ 110 ]/Assignment 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 |
    10
    10 | 11 | 12 | -------------------------------------------------------------------------------- /[ 102 ] - [ 110 ]/Assignment 4/main.js: -------------------------------------------------------------------------------- 1 | let myDiv = document.querySelector("div"); 2 | 3 | function countDown() { 4 | myDiv.textContent -= 1; 5 | 6 | if (myDiv.textContent == "0") { 7 | location.assign("https://elzero.org/") 8 | }; 9 | 10 | }; 11 | 12 | setInterval(countDown, 500); -------------------------------------------------------------------------------- /[ 102 ] - [ 110 ]/Assignment 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 |
    10
    10 | 11 | 12 | -------------------------------------------------------------------------------- /[ 102 ] - [ 110 ]/Assignment 5/main.js: -------------------------------------------------------------------------------- 1 | let myDiv = document.querySelector("div"); 2 | 3 | function countDown() { 4 | myDiv.textContent -= 1; 5 | 6 | if (myDiv.textContent == "5") { 7 | window.open("https://Elzero.org", "_blank", "width=500,height=450,left=200",true) 8 | }; 9 | 10 | if (myDiv.textContent == "0") { 11 | clearInterval(counter); 12 | }; 13 | 14 | }; 15 | 16 | let counter = setInterval(countDown, 500); -------------------------------------------------------------------------------- /[ 111 ] - [ 114 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn JavaScript 8 | 9 | 10 |
    11 | 16 | 24 | 34 |
    35 |
    This is default text, when you choose values from select boxes above it will change for you, and be saved all Time, untill you change it again.
    36 | 37 | 38 | -------------------------------------------------------------------------------- /[ 111 ] - [ 114 ]/Assignment 1/main.js: -------------------------------------------------------------------------------- 1 | let font = document.getElementById("font"); 2 | let color = document.getElementById("color"); 3 | let size = document.getElementById("size"); 4 | let text = document.querySelector(".text"); 5 | 6 | window.onload = () => { 7 | if (localStorage.getItem("fontFamily")) { 8 | text.style.fontFamily = localStorage.getItem("fontFamily"); 9 | font.value = localStorage.getItem("fontFamily"); 10 | } 11 | if (localStorage.getItem("color")) { 12 | text.style.color = localStorage.getItem("color"); 13 | color.value = localStorage.getItem("color"); 14 | } 15 | if (localStorage.getItem("fontSize")) { 16 | text.style.fontSize = localStorage.getItem("fontSize"); 17 | size.value = localStorage.getItem("fontSize"); 18 | } 19 | } 20 | 21 | font.onchange = function () { 22 | text.style.fontFamily = font.value; 23 | localStorage.setItem("fontFamily", font.value); 24 | } 25 | color.onchange = function () { 26 | text.style.color = color.value; 27 | localStorage.setItem("color", color.value); 28 | } 29 | size.onchange = function () { 30 | text.style.fontSize = size.value; 31 | localStorage.setItem("fontSize", size.value); 32 | } -------------------------------------------------------------------------------- /[ 111 ] - [ 114 ]/Assignment 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn JavaScript 8 | 39 | 40 | 41 |
    42 | 43 | 44 | 45 | 52 | 53 |
    54 | 55 | 56 | -------------------------------------------------------------------------------- /[ 111 ] - [ 114 ]/Assignment 2/main.js: -------------------------------------------------------------------------------- 1 | let zName = document.querySelector("[type='text']"); 2 | let age = document.querySelector("[type='number']"); 3 | let email = document.querySelector("[type='email']"); 4 | let jobTitle = document.getElementsByTagName("select")[0]; 5 | let submit = document.querySelector("[type='submit']"); 6 | 7 | window.onload = () => { 8 | if (window.sessionStorage.getItem("userName")) { 9 | zName.value = window.sessionStorage.getItem("userName") 10 | } 11 | if (window.sessionStorage.getItem("age")) { 12 | age.value = window.sessionStorage.getItem("age") 13 | } 14 | if (window.sessionStorage.getItem("email")) { 15 | email.value = window.sessionStorage.getItem("email") 16 | } 17 | if (window.sessionStorage.getItem("jobTitle")) { 18 | jobTitle.value = window.sessionStorage.getItem("jobTitle") 19 | } 20 | } 21 | 22 | 23 | zName.oninput = () => window.sessionStorage.setItem("userName", zName.value) 24 | age.oninput = () => window.sessionStorage.setItem("age", age.value) 25 | email.oninput = () => window.sessionStorage.setItem("email", email.value) 26 | jobTitle.oninput = () => window.sessionStorage.setItem("jobTitle", jobTitle.value) 27 | submit.onclick = () => window.sessionStorage.clear(); -------------------------------------------------------------------------------- /[ 111 ] - [ 114 ]/Local storage - practise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn JavaScript 8 | 54 | 55 | 56 | 62 |
    63 | 64 | 65 | -------------------------------------------------------------------------------- /[ 111 ] - [ 114 ]/Local storage - practise/main.js: -------------------------------------------------------------------------------- 1 | let myList = document.querySelectorAll("ul li"); 2 | let finalColor = document.querySelector(".experiment") 3 | 4 | if (window.localStorage.getItem("color")) { 5 | finalColor.style.backgroundColor = window.localStorage.getItem("color"); 6 | myList.forEach(li => { 7 | li.classList.remove("active"); 8 | }); 9 | document.querySelector(`[data-color='${window.localStorage.getItem("color")}']`).classList.add("active"); 10 | }; 11 | 12 | 13 | myList.forEach(li => { 14 | li.addEventListener("click", el => { 15 | myList.forEach(li => { 16 | li.classList.remove("active"); 17 | }); 18 | el.currentTarget.classList.add("active"); 19 | window.localStorage.setItem("color", el.currentTarget.dataset.color); 20 | 21 | finalColor.style.backgroundColor = window.localStorage.getItem("color"); 22 | }); 23 | }); -------------------------------------------------------------------------------- /[ 115 ] - [ 122 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 115 ] - [ 122 ]/Assignment 1/main.js: -------------------------------------------------------------------------------- 1 | let myNumbers = [1, 2, 3, 4, 5]; 2 | 3 | // Write Your Destructuring Assignment Here 4 | let [a, , , , e] = myNumbers; 5 | 6 | console.log(a * e); // 5 -------------------------------------------------------------------------------- /[ 115 ] - [ 122 ]/Assignment 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn JavaScript 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /[ 115 ] - [ 122 ]/Assignment 2/main.js: -------------------------------------------------------------------------------- 1 | let mySkills = ["HTML", "CSS", "JavaScript", ["PHP", "Python", ["Django", "Laravel"]]]; 2 | 3 | // Write Your Destructuring Assignment Here 4 | let [a, b, c, [d, e, [f, g]]] = mySkills; 5 | 6 | console.log(`My Skills: ${a}, ${b}, ${c}, ${d}, ${e}, ${f}, ${g}`); 7 | 8 | // My Skills: HTML, CSS, JavaScript, PHP, Python, Django, Laravel -------------------------------------------------------------------------------- /[ 115 ] - [ 122 ]/Assignment 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 115 ] - [ 122 ]/Assignment 3/main.js: -------------------------------------------------------------------------------- 1 | let arr1 = ["Ahmed", "Sameh", "Sayed"]; 2 | let arr2 = ["Mohamed", "Gamal", "Amir"]; 3 | let arr3 = ["Haytham", "Shady", "Mahmoud"]; 4 | 5 | // Play With Arrays To Prepare For Destructuring 6 | // Write Your Destructuring Assignment Here 7 | let [x, y, c] = arr1; 8 | [x, y, c] = [c, y, x]; 9 | let [, a, b] = arr3; 10 | 11 | console.log(`My Best Friends: ${a}, ${b}, ${c}`); 12 | 13 | // My Best Friends: Shady, Mahmoud, Ahmed -------------------------------------------------------------------------------- /[ 115 ] - [ 122 ]/Assignment 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 115 ] - [ 122 ]/Assignment 4/main.js: -------------------------------------------------------------------------------- 1 | const member = { 2 | age: 30, 3 | working: false, 4 | country: "Egypt", 5 | hobbies: ["Reading", "Swimming", "Programming"], 6 | }; 7 | 8 | // Write Your Destructuring Assignment Here 9 | const { 10 | age: a, 11 | working: w, 12 | country: c, 13 | hobbies: [h1, , h3] 14 | } = member; 15 | 16 | console.log(`My Age Is ${a} And Iam ${w ? "" : "Not"} Working`); 17 | // My Age Is 30 And Iam Not Working 18 | 19 | console.log(`I Live in ${c}`); 20 | // I Live in Egypt 21 | 22 | console.log(`My Hobbies: ${h1} And ${h3}`); 23 | // My Hobbies: Reading And Programming -------------------------------------------------------------------------------- /[ 115 ] - [ 122 ]/Assignment 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 115 ] - [ 122 ]/Assignment 5/main.js: -------------------------------------------------------------------------------- 1 | const game = { 2 | title: "YS", 3 | developer: "Falcom", 4 | releases: { 5 | "Oath In Felghana": ["USA", "Japan"], 6 | "Ark Of Napishtim": { 7 | US: "20 USD", 8 | JAP: "10 USD", 9 | }, 10 | Origin: "30 USD", 11 | }, 12 | }; 13 | 14 | // Write Your Destructuring Assignment/s Here 15 | const { 16 | title: t, 17 | developer: d 18 | } = game; 19 | 20 | const [o, a] = Object.keys(game.releases); 21 | const [[u, j],{ US: u_price, JAP: j_price }, or] = Object.values(game.releases); 22 | 23 | console.log(`My Favourite Games Style Is ${t} Style`); 24 | // My Favourite Games Style Is YS Style 25 | 26 | console.log(`And I Love ${d} Games`); 27 | // And I Love Falcom Games 28 | 29 | console.log(`My Best Release Is ${o} It Released in ${u} & ${j}`); 30 | // My Best Release Is Oath In Felghana It Released in USA & Japan 31 | 32 | console.log(`Although I Love ${a}`); 33 | // Although I Love Ark Of Napishtim 34 | 35 | console.log(`${a} Price in USA Is ${u_price}`); 36 | // Ark Of Napishtim Price in USA Is 20 USD 37 | 38 | console.log(`${a} Price in Japan Is ${j_price}`); 39 | // Ark Of Napishtim Price in Japan Is 10 USD 40 | 41 | console.log(`Origin Price Is ${or}`); 42 | // Origin Price Is 30 USD -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 1/main.js: -------------------------------------------------------------------------------- 1 | // Adding items 2 | let setOfNumbers = new Set([10]); 3 | setOfNumbers.add(20).add(setOfNumbers.size) 4 | 5 | console.log(setOfNumbers) 6 | 7 | 8 | // Print last element (Way 1) 9 | let [, , last] = setOfNumbers; 10 | console.log(last); 11 | 12 | // Print last element (Way 2) 13 | console.log(Array.from(setOfNumbers).pop()); 14 | 15 | // Print last element (Way 3) 16 | console.log([...setOfNumbers][2]); 17 | 18 | // Print last element (Way 4) 19 | console.log([...setOfNumbers].length - 1); 20 | 21 | // Print last element (Way 5) 22 | console.log(setOfNumbers.size - 1); -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn JavaScript 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 2/main.js: -------------------------------------------------------------------------------- 1 | let myFriends = ["Osama", "Ahmed", "Sayed", "Sayed", "Mahmoud", "Osama"]; 2 | 3 | console.log([...new Set(myFriends)].sort()); 4 | 5 | // Needed Output 6 | // (4) ['Ahmed', 'Mahmoud', 'Osama', 'Sayed'] -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 3/main.js: -------------------------------------------------------------------------------- 1 | let myInfo = { 2 | username: "Osama", 3 | role: "Admin", 4 | country: "Egypt", 5 | }; 6 | 7 | let myMap = new Map(Object.entries(myInfo)); 8 | console.log(myMap); 9 | console.log(myMap.size); 10 | console.log(myMap.has("role")); 11 | 12 | // Needed Output 13 | // Map(3) {'username' => 'Osama', 'role' => 'Admin', 'country' => 'Egypt'} 14 | // 3 15 | // true -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 4/main.js: -------------------------------------------------------------------------------- 1 | let theNumber = 100020003000; 2 | 3 | // Way one 4 | console.log(Number([...new Set(theNumber.toString().split("0"))].join(""))) 5 | 6 | // Way Two 7 | console.log(+Array.from(new Set([...theNumber.toString()])).sort().join("")) 8 | 9 | // Needed Output => 123 -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 5/main.js: -------------------------------------------------------------------------------- 1 | let theName = "Elzero"; 2 | 3 | // Way 1 4 | console.log(Array.from(theName)); 5 | 6 | // Way 2 7 | console.log([...theName]); 8 | 9 | // Way 3 10 | console.log(theName.split("")); 11 | 12 | // Way 4 13 | console.log([...new Set(theName)]); 14 | 15 | // Way 5 16 | console.log(Array.prototype.slice.call(theName)); 17 | 18 | // Way 6 19 | console.log(Object.assign([], theName)); 20 | 21 | // Way 7 22 | console.log(Object.values(theName)); 23 | 24 | // Needed Output => ['E', 'l', 'z', 'e', 'r', 'o'] -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 6/main.js: -------------------------------------------------------------------------------- 1 | let chars = ["A", "B", "C", "D", "E", 10, 15, 6]; // => ['A', 'B', 'C', 'A', 'B', 'C', 'D', 'E'] 2 | // let chars = ["A", "B", "C", 20, "D", "E", 10, 15, 6]; // => ['A', 'B', 'C', 'D', 'A', 'B', 'C', 'D', 'E'] 3 | // let chars = ["Z", "Y", "A", "D", "E", 10, 1]; // => ["Z", "Y", "Z", "Y", "A", "D", "E"] 4 | 5 | // Move numbers top the start of array 6 | for (let i = 0; i < chars.length; i++) { 7 | if (typeof chars[i] === "number") chars.unshift(...chars.splice(i, 1)); 8 | } 9 | 10 | // Find index of first letter 11 | let firstLetterIndex = chars.findIndex((ele) => typeof ele === "string"); 12 | // console.log(firstLetterIndex) 13 | 14 | // Output New Array 15 | chars.copyWithin(0, firstLetterIndex, firstLetterIndex * 2); 16 | console.log(chars); -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 123 ] - [ 133 ]/Assignment 7/main.js: -------------------------------------------------------------------------------- 1 | let numsOne = [1, 2, 3]; 2 | let numsTwo = [4, 5, 6]; 3 | 4 | // Way 1 5 | console.log([...numsOne, ...numsTwo]); 6 | 7 | // Way 2 8 | console.log(numsOne.concat(numsTwo)); 9 | 10 | // Way3 11 | numsOne.push(...numsTwo) 12 | console.log(numsOne); 13 | 14 | // Needed Output => [1, 2, 3, 4, 5, 6] -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 1/main.js: -------------------------------------------------------------------------------- 1 | let ip = "2001:db8:3333:4444:5555:6666:7777:8888"; 2 | 3 | // let IPReg = /\d{4}:\w{2}\d{1}:\d{4}:\d{4}:\d{4}:\d{4}:\d{4}:\d{4}/ig; 4 | 5 | // let IPReg = /\d{4}:\w{2}\d{1}(:\d{4}){5}/ig; 6 | 7 | let IPReg = /\w{3,4}/ig; 8 | 9 | console.log(IPReg.test(ip)); // true 10 | console.log(ip.match(IPReg)); // ['2001', 'db8', '3333', '4444', '5555', '6666', '7777', '8888'] -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn JavaScript 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 2/main.js: -------------------------------------------------------------------------------- 1 | let specialNames = "Os10O OsO Os100O Osa100O Os1000 Os100m"; 2 | 3 | console.log(specialNames.match(/\bOs\d*O\b/ig)); 4 | 5 | // Output => ['Os10O', 'OsO', 'Os100O'] -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 3/main.js: -------------------------------------------------------------------------------- 1 | let phone = "+(995)-123 (4567)"; 2 | 3 | console.log(phone.match(/\+\(\d{3}\)-\d{3}\s\(\d{4}\)/g)); -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 4/main.js: -------------------------------------------------------------------------------- 1 | let re = /https?:\/\/(?:[-\w]+\.)?([-\w]+)\.\w+(?:\.\w+)?\/?.*/i; 2 | 3 | /* 4 | [https:] => the letter (s) may be Exist or not. 5 | [\/\/] => skipping ( // ) programmatically. 6 | [(?:[-\w]+\.)?] => (?:[-\w]+\.) may be Exist or not, grouping one or more "-" and a word character, and "." any character else new line 7 | [([-\w]+)] => "-" followed by 1 word character. 8 | [\.\w+] => "." for any character else new line And one or more word character. 9 | [(?:\.\w+)?] => (?:\.\w+) may be Exist or not, (?:) Groups multiple tokens together without creating a capture group. 10 | [\/?.*] => (\/) skipping / character and may be Exist or not, (.*) match any character more than one or no. 11 | i => case insensitive. 12 | */ -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 5/main.js: -------------------------------------------------------------------------------- 1 | let date1 = "25/10/1982"; 2 | let date2 = "25 - 10 - 1982"; 3 | let date3 = "25 10 1982"; 4 | let date4 = "25 10 82"; 5 | 6 | // let re = /\d{2}((\s?\/?-?\s?)+)\d{2}((\s?\/?-?\s?)+)\d{2,}/g; // Write Pattern Here 7 | 8 | let re = /(\d{2}(\/|\s-\s|\s)){2}(\d{4}|\d{2})/g; 9 | 10 | console.log(date1.match(re)); // "25/10/1982" 11 | console.log(date2.match(re)); // "25 - 10 - 1982" 12 | console.log(date3.match(re)); // "25 10 1982" 13 | console.log(date4.match(re)); // "25 10 82" -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 6/main.js: -------------------------------------------------------------------------------- 1 | let chars = ["A", "B", "C", "D", "E", 10, 15, 6]; // => ['A', 'B', 'C', 'A', 'B', 'C', 'D', 'E'] 2 | // let chars = ["A", "B", "C", 20, "D", "E", 10, 15, 6]; // => ['A', 'B', 'C', 'D', 'A', 'B', 'C', 'D', 'E'] 3 | // let chars = ["Z", "Y", "A", "D", "E", 10, 1]; // => ["Z", "Y", "Z", "Y", "A", "D", "E"] 4 | 5 | // Move numbers top the start of array 6 | for (let i = 0; i < chars.length; i++) { 7 | if (typeof chars[i] === "number") chars.unshift(...chars.splice(i, 1)); 8 | } 9 | 10 | // Find index of first letter 11 | let firstLetterIndex = chars.findIndex((ele) => typeof ele === "string"); 12 | // console.log(firstLetterIndex) 13 | 14 | // Output New Array 15 | chars.copyWithin(0, firstLetterIndex, firstLetterIndex * 2); 16 | console.log(chars); -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 134 ] - [ 146 ]/Assignment 7/main.js: -------------------------------------------------------------------------------- 1 | let numsOne = [1, 2, 3]; 2 | let numsTwo = [4, 5, 6]; 3 | 4 | // Way 1 5 | console.log([...numsOne, ...numsTwo]); 6 | 7 | // Way 2 8 | console.log(numsOne.concat(numsTwo)); 9 | 10 | // Way3 11 | numsOne.push(...numsTwo) 12 | console.log(numsOne); 13 | 14 | // Needed Output => [1, 2, 3, 4, 5, 6] -------------------------------------------------------------------------------- /[ 147 ] - [ 158 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 147 ] - [ 158 ]/Assignment 1/main.js: -------------------------------------------------------------------------------- 1 | class Car{ 2 | constructor(name, model, price) { 3 | this.n = name; 4 | this.m = model; 5 | this.p = price; 6 | } 7 | run() { 8 | return `Car is running` 9 | } 10 | stop() { 11 | return `Car is stopped` 12 | } 13 | } 14 | 15 | let carOne = new Car("MG", "2022", "426983"); 16 | let carTwo = new Car("Opel", "2021", "445861"); 17 | let carThree = new Car("BMW", "2020", "987904"); 18 | 19 | console.log(`Car One Name Is ${carOne.n} And Model Is ${carOne.m} And Price Is ${carOne.p}`) 20 | console.log(carOne.run()) 21 | 22 | /* 23 | 24 | Needed Output 25 | "Car One Name Is MG And Model Is 2022 And Price Is 420000" 26 | "Car Is Running Now" 27 | 28 | */ -------------------------------------------------------------------------------- /[ 147 ] - [ 158 ]/Assignment 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn JavaScript 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /[ 147 ] - [ 158 ]/Assignment 2/main.js: -------------------------------------------------------------------------------- 1 | class Phone { 2 | constructor(name, serial, price) { 3 | this.name = name; 4 | this.serial = serial; 5 | this.price = price; 6 | } 7 | } 8 | 9 | // Write Tablet Class Here 10 | class Tablet extends Phone{ 11 | constructor(name, serial, price, size) { 12 | super(name, serial, price) 13 | this.size = size || "Unknown"; 14 | } 15 | fullDetails() { 16 | return `${this.name} serial is ${this.serial} And size is ${this.size}` 17 | } 18 | } 19 | 20 | let TabletOne = new Tablet("iPad", 100200300, 1500, 12.9); 21 | let TabletTwo = new Tablet("Nokia", 350450650, 800, 10.5); 22 | let TabletThree = new Tablet("LG", 250450650, 650); 23 | 24 | console.log(`${TabletOne.fullDetails()}`); 25 | // iPad Serial is 100200300 And Size Is 12.9 26 | 27 | console.log(`${TabletTwo.fullDetails()}`); 28 | // Nokia Serial is 350450650 And Size Is 10.5 29 | 30 | console.log(`${TabletThree.fullDetails()}`); 31 | // LG Serial is 250450650 And Size Is Unknown -------------------------------------------------------------------------------- /[ 147 ] - [ 158 ]/Assignment 3 - challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 147 ] - [ 158 ]/Assignment 3 - challenge/main.js: -------------------------------------------------------------------------------- 1 | // Edit The Class 2 | class User { 3 | #c; 4 | constructor(username, card) { 5 | this.u = username; 6 | this.#c = card; 7 | } 8 | callData() { 9 | // return this.c = this.c.toString().replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, "$1-$2-$3-$4") 10 | this.#c = this.#c.toString().match(/\d{4}/g).join("-"); 11 | return `Hello ${this.u} Your Credit Card Number Is ${this.#c}` 12 | }; 13 | get showData() { 14 | return this.callData() 15 | } 16 | } 17 | 18 | 19 | // Do Not Edit Anything Below 20 | 21 | let userOne = new User("Osama", "1234-5678-1234-5678"); 22 | let userTwo = new User("Ahmed", "1234567812345678"); 23 | let userThree = new User("Ghareeb", 1234567812345678); 24 | 25 | console.log(userOne.showData); 26 | // Hello Osama Your Credit Card Number Is 1234-5678-1234-5678 27 | 28 | console.log(userTwo.showData); 29 | // Hello Ahmed Your Credit Card Number Is 1234-5678-1234-5678 30 | 31 | console.log(userThree.showData); 32 | // Hello Ghareeb Your Credit Card Number Is 1234-5678-1234-5678 33 | 34 | console.log(userOne.c); // Prevent Accessing To Card Property Here 35 | // Undefined -------------------------------------------------------------------------------- /[ 147 ] - [ 158 ]/Assignment 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 147 ] - [ 158 ]/Assignment 4/main.js: -------------------------------------------------------------------------------- 1 | // Write Your Code Here 2 | String.prototype.addLove = function () { 3 | return `I Love ${this} Web School` 4 | } 5 | 6 | // Do Not Edit Below 7 | let myStr = "Elzero"; 8 | console.log(myStr.addLove()); // I Love Elzero Web School -------------------------------------------------------------------------------- /[ 147 ] - [ 158 ]/Assignment 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 147 ] - [ 158 ]/Assignment 5/main.js: -------------------------------------------------------------------------------- 1 | const myObj = { 2 | username: "Elzero", 3 | id: 100, 4 | score: 1000, 5 | country: "Egypt", 6 | }; 7 | 8 | // Write Your Code Here 9 | Object.defineProperties(myObj, { 10 | score: { 11 | writable: false, 12 | }, 13 | id: { 14 | enumerable: false, 15 | }, 16 | country: { 17 | configurable: false, 18 | enumerable: false, 19 | }, 20 | }); 21 | delete myObj.country; 22 | 23 | myObj.score = 500; 24 | 25 | for (let prop in myObj) { 26 | console.log(`${prop} => ${myObj[prop]}`); 27 | } 28 | 29 | console.log(myObj); 30 | 31 | /* 32 | Needed Output 33 | 34 | "username => Elzero" 35 | "score => 1000" 36 | {username: 'Elzero', score: 1000, id: 100} 37 | 38 | */ -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 1/main.js: -------------------------------------------------------------------------------- 1 | // Print date from my birthday 2 | 3 | let dateNow = new Date(); 4 | let birthday = new Date("2003-7-15"); 5 | let age = dateNow - birthday; 6 | 7 | console.log(parseInt(age / 1000)); // my age => Seconds 8 | console.log(parseInt(age / 1000 / 60)); // my age => Minutes 9 | console.log(parseInt(age / 1000 / 60 / 60)); // my age => Hours 10 | console.log(parseInt(age / 1000 / 60 / 60 / 24)); // my age => Days 11 | console.log(parseInt(age / 1000 / 60 / 60 / 24 / 30)); // my age => Months 12 | console.log(parseInt(age / 1000 / 60 / 60 / 24 / 30 / 12)); // my age => Years 13 | 14 | 15 | // Needed Output 16 | 17 | // "610089214 Seconds" 18 | // "10168154 Minutes" 19 | // "169469 Hours" 20 | // "7061 Days" 21 | // "235 Months" 22 | // "19 Years" -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn JavaScript 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 2/main.js: -------------------------------------------------------------------------------- 1 | let myDate = new Date(0); 2 | myDate.setFullYear(1980) 3 | myDate.setHours(0) 4 | myDate.setSeconds(1) 5 | console.log(myDate) 6 | // Needed Output 7 | 8 | "Tue Jan 01 1980 00:00:01 GMT+0200 (Eastern European Standard Time)" -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 3/main.js: -------------------------------------------------------------------------------- 1 | let dateNow = new Date(); 2 | dateNow.setDate(0) 3 | console.log(dateNow) 4 | 5 | let months = [ 6 | "January", 7 | "February", 8 | "March", 9 | "April", 10 | "May", 11 | "June", 12 | "July", 13 | "August", 14 | "September", 15 | "October", 16 | "November", 17 | "December", 18 | ]; 19 | 20 | console.log(`Previous Month Is ${months[dateNow.getMonth()]}, And Last Day Is ${dateNow.getDate()}`) 21 | 22 | /* Needed Output 23 | 24 | "Sat Apr 30 2022 18:13:20 GMT+0200 (Eastern European Standard Time)" 25 | "Previous Month Is April And Last Day Is 30" 26 | 27 | */ -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 4/main.js: -------------------------------------------------------------------------------- 1 | console.log(new Date("Jul 15 2003")) 2 | console.log(new Date("2003-7-15")) 3 | console.log(new Date("7/15/2003")) 4 | console.log(new Date("2003-07-15T00:00:00")) 5 | 6 | 7 | /* Needed Output 8 | 9 | "Tue Jul 15 2003 00:00:00 GMT+0300 (Eastern European Summer Time)" 10 | "Tue Jul 15 2003 00:00:00 GMT+0300 (Eastern European Summer Time)" 11 | "Tue Jul 15 2003 00:00:00 GMT+0300 (Eastern European Summer Time)" 12 | "Tue Jul 15 2003 00:00:00 GMT+0300 (Eastern European Summer Time)" 13 | 14 | */ -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 5/main.js: -------------------------------------------------------------------------------- 1 | const startTime = performance.now(); 2 | 3 | for (i = 0; i < 99999; i++){ 4 | document.write(`${i}
    `) 5 | } 6 | 7 | const finishTime = performance.now(); 8 | 9 | console.log(`Loop Took ${Math.trunc(finishTime - startTime)} Milliseconds.`) 10 | 11 | 12 | // Needed Output 13 | // "Loop Took 1921 Milliseconds." -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 6/main.js: -------------------------------------------------------------------------------- 1 | // Write Your Generator Function Here 2 | function* gen() { 3 | yield 14; 4 | yield 154; 5 | yield 494; 6 | yield 1034; 7 | yield 1774; 8 | yield 3854; 9 | yield 5194; 10 | yield 6734; 11 | } 12 | 13 | let generator = gen(); 14 | 15 | console.log(generator.next()); // {value: 14, done: false} 16 | console.log(generator.next()); // {value: 154, done: false} 17 | console.log(generator.next()); // {value: 494, done: false} 18 | console.log(generator.next()); // {value: 1034, done: false} 19 | console.log(generator.next()); // {value: 1774, done: false} 20 | console.log(generator.next()); // {value: 2714, done: false} 21 | console.log(generator.next()); // {value: 3854, done: false} 22 | console.log(generator.next()); // {value: 5194, done: false} 23 | console.log(generator.next()); // {value: 6734, done: false} -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 7/main.js: -------------------------------------------------------------------------------- 1 | function* genNumbers() { 2 | yield* [1, 2, 2, 2, 3, 4, 5]; 3 | } 4 | function* genLetters() { 5 | yield* ["A", "B", "B", "B", "C", "D"]; 6 | } 7 | 8 | // Write Your Generator Function Here 9 | function* genAll() { 10 | yield* new Set(genNumbers()); 11 | yield* new Set(genLetters()); 12 | } 13 | 14 | let generator = genAll(); 15 | 16 | console.log(generator.next()); // {value: 1, done: false} 17 | console.log(generator.next()); // {value: 2, done: false} 18 | console.log(generator.next()); // {value: 3, done: false} 19 | console.log(generator.next()); // {value: 4, done: false} 20 | console.log(generator.next()); // {value: 5, done: false} 21 | console.log(generator.next()); // {value: "A", done: false} 22 | console.log(generator.next()); // {value: "B", done: false} 23 | console.log(generator.next()); // {value: "C", done: false} 24 | console.log(generator.next()); // {value: "D", done: false} -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 8/main.js: -------------------------------------------------------------------------------- 1 | import { myNums as modOne } from "./mod-two.js"; 2 | import calc from "./mod-one.js"; 3 | 4 | console.log(calc(modOne.numOne, modOne.numTwo, modOne.numThree)); // 60 -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 8/mod-one.js: -------------------------------------------------------------------------------- 1 | export default function(numOne, numTwo, numThree) { 2 | return numOne + numTwo + numThree 3 | } -------------------------------------------------------------------------------- /[ 159 ] - [ 168 ]/Assignment 8/mod-two.js: -------------------------------------------------------------------------------- 1 | let a = 10; // Do Not Edit Names 2 | let b = 20; // Do Not Edit Names 3 | let c = 30; // Do Not Edit Names 4 | 5 | export let myNums = { 6 | numOne: a, 7 | numTwo: b, 8 | numThree: c, 9 | }; -------------------------------------------------------------------------------- /[ 169 ] - [ 178 ]/Assignment 1/articles.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "author": "Alaa", 5 | "article": { 6 | "category": "sport", 7 | "title": "title", 8 | "content": "content" 9 | } 10 | }, 11 | { 12 | "id": 1, 13 | "author": "Alaa", 14 | "article": { 15 | "category": "sport", 16 | "title": "title", 17 | "content": "content" 18 | } 19 | }, 20 | { 21 | "id": 1, 22 | "author": "Alaa", 23 | "article": { 24 | "category": "sport", 25 | "title": "title", 26 | "content": "content" 27 | } 28 | }, 29 | { 30 | "id": 1, 31 | "author": "Alaa", 32 | "article": { 33 | "category": "sport", 34 | "title": "title", 35 | "content": "content" 36 | } 37 | }, 38 | { 39 | "id": 1, 40 | "author": "Alaa", 41 | "article": { 42 | "category": "sport", 43 | "title": "title", 44 | "content": "content" 45 | } 46 | } 47 | ] -------------------------------------------------------------------------------- /[ 169 ] - [ 178 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 169 ] - [ 178 ]/Assignment 2/articles.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "author": "Alaa", 5 | "article": { 6 | "category": "sport", 7 | "title": "title", 8 | "content": "content" 9 | } 10 | }, 11 | { 12 | "id": 1, 13 | "author": "Alaa", 14 | "article": { 15 | "category": "sport", 16 | "title": "title", 17 | "content": "content" 18 | } 19 | }, 20 | { 21 | "id": 1, 22 | "author": "Alaa", 23 | "article": { 24 | "category": "sport", 25 | "title": "title", 26 | "content": "content" 27 | } 28 | }, 29 | { 30 | "id": 1, 31 | "author": "Alaa", 32 | "article": { 33 | "category": "sport", 34 | "title": "title", 35 | "content": "content" 36 | } 37 | }, 38 | { 39 | "id": 1, 40 | "author": "Alaa", 41 | "article": { 42 | "category": "sport", 43 | "title": "title", 44 | "content": "content" 45 | } 46 | } 47 | ] -------------------------------------------------------------------------------- /[ 169 ] - [ 178 ]/Assignment 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn JavaScript 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /[ 169 ] - [ 178 ]/Assignment 2/main.js: -------------------------------------------------------------------------------- 1 | let myReq = new XMLHttpRequest(); 2 | myReq.open("GET", "articles.json"); 3 | myReq.send(); 4 | myReq.onreadystatechange = function () { 5 | if (this.readyState === 4 && this.status === 200) { 6 | console.log(this.responseText); 7 | } 8 | }; 9 | myReq.onloadend = function () { 10 | console.log("Data Loaded"); 11 | }; 12 | 13 | 14 | /* Needed Output 15 | 16 | "JSON Object Content Here" 17 | "Data Loaded" 18 | 19 | */ -------------------------------------------------------------------------------- /[ 169 ] - [ 178 ]/Assignment 3/articles.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "author": "Alaa", 5 | "article": { 6 | "category": "sport", 7 | "title": "title", 8 | "content": "content" 9 | } 10 | }, 11 | { 12 | "id": 2, 13 | "author": "Ahmed", 14 | "article": { 15 | "category": "sport", 16 | "title": "title", 17 | "content": "content" 18 | } 19 | }, 20 | { 21 | "id": 3, 22 | "author": "Osama", 23 | "article": { 24 | "category": "sport", 25 | "title": "title", 26 | "content": "content" 27 | } 28 | }, 29 | { 30 | "id": 4, 31 | "author": "Sayed", 32 | "article": { 33 | "category": "sport", 34 | "title": "title", 35 | "content": "content" 36 | } 37 | }, 38 | { 39 | "id": 5, 40 | "author": "Elzero", 41 | "article": { 42 | "category": "sport", 43 | "title": "title", 44 | "content": "content" 45 | } 46 | } 47 | ] -------------------------------------------------------------------------------- /[ 169 ] - [ 178 ]/Assignment 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 169 ] - [ 178 ]/Assignment 3/main.js: -------------------------------------------------------------------------------- 1 | let myReq = new XMLHttpRequest(); 2 | myReq.open("get", "articles.json"); 3 | myReq.send(); 4 | myReq.onreadystatechange = function () { 5 | if (this.readyState === 4 && this.status === 200) { 6 | let mainData = JSON.parse(this.responseText); 7 | for (i = 0; i < mainData.length; i++){ 8 | mainData[i]["article"]["category"] = "All"; 9 | } 10 | console.log(mainData); 11 | let updatedData = JSON.stringify(mainData); 12 | console.log(updatedData); 13 | } 14 | } 15 | 16 | /* mainData Variable Content 17 | 18 | 0: {id: 1, title: 'Title 1', body: 'Article Number 1 Body', category: 'All', author: 'Ali'} 19 | 1: {id: 2, title: 'Title 2', body: 'Article Number 2 Body', category: 'All', author: 'Mahmoud'} 20 | 2: {id: 3, title: 'Title 3', body: 'Article Number 3 Body', category: 'All', author: 'Osama'} 21 | 3: {id: 4, title: 'Title 4', body: 'Article Number 4 Body', category: 'All', author: 'Sayed'} 22 | 4: {id: 5, title: 'Title 5', body: 'Article Number 5 Body', category: 'All', author: 'Ahmed'} 23 | 24 | // UpdatedData Variable Content 25 | "JSON Object Content Here" 26 | 27 | */ -------------------------------------------------------------------------------- /[ 169 ] - [ 178 ]/Assignment 4/articles.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "author": "Alaa", 5 | "article": { 6 | "category": "sport", 7 | "title": "title", 8 | "content": "content" 9 | } 10 | }, 11 | { 12 | "id": 2, 13 | "author": "Ahmed", 14 | "article": { 15 | "category": "sport", 16 | "title": "title", 17 | "content": "content" 18 | } 19 | }, 20 | { 21 | "id": 3, 22 | "author": "Osama", 23 | "article": { 24 | "category": "sport", 25 | "title": "title", 26 | "content": "content" 27 | } 28 | }, 29 | { 30 | "id": 4, 31 | "author": "Sayed", 32 | "article": { 33 | "category": "sport", 34 | "title": "title", 35 | "content": "content" 36 | } 37 | }, 38 | { 39 | "id": 5, 40 | "author": "Elzero", 41 | "article": { 42 | "category": "sport", 43 | "title": "title", 44 | "content": "content" 45 | } 46 | } 47 | ] -------------------------------------------------------------------------------- /[ 169 ] - [ 178 ]/Assignment 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 169 ] - [ 178 ]/Assignment 4/main.js: -------------------------------------------------------------------------------- 1 | let myReq = new XMLHttpRequest(); 2 | myReq.open("get", "articles.json"); 3 | myReq.send(); 4 | myReq.onreadystatechange = function () { 5 | if (this.status === 200 && this.readyState === 4) { 6 | let mainData = JSON.parse(this.responseText); 7 | let mainDiv = document.createElement("div"); 8 | mainDiv.id = "data"; 9 | document.body.appendChild(mainDiv) 10 | for (let i = 0; i < mainData.length; i++){ 11 | let myDiv = document.createElement("div"); 12 | myDiv.innerHTML = 13 | `

    ${mainData[i]["article"]["title"]} ${mainData[i]["id"]}

    14 |

    Author: ${mainData[i]["author"]}

    15 |

    Id: ${mainData[i]["id"]}

    16 |

    Category: ${mainData[i]["article"]["category"]}

    `; 17 | mainDiv.appendChild(myDiv) 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /[ 179 ] - [ 188 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learn JavaScript 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /[ 179 ] - [ 188 ]/Assignment 1/info.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "userId": 10, 4 | "title": "Article Title Number 1", 5 | "description": "Article Description Number 1" 6 | }, 7 | { 8 | "userId": 5, 9 | "title": "Article Title Number 2", 10 | "description": "Article Description Number 2" 11 | }, 12 | { 13 | "userId": 5, 14 | "title": "Article Title Number 3", 15 | "description": "Article Description Number 3" 16 | }, 17 | { 18 | "userId": 5, 19 | "title": "Article Title Number 4", 20 | "description": "Article Description Number 4" 21 | }, 22 | { 23 | "userId": 5, 24 | "title": "Article Title Number 5", 25 | "description": "Article Description Number 5" 26 | }, 27 | { 28 | "userId": 5, 29 | "title": "Article Title Number 6", 30 | "description": "Article Description Number 6" 31 | }, 32 | { 33 | "userId": 25, 34 | "title": "Article Title Number 7", 35 | "description": "Article Description Number 7" 36 | }, 37 | { 38 | "userId": 25, 39 | "title": "Article Title Number 8", 40 | "description": "Article Description Number 8" 41 | }, 42 | { 43 | "userId": 15, 44 | "title": "Article Title Number 9", 45 | "description": "Article Description Number 9" 46 | }, 47 | { 48 | "userId": 15, 49 | "title": "Article Title Number 10", 50 | "description": "Article Description Number 10" 51 | } 52 | ] -------------------------------------------------------------------------------- /[ 179 ] - [ 188 ]/Assignment 1/main.js: -------------------------------------------------------------------------------- 1 | const getData = (apiLink) => { 2 | return new Promise((res, rej) => { 3 | let myReq = new XMLHttpRequest(); 4 | myReq.onload = function () { 5 | if (this.readyState === 4 && this.status === 200) { 6 | res(JSON.parse(this.responseText)) 7 | } else { 8 | rej(Error("Can't reach to api data")) 9 | } 10 | } 11 | myReq.open("Get", apiLink); 12 | myReq.send(); 13 | }); 14 | }; 15 | 16 | getData("info.json") 17 | .then((resolved) => { 18 | resolved.length = 5; 19 | return resolved; 20 | }).then((resolved) => { 21 | for (i = 0; i < resolved.length; i++) { 22 | let myDiv = document.createElement("div") 23 | myDiv.innerHTML = 24 | `

    ${resolved[i]["title"]}

    25 |

    ${resolved[i]["description"]}

    ` 26 | document.body.appendChild(myDiv) 27 | } 28 | }) 29 | .catch((rejected) => console.log(rejected)) -------------------------------------------------------------------------------- /[ 179 ] - [ 188 ]/Assignment 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn JavaScript 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /[ 179 ] - [ 188 ]/Assignment 2/info.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "userId": 10, 4 | "title": "Article Title Number 1", 5 | "description": "Article Description Number 1" 6 | }, 7 | { 8 | "userId": 5, 9 | "title": "Article Title Number 2", 10 | "description": "Article Description Number 2" 11 | }, 12 | { 13 | "userId": 5, 14 | "title": "Article Title Number 3", 15 | "description": "Article Description Number 3" 16 | }, 17 | { 18 | "userId": 5, 19 | "title": "Article Title Number 4", 20 | "description": "Article Description Number 4" 21 | }, 22 | { 23 | "userId": 5, 24 | "title": "Article Title Number 5", 25 | "description": "Article Description Number 5" 26 | }, 27 | { 28 | "userId": 5, 29 | "title": "Article Title Number 6", 30 | "description": "Article Description Number 6" 31 | }, 32 | { 33 | "userId": 25, 34 | "title": "Article Title Number 7", 35 | "description": "Article Description Number 7" 36 | }, 37 | { 38 | "userId": 25, 39 | "title": "Article Title Number 8", 40 | "description": "Article Description Number 8" 41 | }, 42 | { 43 | "userId": 15, 44 | "title": "Article Title Number 9", 45 | "description": "Article Description Number 9" 46 | }, 47 | { 48 | "userId": 15, 49 | "title": "Article Title Number 10", 50 | "description": "Article Description Number 10" 51 | } 52 | ] -------------------------------------------------------------------------------- /[ 179 ] - [ 188 ]/Assignment 2/main.js: -------------------------------------------------------------------------------- 1 | // Way One 2 | 3 | fetch("info.json") 4 | .then((result) => { 5 | return result.json(); 6 | }).then((res) => { 7 | res.length = 5; 8 | return res; 9 | }).then((res) => { 10 | for (i = 0; i < res.length; i++) { 11 | let myDiv = document.createElement("div"); 12 | myDiv.innerHTML = `

    ${res[i]["title"]}

    ${res[i]["description"]}

    `; 13 | document.body.appendChild(myDiv) 14 | } 15 | }); 16 | 17 | /* 18 | 19 | // Way Two 20 | 21 | async function getData(apiLink) { 22 | try { 23 | let myInfo = await fetch(apiLink); 24 | let myData = await myInfo.json(); 25 | myData.length = 5; 26 | for (i = 0; i < myData.length; i++){ 27 | let myDiv = document.createElement("div"); 28 | document.body.appendChild(myDiv); 29 | 30 | let myHeading = document.createElement("h3"); 31 | myHeading.textContent = myData[i]["title"] 32 | myDiv.appendChild(myHeading) 33 | 34 | let myP = document.createElement("p"); 35 | myP.textContent = myData[i]["description"] 36 | myDiv.appendChild(myP) 37 | 38 | } 39 | } 40 | catch (error) { 41 | document.body.appendChild(document.createTextNode(error)) 42 | } 43 | } 44 | 45 | getData("info.json") 46 | 47 | */ --------------------------------------------------------------------------------