├── Assignments ├── Assignments From [ 001 ] To [ 009 ] │ ├── Assignment 1.html │ ├── Assignment 2.js │ ├── Assignment 3.js │ ├── Assignment 4.js │ ├── Assignment 5.js │ └── Assignment 6.js ├── Assignments From [ 010 ] To [ 017 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ ├── Assignment 4.js │ └── Variable And Concatenation Challenge.js ├── Assignments From [ 018 ] To [ 022 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ ├── Assignment 4.js │ └── Operators Challenge.js ├── Assignments From [ 023 ] To [ 026 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ ├── Assignment 4.js │ ├── Assignment 5.js │ ├── Assignment 6.js │ ├── Assignment 7.js │ └── Numbers Challenge.js ├── Assignments From [ 027 ] To [ 030 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ └── String Challenge.js ├── Assignments From [ 031 ] To [ 032 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ └── Assignment 3.js ├── Assignments From [ 033 ] To [ 037 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ ├── Assignment 4.js │ └── If Condition Challenge.js ├── Assignments From [ 038 ] To [ 039 ] │ ├── Assignment 1.js │ └── Switch and If Condition Challenge.js ├── Assignments From [ 040 ] To [ 047 ] │ ├── Array Challenge.js │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ ├── Assignment 4.js │ ├── Assignment 5.js │ └── Assignment 6.js ├── Assignments From [ 048 ] To [ 053 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ ├── Assignment 4.js │ ├── Assignment 5.js │ ├── Assignment 6.js │ └── Assignment 7.js ├── Assignments From [ 054 ] To [ 056 ] │ ├── Assignment 1.js │ └── Loop Challenge │ │ ├── index.html │ │ ├── main.css │ │ └── master.js ├── Assignments From [ 057 ] To [ 063 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ ├── Assignment 4 - Random Arguments Challenge.js │ ├── Assignment 5.js │ └── Assignment 6.js ├── Assignments From [ 064 ] To [ 070 ] │ ├── Arrow Function Challenges.js │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ └── Assignment 4.js ├── Assignments From [ 071 ] To [ 078 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ ├── Assignment 4.js │ ├── Assignment 5.js │ └── Higher Order Fuctions Challenge.js ├── Assignments From [ 079 ] To [ 085 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ └── Assignment 4.js ├── Assignments From [ 086 ] To [ 093 ] │ ├── Assignment 1 │ │ ├── index.html │ │ └── master.js │ ├── Assignment 2 │ │ ├── index.html │ │ └── master.js │ ├── Assignment 3 │ │ ├── index.html │ │ ├── main.css │ │ └── master.js │ ├── Assignment 4 │ │ ├── index.html │ │ └── master.js │ ├── Assignment 5 │ │ ├── index.html │ │ └── master.js │ └── Assignment 6 │ │ ├── index.html │ │ ├── main.css │ │ └── master.js ├── Assignments From [ 094 ] To [ 101 ] │ ├── Assignment 1 │ │ ├── index.html │ │ └── master.js │ ├── Assignment 2 │ │ ├── index.html │ │ ├── main.css │ │ └── master.js │ ├── Assignment 3 │ │ ├── index.html │ │ └── master.js │ ├── Assignment 4 │ │ ├── index.html │ │ └── master.js │ ├── Assignment 5 │ │ ├── index.html │ │ └── master.js │ └── DOM Challenge │ │ ├── index.html │ │ └── master.js ├── Assignments From [ 102 ] To [ 110 ] │ ├── Assignment 1 │ │ ├── index.html │ │ └── master.js │ ├── Assignment 2 │ │ ├── index.html │ │ └── master.js │ ├── Assignment 3 │ │ ├── index.html │ │ └── master.js │ ├── Assignment 4 │ │ ├── index.html │ │ └── master.js │ └── Assignment 5 │ │ ├── index.html │ │ └── master.js ├── Assignments From [ 111 ] To [ 114 ] │ ├── Assignment 1 │ │ ├── index.html │ │ ├── main.css │ │ └── master.js │ ├── Assignment 2 │ │ ├── index.html │ │ ├── main.css │ │ └── master.js │ └── BOM Challenge │ │ ├── index.html │ │ ├── main.css │ │ └── master.js ├── Assignments From [ 115 ] To [ 122 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ ├── Assignment 4.js │ ├── Assignment 5.js │ └── Assignment 6 - Destructuring Challenge.js ├── Assignments From [ 123 ] To [ 133 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ ├── Assignment 4.js │ ├── Assignment 5.js │ ├── Assignment 6.js │ ├── Assignment 7.js │ └── Assignment 8 - Map And Set Challenge.js ├── Assignments From [ 134 ] To [ 146 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ ├── Assignment 4.js │ ├── Assignment 5.js │ └── Assignment 6 - Challenge.js ├── Assignments From [ 147 ] To [ 158 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3 - Challenge.js │ ├── Assignment 4.js │ └── Assignment 5.js ├── Assignments From [ 159 ] To [ 168 ] │ ├── Assignment 1.js │ ├── Assignment 2.js │ ├── Assignment 3.js │ ├── Assignment 4.js │ ├── Assignment 5.js │ ├── Assignment 6.js │ ├── Assignment 7.js │ └── Assignment 8 │ │ ├── index.html │ │ ├── main.js │ │ ├── mod-one.js │ │ └── mod-two.js ├── Assignments From [ 169 ] To [ 178 ] │ ├── Assignment 1.json │ ├── Assignment 2.js │ ├── Assignment 3.js │ └── Assignment 4 │ │ ├── index.html │ │ ├── main.css │ │ └── master.js ├── Assignments From [ 179 ] To [ 188 ] │ ├── Assignment 1 │ │ ├── index.html │ │ ├── main.css │ │ └── master.js │ ├── Assignment 2 │ │ ├── index.html │ │ ├── main.css │ │ └── master.js │ └── data.json └── Miscellaneous Assignments │ ├── Assignment 01.js │ ├── Assignment 02.js │ ├── Assignment 03.js │ ├── Assignment 04.js │ ├── Assignment 05.js │ ├── Assignment 06.js │ ├── Assignment 07.js │ ├── Assignment 08.js │ ├── Assignment 09.js │ ├── Assignment 10.js │ ├── Assignment 11.js │ ├── Assignment 12.js │ ├── Assignment 13.js │ ├── Assignment 14.js │ ├── Assignment 15.js │ ├── Assignment 16.js │ ├── Assignment 17.js │ ├── Assignment 18.js │ ├── Assignment 19.js │ ├── Assignment 20.js │ ├── Assignment 21.js │ ├── Assignment 22.js │ ├── Assignment 23.js │ ├── Assignment 24.js │ ├── Assignment 25.js │ ├── Assignment 26.js │ ├── Assignment 27.js │ ├── Assignment 28.js │ ├── Assignment 29.js │ ├── Assignment 30.js │ ├── Assignment 31.js │ ├── Assignment 32.js │ ├── Assignment 33.js │ ├── Assignment 34.js │ ├── Assignment 35.js │ ├── Assignment 36.js │ ├── Assignment 37.js │ ├── Assignment 38.js │ ├── Assignment 39.js │ ├── Assignment 40.js │ ├── Assignment 41.js │ ├── Assignment 42 │ ├── index.html │ └── master.js │ ├── Assignment 43 │ ├── index.html │ ├── main.css │ └── master.js │ ├── Assignment 44.js │ ├── Assignment 45.js │ ├── Assignment 46.js │ ├── Assignment 47 │ ├── index.html │ ├── main.css │ └── master.js │ ├── Assignment 48.js │ ├── Assignment 49.js │ └── Assignment 50.js ├── Lessons ├── Week 01 │ ├── 001 - Introduction And What Is JavaScript.js │ ├── 002 - How To Study The Course.js │ ├── 003 - Setting Up Environment And Tools.js │ ├── 004 - Work With Chrome Developer Tools.js │ ├── 005 - Where To Put The Code.js │ ├── 006 - Comments And Bad Practice.js │ ├── 007 - Output To Screen.js │ ├── 008 - Console Methods & Styling And Web API.js │ └── 009 - What Is ECMAScript.js ├── Week 02 │ ├── 010 - Data Types & typeof Operator.js │ ├── 011 - Variables Introduction.js │ ├── 012 - Identifiers Name Conventions & Rules.js │ ├── 013 - Var, Let, Const Compare.js │ ├── 014 - String Syntax & Characters Escape Sequences.js │ ├── 015 - Concatenation.js │ ├── 016 - Template Literals (Template Strings).js │ └── 017 - Variable & Concatenation Challenge.js ├── Week 03 │ ├── 018 - Arithmetic Operators.js │ ├── 019 - Unary Plus & Negation Operators.js │ ├── 020 - Type Coercion.js │ ├── 021 - Assignment Operators.js │ └── 022 - Operators Challenges.js ├── Week 04 │ ├── 023 - Number.js │ ├── 024 - Number Methods.js │ ├── 025 - Math Object.js │ ├── 026 - Number Challenge.js │ ├── 027 - String Methods - Part 1.js │ ├── 028 - String Methods - Part 2.js │ ├── 029 - String Methods - Part 3.js │ └── 030 - String Challenge.js ├── Week 05 │ ├── 031 - Comparison Operators.js │ ├── 032 - Logical Operators.js │ ├── 033 - If Conditions.js │ ├── 034 - Nested If Conditions.js │ ├── 035 - Conditional Ternary Operator.js │ ├── 036 - Nullish Coalescing Operator & Logical Or.js │ ├── 037 - If Condition Challenge.js │ ├── 038 - Switch Statement.js │ └── 039 - Switch & If Condition Challenge.js ├── Week 06 │ ├── 040 - Array Big Introduction.js │ ├── 041 - Using Length With Array.js │ ├── 042 - Add And Remove From Array.js │ ├── 043 - Searching Array.js │ ├── 044 - Sorting Array.js │ ├── 045 - Slicing Array.js │ ├── 046 - Joining Arrays.js │ └── 047 - Array Challenge.js ├── Week 07 │ ├── 048 - Loop - For & Concept Of Loop.js │ ├── 049 - Loop On Sequences.js │ ├── 050 - Nested Loops & Training.js │ ├── 051 - Loop Control - Break, Continue, Label.js │ ├── 052 - Loop - For - Advanced Example.js │ ├── 053 - Practice - Add Products To Page │ │ ├── 053 - Practice - Add Products To Page.html │ │ ├── main.css │ │ └── master.js │ ├── 054 - Loop - While.js │ ├── 055 - Loop - Do While.js │ └── 056 - Loop Challenge.js ├── Week 08 │ ├── 057 - Function - Intro & Basic Usage.js │ ├── 058 - Function - Advanced Example.js │ ├── 059 - Function - return Statement & Use Cases.js │ ├── 060 - Function - Default Parameter.js │ ├── 061 - Function - Rest Parameter.js │ ├── 062 - Practice - Ultimate Function.js │ └── 063 - Random Arguments Function Challenge.js ├── Week 09 │ ├── 064 - Anonymous Function & Use Cases.js │ ├── 065 - Return Nested Function.js │ ├── 066 - Arrow Function Syntax.js │ ├── 067 - Scope - Global & Local.js │ ├── 068 - Scope - Block.js │ ├── 069 - Scope - Lexical (Static).js │ └── 070 - Arrow Function Challenge.js ├── Week 10 │ ├── 071 - Higher Order Functions - Map.js │ ├── 072 - Higher Order Functions - Map Practice.js │ ├── 073 - Higher Order Functions - Filter.js │ ├── 074 - Higher Order Functions - Filter Practice.js │ ├── 075 - Higher Order Functions - Reduce.js │ ├── 076 - Higher Order Functions - Reduce Practice.js │ ├── 077 - Higher Order Functions - ForEach & Practice.js │ └── 078 - Higher Order Functions Challenge.js ├── Week 11 │ ├── 079 - Object Introduction.js │ ├── 080 - Dot Notation vs Bracket Notation.js │ ├── 081 - Nested Object and Advanced Trainings.js │ ├── 082 - Create Object With New Keyboard.js │ ├── 083 - This Keyword.js │ ├── 084 - Create Object With Create Method.js │ └── 085 - Create Object With Assign Method.js ├── Week 12 │ ├── 086 - What Is DOM & Select Elements.js │ ├── 087 - Get & Set Elements Content And Attributes.js │ ├── 088 - Check Attributes & Examples.js │ ├── 089 - Create & Append Elements.js │ ├── 090 - Practice - Product With Heading And Paragraph.js │ ├── 091 - Deal With Children.html │ ├── 092 - DOM Events.js │ └── 093 - Validate Form & Prevent Default.js ├── Week 13 │ ├── 094 - Event Simulation – Click, Focus, Blur.js │ ├── 095 - ClassList Object & Methods.js │ ├── 096 - CSS Styling & Stylesheets.js │ ├── 097 - Before, After, Prepend, Append, Remove.js │ ├── 098 - DOM Traversing.js │ ├── 099 - DOM Cloning.js │ ├── 100 - addEventListener & Event Target.js │ └── 101 - DOM Challenge.js ├── Week 14 │ ├── 102 - What Is BOM.js │ ├── 103 - Alert & Confirm & Prompt.js │ ├── 104 - setTimeout & clearTimeout.js │ ├── 105 - setInterval & clearInterval.js │ ├── 106 - Window Location Object.js │ ├── 107 - Window Open & Close.js │ ├── 108 - Window History Object.js │ ├── 109 - Scroll, ScrollTo, ScrollBy, Focus, Print, Stop.js │ └── 110 - Practice - Scroll To Top Using ScrollY.js ├── Week 15 │ ├── 111 - Local Storage.js │ ├── 112 - Practice - Local Storage Color App │ │ ├── index.html │ │ ├── main.css │ │ └── master.js │ ├── 113 - Session Storage & Use Cases.html │ └── 114 - BOM Challenge.js ├── Week 16 │ ├── 115 - Destructuring Arrays - Part 1.js │ ├── 116 - Destructuring Arrays - Part 2.js │ ├── 117 - Destructuring Arrays - Part 3 - Swap Variables.js │ ├── 118 - Destructuring Objects - Part 1.js │ ├── 119 - Destructuring Objects - Part 2.js │ ├── 120 - Destructuring Function Parameters.js │ ├── 121 - Destructuring Mixed Content.js │ └── 122 - Destructuring Challenge.js ├── Week 17 │ ├── 123 - Set Data Type & Methods.js │ ├── 124 - Set vs WeakSet & Garbage Collector.js │ ├── 125 - Map Data Type vs Object.js │ ├── 126 - Map Methods.js │ ├── 127 - Map vs WeakMap.js │ ├── 128 - Array.from Method.js │ ├── 129 - Array.copyWithin Method.js │ ├── 130 - Array.some Method.js │ ├── 131 - Array.every Method.js │ ├── 132 - Spread Syntax & Use Cases.js │ └── 133 - Map And Set Challenge.js ├── Week 18 │ ├── 134 - Intro & What Is Regular Expression.js │ ├── 135 - RegExp Modifiers.js │ ├── 136 - RegExp Ranges - Part 1.js │ ├── 137 - RegExp Ranges - Part 2.js │ ├── 138 - RegExp Character Classes - Part 1.js │ ├── 139 - RegExp Character Classes - Part 2.js │ ├── 140 - RegExp Quantifiers - Part 1.js │ ├── 141 - RegExp Quantifiers - Part 2.js │ ├── 142 - RegExp Quantifiers - Part 3.js │ ├── 143 - Replace With RegExp Pattern.js │ ├── 144 - Form Validation With RegExp │ │ ├── index.html │ │ ├── main.css │ │ └── master.js │ ├── 145 - Test Your RegExp And Discussions.js │ └── 146 - RegExp Challenge.js ├── Week 19 │ ├── 147 - OOP Introduction.js │ ├── 148 - Constructor Function Introduction.js │ ├── 149 - Constructor Function New Syntax.js │ ├── 150 - Deal With Properties & Methods.js │ ├── 151 - Update Properties & Built In Constructors.js │ ├── 152 - Class Static Properties & Methods.js │ ├── 153 - Class Inheritance.js │ ├── 154 - Class Encapsulation.js │ ├── 155 - Prototype Introduction.js │ ├── 156 - Add To Prototype Chain.js │ ├── 157 - Object Meta Data & Descriptor - Part 1.js │ └── 158 - Object Meta Data & Descriptor - Part 2.js ├── Week 20 │ ├── 159 - Date And Time Introduction.js │ ├── 160 - Get Date & Time.js │ ├── 161 - Set Date & Time.js │ ├── 162 - Formatting Date & Time.js │ ├── 163 - Tracking Operations Time.js │ ├── 164 - Generator Function Introduction.js │ ├── 165 - Delegate Generator Function.js │ ├── 166 - Generate Infinite Numbers.js │ ├── 167 - Modules Import & Export │ │ ├── app.js │ │ ├── index.html │ │ └── main.js │ └── 168 - Named vs Default Export And Import All │ │ ├── app.js │ │ ├── index.html │ │ └── main.js ├── Week 21 │ ├── 169 - Introduction & What Is JSON │ │ ├── main.js │ │ ├── test.json │ │ └── test.xml │ ├── 170 - JSON Syntax & Compare With JS Object │ │ ├── main.js │ │ └── test.json │ ├── 171 - What is API.js │ ├── 172 - Parse & Stringify.js │ ├── 173 - Asynchronous Programming vs Synchronous Programming.js │ ├── 174 - Call Stack & Web API.js │ ├── 175 - Event Loop & Callback Queue.js │ ├── 176 - What Is AJAX And Network Information.js │ ├── 177 - Request And Response From Real API.js │ └── 178 - Loop On API Data.js └── Week 22 │ ├── 179 - Callback Hell Or Pyramid Of Doom.js │ ├── 180 - Promise Intro And Syntax.js │ ├── 181 - Promise - Then & Catch & Finally.js │ ├── 182 - Promise And XHR.js │ ├── 183 - Fetch API.js │ ├── 184 - Promise - All & All Settled & Race.js │ ├── 185 - Async & Training.js │ ├── 186 - Await & Training.js │ ├── 187 - Fetch - Try & Catch & Finally.js │ └── 188 - The End & Advices.js └── README.md /Assignments/Assignments From [ 001 ] To [ 009 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | document.write("

Elzero

"); 2 | 3 | document.querySelector("h1").style.color = "blue"; 4 | document.querySelector("h1").style.fontSize = "80px"; 5 | document.querySelector("h1").style.fontWeight = "bold"; 6 | document.querySelector("h1").style.fontFamily = "Arial"; 7 | document.querySelector("h1").style.textAlign = "center"; -------------------------------------------------------------------------------- /Assignments/Assignments From [ 001 ] To [ 009 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | console.log( 2 | "%cElzero %cWeb %cSchool", 3 | "color: red; font-size: 40px;", 4 | "color: green; font-size: 40px; font-weight: bold;", 5 | "background-color: blue; color: white; font-size: 40px;" 6 | ); 7 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 001 ] To [ 009 ]/Assignment 4.js: -------------------------------------------------------------------------------- 1 | console.group("Group 1"); 2 | console.log("Message One"); 3 | console.log("Message Two"); 4 | console.group("Child Group"); 5 | console.log("Message One"); 6 | console.log("Message Two"); 7 | console.group("Grand Child Group"); 8 | console.log("Message One"); 9 | console.log("Message Two"); 10 | console.groupEnd(); 11 | console.groupEnd(); 12 | console.groupEnd(); 13 | console.group("Group 2"); 14 | console.log("Message One"); 15 | console.log("Message Two"); 16 | console.groupEnd(); 17 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 001 ] To [ 009 ]/Assignment 5.js: -------------------------------------------------------------------------------- 1 | console.table([ 2 | "Osama", 3 | "Elzero", 4 | "Walter White", 5 | "Saul Goodman", 6 | "Michael Scofield", 7 | ]); 8 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 001 ] To [ 009 ]/Assignment 6.js: -------------------------------------------------------------------------------- 1 | /* 2 | console.log("Iam In Console"); 3 | document.write("Iam In Page"); 4 | */ 5 | 6 | // console.log("Iam In Console"); 7 | // document.write("Iam In Page"); 8 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 010 ] To [ 017 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | let numberOne = 10, 2 | numberTwo = 20; 3 | 4 | console.log(numberOne + "" + numberTwo); 5 | // Normal Concatenate => 1020 6 | 7 | console.log(typeof "numberOne + '' + numberTwo"); 8 | // Normal Concatenate => string 9 | 10 | console.log(`${numberOne}${numberTwo}`); 11 | // Template Literals Way => 1020 12 | 13 | console.log(typeof `${numberOne}${numberTwo}`); 14 | // Template Literals Way => string 15 | 16 | console.log(numberTwo + "\n" + numberOne); 17 | /* 18 | Normal Concatenate 19 | Output: 20 | 20 21 | 10 22 | */ 23 | 24 | console.log(`${numberTwo} 25 | ${numberOne}`); 26 | /* 27 | Template Literals Way 28 | Output: 29 | 20 30 | 10 31 | */ 32 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 010 ] To [ 017 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | console.log(elzero.innerHTML); 2 | // Output => object 3 | 4 | console.log(typeof elzero); 5 | // Output => object 6 | 7 | /* 8 | The Solution Is To Make HTML Element with id=object and text object 9 |

object

10 | */ 11 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 010 ] To [ 017 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | console.log( 2 | '`I\'m In \n \\\\ \n Love \\\\ """ \'\'\' \n ++ With ++ \n \\"""\\""" \n ""Javascript""``' 3 | ); 4 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 010 ] To [ 017 ]/Assignment 4.js: -------------------------------------------------------------------------------- 1 | let a = 21; 2 | let b = 20; 3 | 4 | console.log("_" + `${a}_${b}`.repeat(4) + "_"); 5 | // Output => _21_2021_2021_2021_20_ 6 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 018 ] To [ 022 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | console.log(10 * 20 - (15 % 3) + 190 + 10 - 400); // Output => 0 2 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 018 ] To [ 022 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | let numTwo = 3; 2 | console.log(numTwo + numTwo); // First - Output => 6 3 | console.log(numTwo * (numTwo - true)); // Second - Output => 6 4 | console.log(numTwo + numTwo * true); // Third - Output => 6 5 | console.log(numTwo ** (numTwo - true) - numTwo); // Fourth - Output => 6 6 | console.log(numTwo / true + true + numTwo - true); // Fifth - Output => 6 7 | console.log((typeof numTwo).length); // Sixth - Output => 6 8 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 018 ] To [ 022 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | let numThree = "10"; 2 | console.log(+numThree + +numThree); // First - Output => 20 3 | console.log(+numThree * (true + true)); // Second - Output => 20 4 | console.log(Number(numThree) + Number(numThree)); // Third - Output => 20 5 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 018 ] To [ 022 ]/Assignment 4.js: -------------------------------------------------------------------------------- 1 | let points = 10; 2 | 3 | // Write Your Code Here 4 | points += ++points.toString().length; 5 | console.log(points); // Output => 13 6 | 7 | // Write Your Code Here 8 | points -= ++points.toString().length + points.toString().length; 9 | console.log(points); // Output => 8 10 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 023 ] To [ 026 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | console.log(100000); // Output => 100000 2 | console.log(100000.0); // Output => 100000 3 | console.log(100_000); // Output => 100000 4 | console.log(1e5); // Output => 100000 5 | console.log(5e4 + 5e4); // Output => 100000 6 | console.log(100 ** 2.5); // Output => 100000 7 | console.log(Math.trunc(100000.12315)); // Output => 100000 8 | console.log(Math.pow(10, 5)); // Output => 100000 9 | console.log(Math.ceil(100000.0)); // Output => 100000 10 | console.log(Math.floor(100000.12426)); // Output => 100000 11 | console.log(Math.round(100000.4)); // Output => 100000 12 | console.log(Number("100000")); // Output => 100000 13 | console.log(parseInt("100000.2324")); // Output => 100000 14 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 023 ] To [ 026 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | console.log(Number.MIN_SAFE_INTEGER * -1); // Output => 9007199254740991 2 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 023 ] To [ 026 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | // Don't Use Numbers At All To Output 16 using MAX_SAFE_INTEGER 2 | console.log(Number.MAX_SAFE_INTEGER.toString().length); 3 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 023 ] To [ 026 ]/Assignment 4.js: -------------------------------------------------------------------------------- 1 | let myVar = "100.56789 Views"; 2 | console.log(parseInt(myVar)); // Output => 100 3 | console.log(+parseFloat(myVar).toFixed(2)); // Output => 100.57 4 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 023 ] To [ 026 ]/Assignment 5.js: -------------------------------------------------------------------------------- 1 | let num = 10; 2 | console.log(Number.isInteger(num) + Number.isInteger(num)); // Output => 2 3 | // OR 4 | console.log(Number.isInteger(num) + true); // Output => 2 5 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 023 ] To [ 026 ]/Assignment 6.js: -------------------------------------------------------------------------------- 1 | let flt = 10.4; 2 | console.log(parseInt(flt)); // Output => 10 3 | console.log(Math.floor(flt)); // Output => 10 4 | console.log(Math.round(flt)); // Output => 10 5 | console.log(Math.trunc(flt)); // Output => 10 6 | console.log(Math.ceil(--flt)); // Output => 10 7 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 023 ] To [ 026 ]/Assignment 7.js: -------------------------------------------------------------------------------- 1 | console.log(Math.floor(Math.random() * (4 - 0 + 1) + 0)); // Output => 0 || 1 || 2 || 3 || 4 2 | 3 | /* 4 | The Main Equation 5 | Math.floor(Math.random() * (max - min + 1) + min) 6 | -- Min and Max will be included 7 | */ 8 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 023 ] To [ 026 ]/Numbers Challenge.js: -------------------------------------------------------------------------------- 1 | /* 2 | Number Challenge 3 | */ 4 | 5 | let a = 100; 6 | let b = 2_00.5; 7 | let c = 1e2; 8 | let d = 2.4; 9 | 10 | // Find Smallest Number In All Variables And Return Integer 11 | console.log(parseInt(Math.min(a, b, c, d))); 12 | 13 | // Use Variables a And d One Time To Get The Needed Output 14 | console.log(a ** parseInt(d)); // Output => 10000 15 | 16 | // Get Integer "2" From d Variable With 4 Methods 17 | console.log(parseInt(d)); 18 | console.log(Math.floor(d)); 19 | console.log(Math.trunc(d)); 20 | console.log(Math.round(d)); 21 | 22 | // Use Variables b + d To Get The Needed Output 23 | console.log((parseInt(b) / Math.ceil(d)).toFixed(2)); // Output => 66.67 (String) 24 | console.log(Math.round(parseInt(b) / Math.ceil(d))); // Output => 67 (Number) 25 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 027 ] To [ 030 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | let userName = "Elzero"; 2 | 3 | console.log(userName[0].toLowerCase()); // Output => e 4 | console.log(userName.toLowerCase().slice(0, 1)); // Output => e 5 | console.log(userName.toLowerCase().substring(0, 1)); // Output => e 6 | console.log(userName.toLowerCase().substring(-5, 1)); // Output => e 7 | console.log(userName.toLowerCase().substr(0, 1)); // Output => e 8 | console.log(userName.toLowerCase().charAt(0).repeat(3)); // Output => eee 9 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 027 ] To [ 030 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | let word = "Elzero"; 2 | let letterZ = "z"; 3 | let letterE = "e"; 4 | let letterO = "O"; 5 | 6 | console.log(word.toUpperCase().includes(letterZ.toUpperCase())); // Output => True 7 | console.log(word.startsWith(letterE.toUpperCase())); // Output => True 8 | console.log(word.endsWith(letterO.toLowerCase())); // Output => True 9 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 027 ] To [ 030 ]/String Challenge.js: -------------------------------------------------------------------------------- 1 | /* 2 | String Challenge 3 | All Solutions Must Be In One Chain 4 | You Can Use Concatenate 5 | */ 6 | 7 | let a = "Elzero Web School"; 8 | 9 | // Include These Methods In Your Solution [slice, charAt] 10 | console.log(a.charAt(2).toUpperCase() + a.slice(3, 6)); // Output => Zero 11 | 12 | // 8 H 13 | console.log(a.substr(-4, 1).toUpperCase().repeat(8)); // Output => HHHHHHHH 14 | 15 | // Return Array 16 | console.log(a.split(" ", 1)); // ["Elzero"] 17 | 18 | // Use Only "substr" Method + Template Literals In Your Solution 19 | console.log(`${a.substr(0, 6)} ${a.substr(-6, 6)}`); // Output => Elzero School 20 | 21 | // Solution Must Be Dynamic Because String May Changes 22 | console.log( 23 | a[0].toLowerCase() + 24 | a.slice(1, a.length - 1).toUpperCase() + 25 | a[a.length - 1].toLowerCase() 26 | ); // Output => eLZERO WEB SCHOOl 27 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 031 ] To [ 032 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | console.log(100 == "100"); // Output => true 2 | console.log(100 < 1000); // Output => true 3 | console.log(110 > 100 && 10 < 20); // Output => true 4 | console.log(-10 == "-10"); // Output => true 5 | console.log(+-50 < +"-40"); // Output => true 6 | console.log(+10 < -"-40"); // Output => true 7 | console.log(+"10" === 10); // Output => true 8 | console.log(-20 < false); // Output => true 9 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 031 ] To [ 032 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | let num1 = 10; 2 | let num2 = 20; 3 | 4 | console.log(typeof num1 == typeof num2); // Output => true 5 | console.log(typeof num1 === typeof num2); // Output => true 6 | console.log(num1 < num2); // Output => true 7 | console.log(num2 > num1); // Output => true 8 | console.log(!(num1 > num2)); // Output => true 9 | console.log(!(num2 < num1)); // Output => true 10 | console.log(num1 <= num2); // Output => true 11 | console.log(num2 >= num1); // Output => true 12 | console.log(!(num1 >= num2)); // Output => true 13 | console.log(!(num2 <= num1)); // Output => true 14 | console.log(num1 != num2); // Output => true 15 | console.log(num1 !== num2); // Output => true 16 | console.log(!(num1 == num2)); // Output => true 17 | console.log(!(num1 === num2)); // Output => true 18 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 031 ] To [ 032 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | let a = 20; 2 | let b = 30; 3 | let c = 10; 4 | 5 | console.log((a < b && a > c) || a <= b); // Output => true 6 | console.log(a < b && a > c); // Output => true 7 | console.log(!(a > b) && !(a >= b) && !(a <= c) && !(a < c)); // Output => true 8 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 033 ] To [ 037 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | let numOne = 9; // Condition Output => "009" 2 | if (numOne < 10) { 3 | console.log(`00${numOne}`); 4 | } 5 | let numTwo = 20; // Condition Output => "020" 6 | if (numTwo < 100 && numTwo > 10) { 7 | console.log(`0${numTwo}`); 8 | } 9 | let numThree = 110; // Condition Output => "110" 10 | if (numThree > 100) { 11 | console.log(`${numThree}`); 12 | } 13 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 033 ] To [ 037 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | let num1 = 9; 2 | let str = "9"; 3 | let str2 = "20"; 4 | 5 | /* 6 | Output: 7 | ("{num1} Is The Same Value As {str}"); 8 | ("{num1} Is The Same Value As {str} But Not The Same Type"); 9 | ("{num1} Is Not The Same Value Or The Same Type As {str2}"); 10 | ("{str} Is The Same Type As {str2} But Not The Same Value"); 11 | */ 12 | 13 | if (num1 == str) { 14 | console.log("{num1} Is The Same Value As {str}"); 15 | } 16 | if (num1 == str && typeof num1 !== typeof str) { 17 | console.log("{num1} Is The Same Value As {str} But Not The Same Type"); 18 | } 19 | if (num1 !== str2) { 20 | console.log("{num1} Is Not The Same Value Or The Same Type As {str2}"); 21 | } 22 | if (str != str2 && typeof str === typeof str2) { 23 | console.log("{str} Is The Same Type As {str2} But Not The Same Value"); 24 | } 25 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 033 ] To [ 037 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | let num1 = 10; 2 | let num2 = 30; 3 | let num3 = "30"; 4 | 5 | /* 6 | Needed Output: 7 | "{num3} Is Larger Than {num1} And Not The Same Type As {num2}" 8 | "{num3} Is Larger Than {num1} And Value Is The Same As {num2} And Type Is Not The Same As {num2}" 9 | "{num3} Value And Type Is Not The Same As {num1} And Type Is Not The Same As {num2}" 10 | */ 11 | 12 | if (num3 > num1 && typeof num3 !== typeof num2) { 13 | console.log( 14 | "{num3} Is Larger Than {num1} And Not The Same Type As {num2}" 15 | ); 16 | } 17 | if (num3 > num1 && num3 == num2 && typeof num3 !== typeof num2) { 18 | console.log( 19 | "{num3} Is Larger Than {num1} And Value Is The Same As {num2} And Type Is Not The Same As {num2}" 20 | ); 21 | } 22 | if (num3 !== num1 && typeof num3 !== typeof num2) { 23 | console.log( 24 | "{num3} Value And Type Is Not The Same As ${num1} And Type Is Not The Same As {num2}" 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 038 ] To [ 039 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | let day = " friday "; 2 | // You Need To Remove Spaces And Make First Letter Capital => Friday 3 | 4 | switch (day.trim().charAt(0).toUpperCase() + day.trim().slice(1)) { 5 | case "Friday": 6 | case "Saturday": 7 | case "Sunday": 8 | console.log("Sorry, There Are No Appointments Available."); 9 | break; 10 | 11 | case "Monday": 12 | case "Thursday": 13 | console.log( 14 | "Today's Appointments Are Available From 10:00 AM To 5:00 PM" 15 | ); 16 | break; 17 | 18 | case "Tuesday": 19 | console.log( 20 | "Today's Appointments Are Available From 10:00 AM To 6:00 PM" 21 | ); 22 | break; 23 | 24 | case "Wednesday": 25 | console.log( 26 | "Today's Appointments Are Available From 10:00 AM To 7:00 PM" 27 | ); 28 | break; 29 | 30 | default: 31 | console.log("It Is Not A Valid Day."); 32 | } 33 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 040 ] To [ 047 ]/Array Challenge.js: -------------------------------------------------------------------------------- 1 | let zero = 0; 2 | let counter = 3; 3 | let my = ["Ahmed", "Mazero", "Elham", "Osama", "Gamal", "Ameer"]; 4 | 5 | // Part 1 6 | console.log(my.slice(zero, counter + zero.toString().length).reverse()); // Output => ["Osama", "Elham", "Mazero", "Ahmed"] 7 | 8 | // Part 2 9 | console.log(my.slice(zero.toString().length, counter).reverse()); // Output => ["Elham", "Mazero"] 10 | 11 | // Part 3 12 | console.log( 13 | my[counter - zero.toString().length].slice( 14 | zero, 15 | counter - zero.toString().length 16 | ) + my[zero.toString().length].slice(counter - zero.toString().length) 17 | ); // Output => "Elzero" 18 | 19 | // Part 4 20 | console.log( 21 | my[zero.toString().length][counter + zero.toString().length] + 22 | my[counter][zero] 23 | ); // Output > "rO" 24 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 040 ] To [ 047 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | let friends = ["Ahmed", "Elham", "Osama", "Gamal"]; 2 | // Write Code Here 3 | friends.pop(); 4 | friends.shift(); 5 | console.log(friends); // Output => ["Elham", "Osama"] 6 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 040 ] To [ 047 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | let arrOne = ["C", "D", "X"]; 2 | let arrTwo = ["A", "B", "Z"]; 3 | let finalArr = []; 4 | // Write One Single Line Of Code Here 5 | // Start Of Your Code 6 | finalArr = arrOne.concat(arrTwo).sort().reverse(); 7 | // End Of Your Code 8 | console.log(finalArr); // Output => ["Z", "X", "D", "C", "B", "A"] 9 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 040 ] To [ 047 ]/Assignment 4.js: -------------------------------------------------------------------------------- 1 | let website = "Go"; 2 | let words = [`${website}ogle`, "Facebook", ["Elzero", "Web", "School"]]; 3 | 4 | console.log(words[website.length][0].toUpperCase().slice(website.length)); // Output => ZERO 5 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 040 ] To [ 047 ]/Assignment 5.js: -------------------------------------------------------------------------------- 1 | let needle = "JS"; 2 | let haystack = ["PHP", "JS", "Python"]; 3 | /* 4 | Needed Output: 5 | Found 3 Times 6 | */ 7 | // Write 3 Solutions 8 | if (haystack.includes(needle)) { 9 | console.log("Found"); 10 | } 11 | if (haystack.indexOf(needle) !== -1) { 12 | console.log("Found"); 13 | } 14 | if (haystack.lastIndexOf(needle) !== -1) { 15 | console.log("Found"); 16 | } 17 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 040 ] To [ 047 ]/Assignment 6.js: -------------------------------------------------------------------------------- 1 | let arr1 = ["A", "C", "X"]; 2 | let arr2 = ["D", "E", "F", "Y"]; 3 | // Start Of Your Code 4 | let allArrs = []; 5 | allArrs = allArrs 6 | .concat(arr1, arr2) 7 | .sort() 8 | .slice(arr2.length) 9 | .join("") 10 | .toLowerCase(); 11 | // End Of Your Code 12 | console.log(allArrs); // Output => fxy 13 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 048 ] To [ 053 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | let start = 10; 2 | let end = 100; 3 | let exclude = 40; 4 | /* 5 | Output: 6 | 10 7 | 20 8 | 30 9 | 50 10 | 60 11 | 70 12 | 80 13 | 90 14 | 100 15 | */ 16 | for (let i = start; i <= end; i += start) { 17 | if (i === exclude) continue; 18 | else console.log(i); 19 | } 20 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 048 ] To [ 053 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | let start = 10; 2 | let end = 0; 3 | let stop = 3; 4 | /* 5 | Output: 6 | 10 7 | 09 8 | 08 9 | 07 10 | 06 11 | 05 12 | 04 13 | 03 14 | */ 15 | for (let i = start; i >= end; i--) { 16 | i === start ? console.log(`${i}`) : console.log(`${end}${i}`); 17 | if (i === stop) break; 18 | } 19 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 048 ] To [ 053 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | let start = 1; 2 | let end = 6; 3 | let breaker = 2; 4 | /* 5 | Output: 6 | 1 7 | -- 2 8 | -- 4 9 | 2 10 | -- 2 11 | -- 4 12 | 3 13 | -- 2 14 | -- 4 15 | 4 16 | -- 2 17 | -- 4 18 | 5 19 | -- 2 20 | -- 4 21 | 6 22 | -- 2 23 | -- 4 24 | */ 25 | for (let i = start; i <= end; i++) { 26 | console.log(i); 27 | for (let j = breaker; j <= breaker + breaker; j += breaker) { 28 | console.log(`-- ${j}`); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 048 ] To [ 053 ]/Assignment 4.js: -------------------------------------------------------------------------------- 1 | let index = 10; 2 | let end = 6; 3 | let jump = 2; 4 | /* 5 | Output: 6 | 10 7 | 8 8 | 6 9 | 4 10 | */ 11 | for (;;) { 12 | console.log(`${index}`); 13 | index -= jump; 14 | if (index <= jump) break; 15 | } 16 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 048 ] To [ 053 ]/Assignment 6.js: -------------------------------------------------------------------------------- 1 | let start = 0; 2 | let swappedName = "elZerO"; 3 | // Output => "ELzERo" 4 | let result = []; 5 | for (i = start; i < swappedName.length; i++) { 6 | swappedName[i] === swappedName[i].toLowerCase() 7 | ? result.push(swappedName[i].toUpperCase()) 8 | : result.push(swappedName[i].toLowerCase()); 9 | } 10 | let final = result.join(""); 11 | 12 | console.log(final); 13 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 048 ] To [ 053 ]/Assignment 7.js: -------------------------------------------------------------------------------- 1 | let start = 0; 2 | let mix = [1, 2, 3, "A", "B", "C", 4]; 3 | /* 4 | Output: 5 | 2 6 | 3 7 | 4 8 | */ 9 | for (let i = start; i < mix.length; i++) { 10 | if (typeof mix[i] === "number" && mix[i] !== mix[start]) console.log(mix[i]); 11 | } 12 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 054 ] To [ 056 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | let friends = ["Ahmed", "Sayed", "Ali", 1, 2, "Mahmoud", "Amany"]; 2 | let index = 0; 3 | let counter = 0; 4 | /* 5 | Output: 6 | "1 => Sayed" 7 | "2 => Mahmoud" 8 | */ 9 | while (index < friends.length) { 10 | if (typeof friends[index] !== "number" && !friends[index].startsWith("A")) { 11 | console.log(`${counter + true} => ${friends[index]}`); 12 | counter++; 13 | } 14 | index++; 15 | } 16 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 054 ] To [ 056 ]/Loop Challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Loop Challenge 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 054 ] To [ 056 ]/Loop Challenge/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-color: #b00020; 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: 24px; 13 | } 14 | div { 15 | background-color: #ddd; 16 | padding: 10px; 17 | } 18 | span { 19 | font-weight: bold; 20 | color: var(--main-color); 21 | } 22 | h3 { 23 | color: var(--main-color); 24 | } 25 | p { 26 | border-left: 3px solid var(--main-color); 27 | padding-left: 5px; 28 | margin-left: 20px; 29 | } 30 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 057 ] To [ 063 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | function sayHello(theName, theGender) { 2 | // Write Your Code Here 3 | switch (theGender) { 4 | case "Male": 5 | console.log(`Hello Mr ${theName}`); 6 | break; 7 | case "Female": 8 | console.log(`Hello Miss ${theName}`); 9 | break; 10 | default: 11 | console.log(`Hello ${theName}`); 12 | } 13 | } 14 | sayHello("Osama", "Male"); // Output => "Hello Mr Osama" 15 | sayHello("Eman", "Female"); // Output => "Hello Miss Eman" 16 | sayHello("Sameh"); // Output => "Hello Sameh" 17 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 057 ] To [ 063 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | function calculate(firstNum, secondNum, operation) { 2 | // Write Your Code Here 3 | if (secondNum === undefined) { 4 | return `Second Number Is Not Found`; 5 | } 6 | switch (operation) { 7 | case "add": 8 | default: 9 | return `${firstNum + secondNum}`; 10 | break; 11 | case "subtract": 12 | return `${firstNum - secondNum}`; 13 | break; 14 | case "multiply": 15 | return `${firstNum * secondNum}`; 16 | break; 17 | } 18 | } 19 | console.log(calculate(20)); // Output => Second Number Is Not Found 20 | console.log(calculate(20, 30)); // Output => 50 21 | console.log(calculate(20, 30, "add")); // Output => 50 22 | console.log(calculate(20, 30, "subtract")); // Output => -10 23 | console.log(calculate(20, 30, "multiply")); // Output => 600 24 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 057 ] To [ 063 ]/Assignment 5.js: -------------------------------------------------------------------------------- 1 | function createSelectBox(startYear, endYear) { 2 | // Write Your Code Here 3 | document.write(``); 8 | } 9 | createSelectBox(2000, 2021); 10 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 057 ] To [ 063 ]/Assignment 6.js: -------------------------------------------------------------------------------- 1 | function multiply(...numbers) { 2 | let result = 1; 3 | for (let i = 0; i < numbers.length; i++) { 4 | if (typeof numbers[i] === "number") { 5 | result *= parseInt(numbers[i]); 6 | } 7 | } 8 | return result; 9 | } 10 | console.log(multiply(10, 20)); // Output => 200 11 | console.log(multiply("A", 10, 30)); // Output => 300 12 | console.log(multiply(100.5, 10, "B")); // Output => 1000 13 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 064 ] To [ 070 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | /* 2 | Convert This Normal Fuction To Arrow Function: 3 | function itsMe() { 4 | return `I am A Normal Function` 5 | } 6 | console.log(itsMe()); => Output => I am A Normal Function 7 | */ 8 | let itsMe = () => `I am An Arrow Function`; 9 | console.log(itsMe()); // Output => I am An Arrow Function 10 | 11 | /* 12 | Convert This Normal Fuction To Arrow Function: 13 | function urlCreate(protocol, web, tld) { 14 | return `${protocol}://www.${web}.${tld}` 15 | } 16 | console.log(urlCreate("https", "elzero", "org")); => Output => https://www.elzero.org 17 | */ 18 | let urlCreate = (protocol, web, tld) => `${protocol}://www.${web}.${tld}`; 19 | console.log(urlCreate("https", "elzero", "org")); -------------------------------------------------------------------------------- /Assignments/Assignments From [ 064 ] To [ 070 ]/Assignment 4.js: -------------------------------------------------------------------------------- 1 | function specialMix(...data) { 2 | // Write Your Code Here 3 | let result = 0; 4 | for (let i = 0; i < data.length; i++) { 5 | data[i] = parseInt(data[i]); 6 | if (isNaN(data[i])) continue; 7 | else result += data[i]; 8 | } 9 | if (result === 0) return "All Inputs Are String"; 10 | return result; 11 | } 12 | 13 | console.log(specialMix(1, 20, 300, 4000)); // Output => 4321 14 | console.log(specialMix("30Test", "Testing", "70Cool")); // Output => 100 15 | console.log(specialMix("Testing", "5Testing", "250Cool")); // Output => 255 16 | console.log(specialMix("Test", "Cool", "Test")); // Output => All Inputs Are String 17 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 071 ] To [ 078 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | // Use Map And Reduce Only 2 | // Do NOT Use Filter Function Or Join Method 3 | 4 | let mix = [1, 2, 3, "E", 4, "l", "z", "e", "r", 5, "o"]; 5 | 6 | let word = mix 7 | .map((el) => (isNaN(el) ? el : "")) 8 | .reduce((acc, current) => `${acc}${current}`); 9 | 10 | console.log(word); // Output => "Elzero" 11 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 071 ] To [ 078 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | // Use Filter Function To Remove The Duplicated Letters 2 | 3 | let myString = "EElllzzzzzzzeroo"; 4 | 5 | let word = myString 6 | .split("") 7 | .filter((el, index) => (myString.indexOf(el) === index)) 8 | .join(""); 9 | 10 | console.log(word); // Output => "Elzero" 11 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 071 ] To [ 078 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | // Use Reduce To Get The Output 2 | // Do NOT Use Array.flat() 3 | 4 | let myArray = ["E", "l", "z", ["e", "r"], "o"]; 5 | 6 | let word = myArray 7 | .reduce((acc, curr) => acc.concat(curr), []) 8 | .reduce((acc, curr) => `${acc}${curr}`); 9 | 10 | console.log(word); // Output => "Elzero" 11 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 071 ] To [ 078 ]/Assignment 4.js: -------------------------------------------------------------------------------- 1 | // Use Filter And Map and Anything You Want To Get The Output 2 | 3 | let numsAndStrings = [1, 10, -10, -20, 5, "A", 3, "B", "C"]; 4 | 5 | let invNums = numsAndStrings 6 | .filter((el) => (typeof el === "number")) 7 | .map((el) => (-el)); 8 | 9 | console.log(invNums); // Output => [-1, -10, 10, 20, -5, -3] 10 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 071 ] To [ 078 ]/Assignment 5.js: -------------------------------------------------------------------------------- 1 | let nums = [2, 12, 11, 5, 10, 1, 99]; 2 | 3 | let finalResult = nums.reduce((acc, curr) => curr % 2 !== 0 ? acc + curr : acc * curr, 1); 4 | 5 | console.log(finalResult); // Output => 500 6 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 079 ] To [ 085 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | // Create Your Object Here 2 | let member = { 3 | name: "Philo", 4 | age: 16, 5 | country: "Egypt", 6 | fullDetails: () => { 7 | return `My Name Is ${member.name}, My Age Is ${member.age}, I Live In ${member.country}`; 8 | }, 9 | }; 10 | 11 | console.log(member.name); // Output => Philo 12 | console.log(member.age); // Output => 16 13 | console.log(member.country); // Output => Egypt 14 | console.log(member.fullDetails()); // Output => My Name Is Philo, My Age Is 16, I Live In Egypt 15 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 079 ] To [ 085 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | // Method One 2 | // Create Your Object Here 3 | let objMethodOne = { 4 | property: "Method One", 5 | }; 6 | 7 | console.log(objMethodOne.property); // Output => "Method One" 8 | 9 | // Method Two 10 | // Create Your Object Here 11 | let objMethodTwo = new Object({ 12 | property: "Method Two", 13 | }); 14 | 15 | console.log(objMethodOne.property); // Output => "Method Two" 16 | 17 | // Method Three 18 | // Create Your Object Here 19 | let objMethodThree = Object.create({ 20 | property: "Method Three", 21 | }); 22 | 23 | console.log(objMethodThree.property); // Output => "Method Three" 24 | 25 | // Method Four 26 | // Create Your Object Here 27 | let objMethodFour = Object.assign({ 28 | property: "Method Four", 29 | }); 30 | 31 | console.log(objMethodFour.property); // Output => "Method Four" 32 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 079 ] To [ 085 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | let a = 1; 2 | let threeNums = { b: 2, c: 3, d: 4 }; 3 | let twoNums = { e: 5, f: 6 }; 4 | 5 | // Create Your Object Here In One Line 6 | let finalObject = Object.assign({ a }, threeNums, twoNums); 7 | 8 | console.log(finalObject); 9 | /* 10 | Output: 11 | a: 1 12 | b: 2 13 | c: 3 14 | d: 4 15 | e: 5 16 | f: 6 17 | */ 18 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 086 ] To [ 093 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM #1 - Assignment 1 8 | 9 | 10 |
JavaScript
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 086 ] To [ 093 ]/Assignment 1/master.js: -------------------------------------------------------------------------------- 1 | // Select the div written in HTML file 15 times 2 | // Use querySelector 4 times only 3 | // Use querySelectorAll 4 times only 4 | 5 | document.getElementById("elzero"); 6 | document.getElementsByClassName("element")[0]; 7 | document.getElementsByTagName("div")[0]; 8 | document.getElementsByName("js")[0]; 9 | document.querySelector("#elzero"); 10 | document.querySelector(".element"); 11 | document.querySelector("div"); 12 | document.querySelector("div[name = js]"); 13 | document.querySelectorAll(".element")[0]; 14 | document.querySelectorAll("#elzero")[0]; 15 | document.querySelectorAll("div")[0]; 16 | document.querySelectorAll("div[name = js]")[0]; 17 | document.body.firstElementChild; 18 | document.body.children[0]; 19 | document.body.childNodes[1]; 20 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 086 ] To [ 093 ]/Assignment 2/master.js: -------------------------------------------------------------------------------- 1 | for (let i = 0; i <= 10; 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 | } 6 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 086 ] To [ 093 ]/Assignment 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM #1 - Assignment 3 8 | 9 | 10 | 11 |
12 | 13 |
14 |

{0} US Dollars

15 | ≈ 16 |

{0} Egyptian Pounds

17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 086 ] To [ 093 ]/Assignment 3/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-color: #ff5722; 3 | } 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | body { 10 | background-color: #eee; 11 | font-family: sans-serif; 12 | } 13 | form { 14 | width: 85%; 15 | height: 300px; 16 | padding: 20px; 17 | margin: 10px auto; 18 | display: flex; 19 | justify-content: space-evenly; 20 | align-items: center; 21 | flex-direction: column; 22 | background-color: #ddd; 23 | border: 2px solid var(--main-color); 24 | } 25 | form input { 26 | outline: none; 27 | border: 2px solid var(--main-color); 28 | width: 50%; 29 | padding: 10px 15px; 30 | } 31 | form .result { 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | flex-direction: column; 36 | } 37 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 086 ] To [ 093 ]/Assignment 3/master.js: -------------------------------------------------------------------------------- 1 | const currInp = document.querySelector("form input[type=number]"); 2 | const usCurr = document.querySelector("form .us-dollar"); 3 | const egCurr = document.querySelector("form .eg-pound"); 4 | 5 | currInp.oninput = () => { 6 | usCurr.innerHTML = currInp.value; 7 | egCurr.innerHTML = (currInp.value * 15.6).toFixed(2); 8 | }; 9 | 10 | document.forms[0].onsubmit = (e) => e.preventDefault(); 11 | 12 | // Extra Work To Prevent Writing " - e + " in input 13 | currInp.onkeydown = (e) => { 14 | if (["-", "+", "e"].includes(e.key)) e.preventDefault(); 15 | }; 16 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 086 ] To [ 093 ]/Assignment 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM #1 - Assignment 4 8 | 9 | 10 |
Two
11 |
One
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 086 ] To [ 093 ]/Assignment 4/master.js: -------------------------------------------------------------------------------- 1 | // Creating Variables 2 | let firstDiv = document.querySelector(".one"); 3 | let secDiv = document.querySelector(".two"); 4 | let secTitle = secDiv.title; 5 | let secTxt = secDiv.innerHTML; 6 | 7 | // Switching Attributes 8 | secDiv.title = firstDiv.title; 9 | firstDiv.title = secTitle; 10 | 11 | // Switching Content 12 | secDiv.innerHTML = `${firstDiv.innerHTML} ${ 13 | document.getElementsByTagName("div").length 14 | }`; 15 | firstDiv.innerHTML = secTxt; 16 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 086 ] To [ 093 ]/Assignment 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM #1 - Assignment 5 8 | 9 | 10 | One 11 | 12 | Three 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 086 ] To [ 093 ]/Assignment 5/master.js: -------------------------------------------------------------------------------- 1 | for (let i = 0; i < document.images.length; i++) { 2 | document.images[i].hasAttribute("alt") 3 | ? document.images[i].setAttribute("alt", "Old") 4 | : document.images[i].setAttribute("alt", "Elzero New"); 5 | } 6 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 094 ] To [ 101 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | DOM #2 - Assignment 1 9 | 10 | 11 | 12 | Google 13 | Elzero 14 | Facebook 15 | Elzero 16 | 17 | 18 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 094 ] To [ 101 ]/Assignment 1/master.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | for (let i = 0; i < document.links.length; i++) { 3 | if ( 4 | document.links[i].classList.contains("open") && 5 | document.links[i].innerHTML === "Elzero" 6 | ) { 7 | document.links[i].click(); 8 | } 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 094 ] To [ 101 ]/Assignment 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM #2 - Assignment 3 8 | 9 | 10 | 11 |
Our Element
12 |

Our Paragraph

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 094 ] To [ 101 ]/Assignment 3/master.js: -------------------------------------------------------------------------------- 1 | document.getElementsByTagName("p")[0].remove(); 2 | 3 | let myElem = document.querySelector(".our-element"); 4 | let myFirst = myElem.cloneNode(true); 5 | let myLast = myElem.cloneNode(true); 6 | 7 | function elemAttr(ele, word) { 8 | ele.className = word.toLowerCase(); 9 | ele.title = `${word} Element`; 10 | ele.setAttribute("data-value", word); 11 | ele.innerHTML = word; 12 | } 13 | 14 | elemAttr(myFirst, "Start"); 15 | elemAttr(myLast, "End"); 16 | 17 | myElem.before(myFirst); 18 | myElem.after(myLast); 19 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 094 ] To [ 101 ]/Assignment 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM #2 - Assignment 4 8 | 9 | 10 |
11 | Hello 12 | 13 | Elzero 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 094 ] To [ 101 ]/Assignment 4/master.js: -------------------------------------------------------------------------------- 1 | console.log( 2 | document 3 | .querySelector("div span") 4 | .nextSibling.nextSibling.nextSibling.textContent.trim() 5 | ); 6 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 094 ] To [ 101 ]/Assignment 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM #2 - Assignment 5 8 | 9 | 10 |
Element
11 | Element 12 |

Element

13 |
Element
14 |
Element
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 094 ] To [ 101 ]/Assignment 5/master.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("click", (e) => { 2 | console.log(`This Is ${e.target.tagName}`); 3 | }); 4 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 094 ] To [ 101 ]/DOM Challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM Challenge 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 102 ] To [ 110 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BOM #1 - Assignment 1 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 102 ] To [ 110 ]/Assignment 1/master.js: -------------------------------------------------------------------------------- 1 | let data = prompt("Print Number From – To", "5-20") 2 | .split("-") 3 | .sort((a, b) => a - b); 4 | 5 | let counter = setInterval(() => { 6 | let num = document.createElement("div"); 7 | num.innerHTML = data[0]++; 8 | if (num.innerHTML === data[1]) clearInterval(counter); 9 | document.body.append(num); 10 | }, 0); 11 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 102 ] To [ 110 ]/Assignment 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BOM #1 - Assignment 2 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 102 ] To [ 110 ]/Assignment 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BOM #1 - Assignment 3 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 102 ] To [ 110 ]/Assignment 3/master.js: -------------------------------------------------------------------------------- 1 | let msg = document.createElement("div"); 2 | msg.innerHTML = "10"; 3 | document.body.append(msg); 4 | 5 | let counter = setInterval(() => { 6 | msg.innerHTML -= 1; 7 | if (msg.innerHTML === "0") clearInterval(counter); 8 | }, 1000); 9 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 102 ] To [ 110 ]/Assignment 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BOM #1 - Assignment 4 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 102 ] To [ 110 ]/Assignment 4/master.js: -------------------------------------------------------------------------------- 1 | let msg = document.createElement("div"); 2 | msg.innerHTML = "10"; 3 | document.body.append(msg); 4 | 5 | let counter = setInterval(() => { 6 | msg.innerHTML -= 1; 7 | if (msg.innerHTML === "0") location.href = "https://elzero.org/"; 8 | }, 1000); 9 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 102 ] To [ 110 ]/Assignment 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BOM #1 - Assignment 5 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 102 ] To [ 110 ]/Assignment 5/master.js: -------------------------------------------------------------------------------- 1 | let msg = document.createElement("div"); 2 | msg.innerHTML = "10"; 3 | document.body.append(msg); 4 | 5 | let counter = setInterval(() => { 6 | msg.innerHTML -= 1; 7 | if (msg.innerHTML === "5") 8 | window.open( 9 | "https://elzero.org/", 10 | "_blank", 11 | "width=500,height=500,left=500" 12 | ); 13 | if (msg.innerHTML === "0") clearInterval(counter); 14 | }, 1000); 15 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 111 ] To [ 114 ]/Assignment 1/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | section { 7 | padding: 20px; 8 | } 9 | section .options { 10 | display: flex; 11 | justify-content: space-evenly; 12 | align-items: center; 13 | gap: 20px; 14 | } 15 | section .options select { 16 | flex: 1; 17 | padding: 10px; 18 | font-weight: bold; 19 | text-align: center; 20 | outline: none; 21 | } 22 | section .text { 23 | margin-top: 30px; 24 | padding: 20px; 25 | font-weight: bold; 26 | background-color: #000; 27 | } 28 | @media (max-width: 410px) { 29 | section .options { 30 | flex-flow: column wrap; 31 | } 32 | section .options select { 33 | width: 100%; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 111 ] To [ 114 ]/Assignment 2/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | form { 8 | width: 300px; 9 | margin: 30px auto; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | flex-flow: column wrap; 14 | gap: 30px; 15 | } 16 | form * { 17 | width: 100%; 18 | padding: 15px; 19 | outline: none; 20 | } 21 | form input:last-child { 22 | background-color: #328e32; 23 | color: #ffffff; 24 | border: none; 25 | cursor: pointer; 26 | } 27 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 111 ] To [ 114 ]/BOM Challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BOM Challenge => To-Do List 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 115 ] To [ 122 ]/Assignment 1.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); // Output => 5 7 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 115 ] To [ 122 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | let mySkills = [ 2 | "HTML", 3 | "CSS", 4 | "JavaScript", 5 | ["PHP", "Python", ["Django", "Laravel"]], 6 | ]; 7 | 8 | // Write Your Destructuring Assignment Here 9 | let [a, b, c, [d, e, [f, g]]] = mySkills; 10 | 11 | console.log(`My Skills: ${a}, ${b}, ${c}, ${d}, ${e}, ${f}, ${g}`); 12 | // Output => My Skills: HTML, CSS, JavaScript, PHP, Python, Django, Laravel 13 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 115 ] To [ 122 ]/Assignment 3.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 | const [a, b, c] = arr3.concat(arr1).slice(1, 4); 8 | // -- Another Solution -- 9 | // arr3[0] = arr1[0]; 10 | // const [c, b, a] = arr3.sort(); 11 | 12 | console.log(`My Best Friends: ${a}, ${b}, ${c}`); 13 | // Output => My Best Friends: Shady, Mahmoud, Ahmed 14 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 115 ] To [ 122 ]/Assignment 4.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 I'm ${w ? "" : "Not"} Working`); // Output => My Age Is 30 And Iam Not Working 17 | console.log(`I Live in ${c}`); // Output => I Live in Egypt 18 | console.log(`My Hobbies Are ${h1} And ${h3}`); // Output => My Hobbies Are Reading And Programming 19 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 123 ] To [ 133 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | let setOfNumbers = new Set().add(10); 2 | setOfNumbers.add(20).add(setOfNumbers.size); 3 | 4 | console.log(setOfNumbers); // Output => Set(3) {10, 20, 2} 5 | console.log(Array.from(setOfNumbers)[setOfNumbers.size - 1]); // Output => 2 6 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 123 ] To [ 133 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | let myFriends = ["Osama", "Ahmed", "Sayed", "Sayed", "Mahmoud", "Osama"]; 2 | 3 | console.log(Array.from(new Set(myFriends)).sort()); 4 | /* 5 | Needed Output: 6 | (4)[("Ahmed", "Mahmoud", "Osama", "Sayed")] 7 | */ 8 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 123 ] To [ 133 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | let myInfo = { 2 | username: "Osama", 3 | role: "Admin", 4 | country: "Egypt", 5 | }; 6 | 7 | let myMapInfo = new Map(Object.entries(myInfo)); 8 | console.log(myMapInfo); 9 | console.log(myMapInfo.size); 10 | console.log(myMapInfo.has("role")); 11 | /* 12 | Needed Output: 13 | Map(3) {'username' => 'Osama', 'role' => 'Admin', 'country' => 'Egypt'} 14 | 3 15 | true 16 | */ 17 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 123 ] To [ 133 ]/Assignment 4.js: -------------------------------------------------------------------------------- 1 | let theNumber = 100020003000; 2 | 3 | console.log( 4 | +Array.from(new Set([...theNumber.toString()])) 5 | .sort() 6 | .join("") 7 | ); 8 | // Needed Output => 123 9 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 123 ] To [ 133 ]/Assignment 5.js: -------------------------------------------------------------------------------- 1 | let theName = "Elzero"; 2 | 3 | console.log(theName.split("")); 4 | console.log([...theName]); 5 | console.log([...new Set(theName)]); 6 | console.log(Array.from(theName)); 7 | console.log(Object.values(theName)); 8 | // Needed Output => ["E", "l", "z", "e", "r", "o"] 9 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 123 ] To [ 133 ]/Assignment 6.js: -------------------------------------------------------------------------------- 1 | let arrayOne = ["A", "B", "C", "D", "E", 10, 15, 6]; 2 | assignmentSix(arrayOne); 3 | // Output => ['A', 'B', 'C', 'A', 'B', 'C', 'D', 'E'] 4 | 5 | let arrayTwo = ["A", "B", "C", 20, "D", "E", 10, 15, 6]; 6 | assignmentSix(arrayTwo); 7 | // Output => ['A', 'B', 'C', 'D', 'A', 'B', 'C', 'D', 'E'] 8 | 9 | let arrayThree = ["Z", "Y", "A", "D", "E", 10, 1]; 10 | assignmentSix(arrayThree); 11 | // Output => ["Z", "Y", "Z", "Y", "A", "D", "E"] 12 | 13 | function assignmentSix(arr) { 14 | for (let i = 0; i < arr.length; i++) { 15 | if (typeof arr[i] === "number") { 16 | arr.unshift(...arr.splice(i, 1)); 17 | } 18 | } 19 | console.log(arr); 20 | const firstLetterIndex = arr.findIndex((ele) => typeof ele === "string"); 21 | arr = arr.copyWithin(0, firstLetterIndex, firstLetterIndex * 2); 22 | console.log(arr); 23 | console.log("#".repeat(50)); 24 | } 25 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 123 ] To [ 133 ]/Assignment 7.js: -------------------------------------------------------------------------------- 1 | let numsOne = [1, 2, 3]; 2 | let numsTwo = [4, 5, 6]; 3 | 4 | console.log(numsOne.concat(numsTwo)); 5 | console.log([...numsOne, ...numsTwo]); 6 | console.log(Array.from([numsOne, numsTwo]).flat()); 7 | console.log(Array.from(new Set([numsOne, numsTwo].flat()))); 8 | console.log(Array.of(...numsOne, ...numsTwo)); 9 | // Needed Output => [1, 2, 3, 4, 5, 6] 10 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 134 ] To [ 146 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | let ip = "2001:db8:3333:4444:5555:6666:7777:8888"; 2 | 3 | console.log(ip.match(/(\w+|:)+/gi)); 4 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 134 ] To [ 146 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | let specialNames = "Os10O OsO Os100O Osa100O Os1000 Os100m"; 2 | 3 | console.log(specialNames.match(/\bOs\d*O\b/g)); 4 | // Output => ['Os10O', 'OsO', 'Os100O'] 5 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 134 ] To [ 146 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | let phone = "+(995)-123 (4567)"; 2 | 3 | console.log(phone.match(/\+\(\d{3}\)-\d{3}\s\(\d{4}\)/g)); 4 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 134 ] To [ 146 ]/Assignment 5.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 | // Write Pattern Here 7 | let re = /(\d{2}(\/|\s-\s|\s)){2}(\d{4}|\d{2})/g; 8 | 9 | console.log(date1.match(re)); // "25/10/1982" 10 | console.log(date2.match(re)); // "25 - 10 - 1982" 11 | console.log(date3.match(re)); // "25 10 1982" 12 | console.log(date4.match(re)); // "25 10 82" 13 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 134 ] To [ 146 ]/Assignment 6 - Challenge.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://www.youtube.com/watch?v=_n_oiZRqH_k"; 7 | 8 | // Write Your Pattern Here 9 | let regex = /(https?:\/\/)?(www.)?\w+.(com|org|net|info|io):?.*/gi; 10 | 11 | console.log(url1.match(regex)); 12 | console.log(url2.match(regex)); 13 | console.log(url3.match(regex)); 14 | console.log(url4.match(regex)); 15 | console.log(url5.match(regex)); 16 | console.log(url6.match(regex)); 17 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 147 ] To [ 158 ]/Assignment 1.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 Now`; 9 | } 10 | stop() { 11 | return `Car Is Stopping Now`; 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( 20 | `Car One name is ${carOne.n} and its model is ${carOne.m} edition and its price is ${carOne.p} EGP` 21 | ); // Output => "Car One name is MG and its model is 2022 edition and irs price is 426983 EGP" 22 | 23 | console.log(carOne.run()); // Output => "Car Is Running Now" 24 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 147 ] To [ 158 ]/Assignment 4.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 9 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 159 ] To [ 168 ]/Assignment 1.js: -------------------------------------------------------------------------------- 1 | let dateNow = new Date(); 2 | let myBirthday = new Date("Aug 04 2005"); 3 | let dateDiff = dateNow - myBirthday; 4 | 5 | let seconds = (dateDiff / 1000).toFixed(); 6 | let minutes = (seconds / 60).toFixed(); 7 | let hours = (minutes / 60).toFixed(); 8 | let days = (hours / 24).toFixed(); 9 | let months = (days / 30).toFixed(2); 10 | let years = (days / 365.25).toFixed(2); 11 | let decades = (years / 10).toFixed(3); 12 | 13 | console.log(`I am ${seconds} seconds old`); 14 | console.log(`I am ${minutes} minutes old`); 15 | console.log(`I am ${days} days old`); 16 | console.log(`I am ${months} months old`); 17 | console.log(`I am ${years} years old`); 18 | console.log(`I am ${decades} decades old`); 19 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 159 ] To [ 168 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | let myDate = new Date(0); 2 | myDate.setFullYear(1980); 3 | myDate.setHours(0); 4 | myDate.setSeconds(1); 5 | 6 | console.log(myDate); 7 | // Output => "Tue Jan 01 1980 00:00:01 GMT+0200 (Eastern European Standard Time)" 8 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 159 ] To [ 168 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | let dateNow = new Date(); 2 | 3 | dateNow.setDate(0); 4 | console.log(dateNow); 5 | // Output => "Sat Apr 30 2022 18:13:20 GMT+0200 (Eastern European Standard Time)" 6 | // It is changed every month so the output isnt fixed/static and the time as well 7 | 8 | let months = [ 9 | "January", 10 | "February", 11 | "March", 12 | "April", 13 | "May", 14 | "June", 15 | "July", 16 | "August", 17 | "September", 18 | "October", 19 | "November", 20 | "December", 21 | ]; 22 | console.log( 23 | `Previous Month Is ${ 24 | months[dateNow.getMonth()] 25 | } And Last Day Is ${dateNow.getDate()}` 26 | ); 27 | // Output => "Previous Month Is April And Last Day Is 30" 28 | // It is changed every month so the output isnt fixed/static and the time as well 29 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 159 ] To [ 168 ]/Assignment 4.js: -------------------------------------------------------------------------------- 1 | console.log(new Date("08-04-2005")); // Output => Thu Aug 04 2005 00:00:00 GMT+0300 (Eastern European Summer Time) 2 | console.log(new Date("2005-08-04T00:00:00")); // Output => Thu Aug 04 2005 00:00:00 GMT+0300 (Eastern European Summer Time) 3 | console.log(new Date(2005, 7, 04, 0, 0, 0)); // Output => Thu Aug 04 2005 00:00:00 GMT+0300 (Eastern European Summer Time) 4 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 159 ] To [ 168 ]/Assignment 5.js: -------------------------------------------------------------------------------- 1 | let start = new Date(); 2 | for (let i = 0; i <= 99999; i++) document.write(`${i}
`); 3 | let end = new Date(); 4 | console.log(`Loop Took ${end - start} Milliseconds`); // Output => "Loop Took 1921 Milliseconds" (Number may change) 5 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 159 ] To [ 168 ]/Assignment 6.js: -------------------------------------------------------------------------------- 1 | // Write Your Generator Function Here 2 | function* gen() { 3 | let i = 1; 4 | while (true) { 5 | yield 100 * i * i - 160 * i + 74; 6 | i++; 7 | } 8 | } 9 | 10 | let generator = gen(); 11 | 12 | console.log(generator.next()); // Output => {value: 14, done: false} 13 | console.log(generator.next()); // Output => {value: 154, done: false} 14 | console.log(generator.next()); // Output => {value: 494, done: false} 15 | console.log(generator.next()); // Output => {value: 1034, done: false} 16 | console.log(generator.next()); // Output => {value: 1774, done: false} 17 | console.log(generator.next()); // Output => {value: 2714, done: false} 18 | console.log(generator.next()); // Output => {value: 3854, done: false} 19 | console.log(generator.next()); // Output => {value: 5194, done: false} 20 | console.log(generator.next()); // Output => {value: 6734, done: false} 21 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 159 ] To [ 168 ]/Assignment 8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modules - Assignment 8 8 | 9 | 10 | 11 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 159 ] To [ 168 ]/Assignment 8/main.js: -------------------------------------------------------------------------------- 1 | import calc from "./mod-one.js"; 2 | import { nums as modOne } from "./mod-two.js"; 3 | console.log(calc(modOne.numOne, modOne.numTwo, modOne.numThree)); // Output => 60 4 | 5 | // Dont run index.html on (file://) protocol i.e double click on it, use vs code live server or any local server 6 | // Check This Link 7 | // https://stackoverflow.com/questions/52919331/access-to-script-at-from-origin-null-has-been-blocked-by-cors-policy 8 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 159 ] To [ 168 ]/Assignment 8/mod-one.js: -------------------------------------------------------------------------------- 1 | export default function (num1, num2, num3) { 2 | return `${num1 + num2 + num3}`; 3 | } 4 | 5 | // Dont run index.html on (file://) protocol i.e double click on it, use vs code live server or any local server 6 | // Check This Link 7 | // https://stackoverflow.com/questions/52919331/access-to-script-at-from-origin-null-has-been-blocked-by-cors-policy 8 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 159 ] To [ 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 | export let nums = { 5 | numOne: a, 6 | numTwo: b, 7 | numThree: c, 8 | }; 9 | 10 | // Dont run index.html on (file://) protocol i.e double click on it, use vs code live server or any local server 11 | // Check This Link 12 | // https://stackoverflow.com/questions/52919331/access-to-script-at-from-origin-null-has-been-blocked-by-cors-policy 13 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 169 ] To [ 178 ]/Assignment 2.js: -------------------------------------------------------------------------------- 1 | let myReq = new XMLHttpRequest(); 2 | myReq.open("GET", "Assignment 1.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 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 169 ] To [ 178 ]/Assignment 3.js: -------------------------------------------------------------------------------- 1 | let myReq = new XMLHttpRequest(); 2 | myReq.open("GET", "Assignment 1.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 (let i = 0; i < mainData.length; i++) mainData[i].category = "All"; 8 | console.log(mainData); 9 | console.log("#".repeat(60)); // Just a separator 10 | let updatedData = JSON.stringify(mainData); 11 | console.log(updatedData); 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 169 ] To [ 178 ]/Assignment 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | AJAX & JSON - Assignment 2 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 169 ] To [ 178 ]/Assignment 4/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | body { 5 | font-family: sans-serif; 6 | } 7 | #data .article { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | flex-direction: column; 12 | background-color: #e5e5e5; 13 | } 14 | #data .article .author { 15 | color: #b00020; 16 | font-weight: bold; 17 | } 18 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 179 ] To [ 188 ]/Assignment 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Promises - Assignment 1 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 179 ] To [ 188 ]/Assignment 1/main.css: -------------------------------------------------------------------------------- 1 | div { 2 | text-align: center; 3 | margin-block: 25px; 4 | font-family: sans-serif; 5 | } 6 | div h3 { 7 | color: #b00020; 8 | } 9 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 179 ] To [ 188 ]/Assignment 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Promises - Assignment 2 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 179 ] To [ 188 ]/Assignment 2/main.css: -------------------------------------------------------------------------------- 1 | div { 2 | text-align: center; 3 | margin-block: 25px; 4 | font-family: sans-serif; 5 | } 6 | div h3 { 7 | color: #b00020; 8 | } 9 | -------------------------------------------------------------------------------- /Assignments/Assignments From [ 179 ] To [ 188 ]/Assignment 2/master.js: -------------------------------------------------------------------------------- 1 | async function getData(jsonLink) { 2 | try { 3 | const response = await fetch(jsonLink); 4 | const data = await response.json(); 5 | data.length = 5; 6 | for (let i = 0; i < data.length; i++) { 7 | let div = document.createElement("div"); 8 | 9 | let h3 = document.createElement("h3"); 10 | h3.innerHTML = data[i].title; 11 | div.appendChild(h3); 12 | 13 | let p = document.createElement("p"); 14 | p.innerHTML = data[i].description; 15 | div.appendChild(p); 16 | 17 | document.body.appendChild(div); 18 | } 19 | } catch (error) { 20 | document.body.appendChild(document.createTextNode(error)); 21 | } 22 | } 23 | getData("../data.json"); 24 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 01.js: -------------------------------------------------------------------------------- 1 | let fileName = "Elzero.php"; 2 | 3 | function fileNameSplitter(name) { 4 | // Method 1 5 | return `${name.split(".")[0]}\n${name.split(".")[1]}`; 6 | 7 | // Method 2 8 | // return `${name.slice(0, name.indexOf("."))}\n${name.slice(name.indexOf(".") + 1, name.length)}`; 9 | 10 | // Method 3 11 | // return `${name.match(/\w+(?=\.)/)}\n${name.match(/(?<=\.)\w+/)}`; 12 | 13 | // Method 4 14 | // return `${/\w+(?=\.)/.exec(name)[0]}\n${/(?<=\.)\w+/.exec(name)[0]}`; 15 | } 16 | 17 | console.log(fileNameSplitter(fileName)); 18 | // Elzero 19 | // php 20 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 02.js: -------------------------------------------------------------------------------- 1 | function addEl(str) { 2 | if (str === "") return ""; 3 | if (str.startsWith("El")) return str; 4 | return `El${str}`; 5 | } 6 | 7 | console.log(addEl("")); // "" 8 | console.log(addEl("Elzero")); // Elzero 9 | console.log(addEl("zero")); // Elzero -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 03.js: -------------------------------------------------------------------------------- 1 | let myString = "Hello Elzero Web School @ We Love Programming@ @#!@#$%%^&*"; 2 | 3 | function textBeforeSecondAt(str) { 4 | return str.slice(0, str.indexOf("@", str.indexOf("@") + 1)); 5 | } 6 | 7 | console.log(textBeforeSecondAt(myString)); // Hello Elzero Web School @ We Love Programming 8 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 04.js: -------------------------------------------------------------------------------- 1 | function checkRange(n1, n2, n3, n4, n5) { 2 | const max = Math.max(n1, n2, n3); 3 | const min = Math.min(n1, n2, n3); 4 | 5 | if (max >= n4 && min >= n4 && max <= n5 && min <= n5) { 6 | return "Yes, All Numbers Are In Range."; 7 | } else { 8 | return "No, Not All Numbers Are In Range."; 9 | } 10 | } 11 | 12 | console.log(checkRange(5, 10, 15, 5, 50)); // Yes, All Numbers Are Range 13 | console.log(checkRange(8, 4, 20, 2, 50)); // Yes, All Numbers Are Range 14 | console.log(checkRange(10, 15, 20, 5, 18)); // No, Not All Numbers Are In Range -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 05.js: -------------------------------------------------------------------------------- 1 | function replaceFirstWithLast(word) { 2 | return `${word.at(-1)}${word.slice(1, -1)}${word[0]}`; 3 | } 4 | 5 | console.log(replaceFirstWithLast("olzerE")); // Elzero 6 | console.log(replaceFirstWithLast("Hello")); // oellH 7 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 06.js: -------------------------------------------------------------------------------- 1 | function checkBiggestNum(word) { 2 | return Math.max(...word); 3 | } 4 | 5 | console.log(checkBiggestNum("1500654")); // 6 6 | console.log(checkBiggestNum("8509507")); // 9 -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 07.js: -------------------------------------------------------------------------------- 1 | let nums = [20, 100, 50, 10, 15, -20, 30]; 2 | 3 | function getBiggestTwo(numsArr) { 4 | // Method 1 5 | // const biggestNumber = Math.max(...numsArr); 6 | // numsArr.splice(numsArr.indexOf(biggestNumber), 1); 7 | // return [biggestNumber, Math.max(...nums)]; 8 | 9 | // Method 2 10 | return numsArr.sort((a, b) => b - a).slice(0, 2); 11 | } 12 | 13 | console.log(getBiggestTwo(nums)); // [100, 50] 14 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 08.js: -------------------------------------------------------------------------------- 1 | let nums = [10, 80, 85, 25, 30, 88, 15]; 2 | let goal = 100; 3 | 4 | function closestNumber(numsArr, goalNum) { 5 | // Method 1 6 | const numsObj = {}; 7 | for (const num of numsArr) numsObj[goalNum - num] = num; 8 | return ` Closest Number Is ${numsObj[Math.min(...Object.keys(numsObj))]}`; 9 | 10 | // Method 2 11 | // let remainderArr = []; 12 | // for (const num in numsArr) remainderArr.push(goalNum - numsArr[num]); 13 | // return `Closest Number Is ${numsArr[remainderArr.indexOf(Math.min(...remainderArr))]}`; 14 | 15 | // Method 1 is slightly better, because it iterates on the array once, but method 2 iterates twice. 16 | } 17 | 18 | console.log(closestNumber(nums, goal)); 19 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 09.js: -------------------------------------------------------------------------------- 1 | function swapEveryTwoChars(word) { 2 | let result = ""; 3 | 4 | for (let i = 0; i < word.length; i += 2) { 5 | if (word[i] === word[i].toLowerCase()) { 6 | result += word[i].toUpperCase(); 7 | } else { 8 | result += word[i].toLowerCase(); 9 | } 10 | if (word[i + 1]) result += word[i + 1]; 11 | } 12 | 13 | return result; 14 | } 15 | 16 | console.log(swapEveryTwoChars("elZeRo")); // Elzero 17 | console.log(swapEveryTwoChars("heLlO")); // Hello -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 10.js: -------------------------------------------------------------------------------- 1 | String.prototype.elzeroRepeat = function (num) { 2 | let result = ""; 3 | 4 | for (let i = 0; i < num; i++) result += this; 5 | 6 | return result; 7 | }; 8 | 9 | console.log("Elzero ".elzeroRepeat(3)); // Elzero Elzero Elzero 10 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 11.js: -------------------------------------------------------------------------------- 1 | let myMoney = 5301503206; 2 | 3 | function moneyFormatter(money) { 4 | // Method 1 5 | // return money.toString().replace(/\B(?=(\d{3})+\b)/g, ","); 6 | 7 | // Method 2 8 | moneyArr = money.toString().split(""); 9 | for (let i = moneyArr.length - 3; i > 0; i -= 3) moneyArr.splice(i, 0, ","); 10 | return moneyArr.join(""); 11 | 12 | // Method 3 13 | // return money.toLocaleString(); 14 | } 15 | 16 | console.log(moneyFormatter(myMoney)); 17 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 12.js: -------------------------------------------------------------------------------- 1 | let names = ["Osso", "Aola", "Essa", "Igaa", "Daad", "Roor"]; 2 | let result = []; 3 | 4 | function namesFunction(namesArr) { 5 | // Method 1 6 | // for (const index in namesArr) { 7 | // if (namesArr[index][0].toLowerCase() === namesArr[index][namesArr[index].length - 1].toLowerCase()) { 8 | // result.push(namesArr[index]); 9 | // } 10 | // } 11 | 12 | // Method 2 13 | let result = namesArr.filter((name) => name[0].toLowerCase() === name[name.length - 1].toLowerCase()); 14 | 15 | return result 16 | } 17 | 18 | console.log(namesFunction(names)); // ['Osso', 'Aola', 'Daad', 'Roor'] 19 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 13.js: -------------------------------------------------------------------------------- 1 | let theName = "Elzero"; 2 | 3 | console.log(`${theName[0]}${theName[theName.length - 1]}`); // Output => Eo 4 | // We can use theName.at(-1) as well to access the last letter in the string. 5 | 6 | console.log(theName.slice(1, theName.length - 1)); // Output => lzer 7 | console.log(theName.slice(theName.length / 2 - 1, theName.length / 2 + 1)); // Output => ze 8 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 14.js: -------------------------------------------------------------------------------- 1 | function repeatWithRules(word) { 2 | let resultString = ""; 3 | 4 | for (let i = 0; i < word.length; i++) { 5 | resultString += word[i].repeat(i + 1); 6 | } 7 | 8 | return resultString; 9 | } 10 | 11 | console.log(repeatWithRules("Elzero")); // Ellzzzeeeerrrrroooooo 12 | console.log(repeatWithRules("Hello")); // Heelllllllooooo 13 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 15.js: -------------------------------------------------------------------------------- 1 | function concatenateWithoutLast(words) { 2 | return words.map((word) => word.slice(0, -1)).join(" "); 3 | } 4 | 5 | console.log(concatenateWithoutLast(["Elzeros", "Webd", "Schoold"])); // Elzero Web School 6 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 16.js: -------------------------------------------------------------------------------- 1 | function getCharacters(word, num) { 2 | return word.slice(0, num) + word.slice(-num); 3 | } 4 | 5 | console.log(getCharacters("Elzero School", 2)); // Elol 6 | console.log(getCharacters("Elzero School", 3)); // Elzool 7 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 17.js: -------------------------------------------------------------------------------- 1 | function formatName(theName) { 2 | // Method 1 3 | let nameSegments = theName.split(" "); 4 | let resultString = `${nameSegments[0][0].toUpperCase()}`; 5 | 6 | for (let i = 1; i < nameSegments.length; i++) { 7 | resultString += `.${nameSegments[i][0].toLowerCase()}`; 8 | } 9 | 10 | return resultString; 11 | 12 | // Method 2 13 | // return theName 14 | // .split(" ") 15 | // .map((segment) => segment[0]) 16 | // .map((letter, index) => (index ? letter.toLowerCase() : letter)) 17 | // .join("."); 18 | } 19 | 20 | console.log(formatName("Osama Elzero")); // O.e 21 | console.log(formatName("Elzero Web School")); // E.w.s 22 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 18.js: -------------------------------------------------------------------------------- 1 | let st = "elzero"; 2 | 3 | console.log(st[0].toUpperCase() + st.slice(1)); // Elzero 4 | console.log(st.charAt(0).toUpperCase() + st.substring(1)); // Elzero 5 | console.log(st.at(0).toUpperCase() + st.substr(1)); // Elzero 6 | console.log(st.split("").map((letter, index) => (index === 0 ? letter.toUpperCase() : letter)).join("")); // Elzero 7 | console.log(st.replace(/^./, st[0].toUpperCase())); // Elzero 8 | console.log(st.split("", 1).join().toUpperCase().concat(st.slice(1))); // Elzero 9 | console.log(st.split("").shift().toUpperCase() + st.substring(1)); // Elzero 10 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 19.js: -------------------------------------------------------------------------------- 1 | let st = "Web SchoolElzero "; 2 | 3 | // Method 1 4 | console.log(st.slice(-7) + st.slice(-st.length, -7)); // "Elzero Web School" 5 | 6 | // Method 2 7 | console.log(st.slice(-7, -1) + st.slice(-1) + st.slice(-st.length, -13) + st.slice(-13, -7)); // "Elzero Web School" 8 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 20.js: -------------------------------------------------------------------------------- 1 | let st = "Elzero"; 2 | 3 | console.log(st.at(-1)); // o 4 | console.log(st.charAt(st.length - 1)); // o 5 | console.log(st[st.length - 1]); // o 6 | console.log(st.slice(-1)); // o 7 | console.log(st.slice(st.length - 1)); // o 8 | console.log(st.split("").pop()); // o 9 | console.log(st.split("").reverse().shift()); // o 10 | console.log(/.$/.exec(st)[0]); // o 11 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 21.js: -------------------------------------------------------------------------------- 1 | function getLastDigit(num) { 2 | return Number(String(num).at(-1)); 3 | } 4 | 5 | console.log(getLastDigit(1)); // 1 6 | console.log(getLastDigit(18)); // 8 7 | console.log(getLastDigit(305)); // 5 8 | console.log(getLastDigit(1569)); // 9 9 | console.log(typeof getLastDigit(1569)); // Number 10 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 22.js: -------------------------------------------------------------------------------- 1 | let str1 = "AElzero"; 2 | let str2 = "ZAcademy"; 3 | 4 | console.log(str1.slice(1) + " " + str2.slice(1)); // Elzero Academy 5 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 23.js: -------------------------------------------------------------------------------- 1 | function reversing(str) { 2 | return str.replace(/\w+/g, (el) => el.split("").reverse("").join("")); 3 | } 4 | 5 | console.log(reversing(",@Hello, E@lzero")); // ,@olleH, E@orezl 6 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 25.js: -------------------------------------------------------------------------------- 1 | let myArr = [10, 10, 20, 20, 10, 30, 50, 20, 10]; 2 | 3 | // Method 1 4 | myArr.length = 0; 5 | console.log(myArr); // [] 6 | 7 | // Method 2 8 | myArr = []; 9 | console.log(myArr); // [] 10 | 11 | // Method 3 12 | myArr = [10, 10, 20, 20, 10, 30, 50, 20, 10]; 13 | myArr.splice(0, myArr.length); 14 | console.log(myArr); // [] 15 | 16 | // Method 4 17 | while (myArr.length > 0) myArr.pop(); 18 | console.log(myArr); // [] 19 | 20 | // Method 5 21 | while (myArr.length > 0) myArr.shift(); 22 | console.log(myArr); // [] 23 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 26.js: -------------------------------------------------------------------------------- 1 | let myArr = [10, 10, 20, 20, 10, 30, 50, 20, 10]; 2 | 3 | // Method 1 4 | let arrayOne = [...new Set(myArr)]; 5 | console.log(arrayOne); // [10, 20, 30, 50] 6 | 7 | // Method 2 8 | let arrayTwo = myArr.filter((num, index) => myArr.indexOf(num) === index); 9 | console.log(arrayTwo); // [10, 20, 30, 50] 10 | 11 | // Method 3 12 | let arrayThree = []; 13 | for (item of myArr) if (!arrayThree.includes(item)) arrayTwo.push(item); 14 | console.log(arrayThree); // [10, 20, 30, 50] 15 | 16 | // Method 4 17 | let arrayFour = []; 18 | myArr.forEach((num) => (!arrayFour.includes(num) ? arrayFour.push(num) : "")); 19 | console.log(arrayFour); // [10, 20, 30, 50] 20 | 21 | // Method 5 22 | let arrayFive = myArr.reduce((unique, num) => { 23 | return unique.includes(num) ? unique : [...unique, num]; 24 | }, []); 25 | console.log(arrayFive); // [10, 20, 30, 50] 26 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 27.js: -------------------------------------------------------------------------------- 1 | let myArr = [69, 108, 122, 101, 114, 111]; 2 | 3 | let result = myArr.map((code) => String.fromCharCode(code)).join(""); 4 | 5 | console.log(result); // Elzero 6 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 28.js: -------------------------------------------------------------------------------- 1 | function customMerge(...arrays) { 2 | let result = []; 3 | 4 | for (let array of arrays) { 5 | for (let item of array) result.push(+item); 6 | } 7 | 8 | return result.sort((a, b) => a - b); // To sort numbers ascendingly 9 | } 10 | 11 | console.log(customMerge([10, 20, "30", 1000], [100, "50", 20], [90, 20, "40", 10])); // [10, 10, 20, 20, 20, 30, 40, 50, 90, 100, 1000] 12 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 29.js: -------------------------------------------------------------------------------- 1 | function customCalc(...values) { 2 | // Method 1 3 | let result = 0; 4 | 5 | for (let element of values) { 6 | if (parseInt(element)) result += parseInt(element); 7 | } 8 | 9 | result *= values[0] * values[values.length - 1]; 10 | 11 | return result; 12 | 13 | // Method 2 14 | // let resultSum = items.reduce( 15 | // (acc, el) => (isNaN(parseInt(el)) ? acc : acc + +el), 16 | // 0 17 | // ); 18 | // let result = resultSum * +items[0] * +items.at(-1); 19 | // return result; 20 | } 21 | 22 | console.log(customCalc("10", 20, "A", "40", 15)); 23 | // 12750 <= (10 + 20 + 40 + 15) * 10 * 15 24 | 25 | console.log(customCalc(5, "15", 10, 5, 10)); 26 | // 2250 <= (5 + 15 + 10 + 5 + 10) * 5 * 10 27 | 28 | console.log(customCalc(30, 5, "C", 10)); 29 | // 13500 <= (30 + 5 + 10) * 30 * 10 30 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 30.js: -------------------------------------------------------------------------------- 1 | for (let i = 1; i < 100; i += 5) { 2 | // Your Code Here (Do NOT edit the for loop header) 3 | 4 | // Method 1 5 | // if (i.toString().endsWith("1")) console.log(i); 6 | 7 | // Method 2 8 | if (i % 2 !== 0) console.log(i); 9 | 10 | // Method 3 11 | // if (i % 2 === 0) continue; 12 | // console.log(i); 13 | } 14 | 15 | // Output Needed: 16 | // 1 17 | // 11 18 | // 21 19 | // 31 20 | // 41 21 | // 51 22 | // 61 23 | // 71 24 | // 81 25 | // 91 26 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 31.js: -------------------------------------------------------------------------------- 1 | let myArray = [100, 200, 300, 400]; 2 | 3 | // Method 1 4 | let clonedArray = [...myArray]; 5 | 6 | // Method 2 7 | // let clonedArray = Array.from(myArray); 8 | 9 | // Method 3 10 | // let clonedArray = myArray.map(el => el); 11 | 12 | // Method 4 13 | // let clonedArray = myArray.filter(el => el); 14 | 15 | // Method 5 16 | // let clonedArray = myArray.flat(); 17 | 18 | // Method 6 19 | // let clonedArray = myArray.concat([]); 20 | 21 | // Method 7 22 | // let clonedArray = Object.values(myArray); 23 | 24 | // Method 8 25 | // let clonedArray = myArray.toString().split(","); 26 | 27 | // Method 9 28 | // let clonedArray = []; 29 | // for (let item of myArray) clonedArray.push(item); 30 | 31 | console.log(clonedArray); // [100, 200, 300, 400] 32 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 32.js: -------------------------------------------------------------------------------- 1 | let strNumber = "10"; 2 | 3 | // Method 1 4 | console.log(strNumber * 1); // 10 5 | console.log(strNumber - 0); // 10 <= Same Solution 6 | 7 | // Method 2 8 | console.log(parseInt(strNumber)); // 10 9 | console.log(typeof parseInt(strNumber)); // number 10 | 11 | // Method 3 12 | console.log(+strNumber); // 10 13 | console.log(typeof +strNumber); // number 14 | 15 | // Method 4 16 | console.log(Number(strNumber)); // 10 17 | console.log(typeof Number(strNumber)); // number 18 | 19 | // Method 5 20 | console.log(Math.abs(strNumber)); // 10 21 | console.log(typeof Math.abs(strNumber)); // number 22 | 23 | // Method 6 24 | console.log(eval(strNumber)); // 10 25 | console.log(typeof eval(strNumber)); // number 26 | 27 | // Method 7 28 | console.log(Function(`return ${strNumber}`)()); // 10 29 | console.log(typeof Function(`return ${strNumber}`)()); // number 30 | 31 | // Method 8 32 | console.log(strNumber++); // 10 33 | console.log(typeof strNumber++); // number 34 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 33.js: -------------------------------------------------------------------------------- 1 | console.log( 2 | "%cElzero Web School", 3 | "background-color: #0075FF; color:#fff; padding:20px; font-size: 18px" 4 | ); 5 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 34.js: -------------------------------------------------------------------------------- 1 | let arr = [1, 1, 1, 2, 3, 4, 3]; 2 | 3 | // Method 1 4 | let arrayOne = [...new Set(arr)]; 5 | console.log(arrayOne); // [1, 2, 3, 4] 6 | 7 | // Method 2 8 | let arrayTwo = arr.filter((num, index) => arr.indexOf(num) === index); 9 | console.log(arrayTwo); // [1, 2, 3, 4] 10 | 11 | // Method 3 12 | let arrayThree = []; 13 | for (item of arr) if (!arrayThree.includes(item)) arrayTwo.push(item); 14 | console.log(arrayThree); // [1, 2, 3, 4] 15 | 16 | // Method 4 17 | let arrayFour = []; 18 | arr.forEach((num) => (!arrayFour.includes(num) ? arrayFour.push(num) : "")); 19 | console.log(arrayFour); // [1, 2, 3, 4] 20 | 21 | // Method 5 22 | let arrayFive = arr.reduce((unique, num) => { 23 | return unique.includes(num) ? unique : [...unique, num]; 24 | }, []); 25 | console.log(arrayFive); // [1, 2, 3, 4] 26 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 35.js: -------------------------------------------------------------------------------- 1 | let serial = ""; 2 | const serialLength = 20; 3 | const availableChars = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; 4 | 5 | for (let i = 0; i < serialLength; i++) { 6 | serial += availableChars[Math.floor(Math.random() * availableChars.length)]; 7 | } 8 | 9 | console.log(serial); 10 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 36.js: -------------------------------------------------------------------------------- 1 | let smallLetters = []; 2 | 3 | for (let i = 97; i <= 122; i++) { 4 | smallLetters.push(String.fromCharCode(i)); 5 | } 6 | 7 | console.log(smallLetters.join("")); 8 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 37.js: -------------------------------------------------------------------------------- 1 | let numOne = 100; 2 | let numTwo = 200; 3 | 4 | // Convert to ternary operator 5 | if (numOne > numTwo) { 6 | console.log("1st > 2nd"); 7 | } else if (numOne < numTwo) { 8 | console.log("1st < 2nd"); 9 | } else { 10 | console.log("1st = 2nd"); 11 | } 12 | 13 | // Output: 1st < 2nd 14 | 15 | // Solution 16 | numOne > numTwo 17 | ? console.log("1st > 2nd") 18 | : numOne < numTwo 19 | ? console.log("1st < 2nd") 20 | : console.log("1st = 2nd"); 21 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 38.js: -------------------------------------------------------------------------------- 1 | let str = "i lovE elzeRO weB schOOL"; 2 | 3 | str = str.split(" "); 4 | for (let i = 0; i < str.length; i++) { 5 | str[i] = str[i][0].toUpperCase() + str[i].substring(1).toLowerCase(); 6 | } 7 | str = str.join(" "); 8 | 9 | console.log(str); // "I Love Elzero Web School" 10 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 39.js: -------------------------------------------------------------------------------- 1 | let myData = ["Osama", "Mohamed", "Elsayed", "Elzero"]; 2 | 3 | // Write Your Code Here To Prevent Adding Elements 4 | Object.freeze(myData); 5 | 6 | myData.push("Name"); 7 | console.log(myData); // ['Osama', 'Mohamed', 'Elsayed', 'Elzero'] 8 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 40.js: -------------------------------------------------------------------------------- 1 | const myData = { 2 | user: "Elzero", 3 | age: 41, 4 | country: "Egypt", 5 | }; 6 | 7 | // Write Your Code Here To Prevent Adding Anything 8 | Object.freeze(myData); 9 | 10 | myData.skill = "Programming"; 11 | 12 | console.log(myData.user); // Elzero 13 | console.log(myData.age); // 41 14 | console.log(myData.country); // Egypt 15 | console.log(myData.skill); // Undefined 16 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 41.js: -------------------------------------------------------------------------------- 1 | const myData = { 2 | user: "Elzero", 3 | age: 41, 4 | country: "Egypt", 5 | }; 6 | 7 | // Method 1 8 | const cloned = { ...myData }; 9 | 10 | // Method 2 11 | // const cloned = Object.assign({}, myData); 12 | 13 | // Method 3 14 | // const cloned = {}; 15 | // Object.keys(myData).forEach((el, inx) => (cloned[el] = Object.values(myData)[inx])); 16 | 17 | // Method 4 18 | // const cloned = {}; 19 | // for (let prop in myData) cloned[prop] = myData[prop]; 20 | 21 | // Method 5 22 | // const cloned = JSON.parse(JSON.stringify(myData)); 23 | 24 | console.log(cloned); // {user: 'Elzero', age: 41, country: 'Egypt'} 25 | console.log(cloned === myData); // false 26 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 42/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Miscellaneous Assignments | Assignment 42 7 | 8 | 9 |

Press Ctrl Alt Shift and check the console!

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 42/master.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("keydown", (e) => { 2 | if (e.key === "Alt" && e.ctrlKey && e.shiftKey) { 3 | console.log("You Pressed Ctrl + Alt + Shift"); 4 | } 5 | }); 6 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 43/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Miscellaneous Assignments | Assignment 43 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
Repository NameStarsVisit Link
20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 43/main.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 800px; 3 | margin: 20px auto; 4 | background-color: #fdfdfd; 5 | text-align: center; 6 | } 7 | table td { 8 | padding: 15px; 9 | border: 1px solid #ccc; 10 | } 11 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 44.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PhilopaterHany/JavaScript-Bootcamp/ec4ccbe0ae95762fa39a34dc2567cab29f6e15ac/Assignments/Miscellaneous Assignments/Assignment 44.js -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 45.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PhilopaterHany/JavaScript-Bootcamp/ec4ccbe0ae95762fa39a34dc2567cab29f6e15ac/Assignments/Miscellaneous Assignments/Assignment 45.js -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 46.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PhilopaterHany/JavaScript-Bootcamp/ec4ccbe0ae95762fa39a34dc2567cab29f6e15ac/Assignments/Miscellaneous Assignments/Assignment 46.js -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 47/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Miscellaneous Assignments | Assignment 47 7 | 8 | 9 | 10 |
11 |
Enter Your Text
12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 47/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | display: grid; 8 | place-items: center; 9 | height: 100vh; 10 | } 11 | .form { 12 | background-color: #ddd; 13 | width: 500px; 14 | padding: 25px; 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: space-between; 18 | gap: 20px; 19 | } 20 | textarea { 21 | height: 200px; 22 | padding: 10px; 23 | resize: none; 24 | outline: none; 25 | border: none; 26 | } 27 | button { 28 | width: fit-content; 29 | padding: 5px; 30 | cursor: pointer; 31 | } 32 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 47/master.js: -------------------------------------------------------------------------------- 1 | const textAreaElement = document.querySelector(".form textarea"); 2 | const btnElement = document.querySelector(".form button"); 3 | 4 | const saveTextToFile = () => { 5 | const textFileAsBlob = new Blob([textAreaElement.value], { 6 | type: "text/plain", 7 | }); 8 | 9 | const linkElement = document.createElement("a"); 10 | linkElement.download = "saved-file.txt"; 11 | linkElement.href = URL.createObjectURL(textFileAsBlob); 12 | document.body.appendChild(linkElement); 13 | 14 | linkElement.click(); 15 | 16 | document.body.removeChild(linkElement); 17 | 18 | URL.revokeObjectURL(linkElement.href); 19 | }; 20 | 21 | btnElement.addEventListener("click", saveTextToFile); 22 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 48.js: -------------------------------------------------------------------------------- 1 | function createStars(num) { 2 | let stars = ""; 3 | let counter = 0; 4 | 5 | for (let i = 1; i <= num; i++) { 6 | stars += `${"*".repeat(i + counter)}\n`; 7 | counter++; 8 | } 9 | 10 | return stars; 11 | } 12 | 13 | console.log(createStars(8)); 14 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 49.js: -------------------------------------------------------------------------------- 1 | function createStars(num) { 2 | let stars = ""; 3 | let counter = 0; 4 | 5 | for (let i = 1; i <= num; i++) { 6 | stars += `${"*".repeat(i + counter)}\n`; 7 | counter++; 8 | } 9 | 10 | for (let i = 1; i <= num; i++) { 11 | stars += `${"*".repeat(counter - i)}\n`; 12 | } 13 | 14 | return stars; 15 | } 16 | 17 | console.log(createStars(3)); 18 | // Output Needed: 19 | // * 20 | // *** 21 | // ***** 22 | // *** 23 | // * 24 | 25 | console.log(createStars(7)); 26 | // Output Needed: 27 | // * 28 | // *** 29 | // ***** 30 | // ******* 31 | // ********* 32 | // *********** 33 | // ************* 34 | // *********** 35 | // ********* 36 | // ******* 37 | // ***** 38 | // *** 39 | // * 40 | -------------------------------------------------------------------------------- /Assignments/Miscellaneous Assignments/Assignment 50.js: -------------------------------------------------------------------------------- 1 | function createStars(num) { 2 | const maxWidth = 2 * num - 1; 3 | let result = ""; 4 | 5 | for (let i = num; i >= 1; i--) { 6 | let stars = "*".repeat(i * 2 - 1); 7 | let spaces = " ".repeat((maxWidth - (i * 2 - 1)) / 2); 8 | result += spaces + stars + spaces + "\n"; 9 | } 10 | for (let i = 1; i <= num; i++) { 11 | let stars = "*".repeat(i * 2 - 1); 12 | let spaces = " ".repeat((maxWidth - (i * 2 - 1)) / 2); 13 | result += spaces + stars + spaces + "\n"; 14 | } 15 | 16 | return result; 17 | } 18 | 19 | console.log(createStars(6)); 20 | // Output Needed: 21 | // *********** 22 | // ********* 23 | // ******* 24 | // ***** 25 | // *** 26 | // * 27 | // * 28 | // *** 29 | // ***** 30 | // ******* 31 | // ********* 32 | // *********** 33 | -------------------------------------------------------------------------------- /Lessons/Week 01/001 - Introduction And What Is JavaScript.js: -------------------------------------------------------------------------------- 1 | // PowerPoint Slide 2 | // https://drive.google.com/file/d/1TBluk4PXkNGaRoshZkWVZPSJ7B1qXC30/view -------------------------------------------------------------------------------- /Lessons/Week 01/002 - How To Study The Course.js: -------------------------------------------------------------------------------- 1 | // PowerPoint Slide 2 | // https://drive.google.com/file/d/1I7qjqe7Yd_-jfRWF7EtRbal8YbkdXpUi/view -------------------------------------------------------------------------------- /Lessons/Week 01/003 - Setting Up Environment And Tools.js: -------------------------------------------------------------------------------- 1 | /* 2 | Extensions: 3 | - Bracket Pair Colorizer 2 4 | - Editor Config 5 | - EsLint 6 | - GitLens 7 | - Indent Rainbow 8 | - Live Server 9 | - Material Icon Theme 10 | - Path Intellisense 11 | - Prettier 12 | - VS Code Icons 13 | VS Code Tips & Tricks: 14 | https://www.youtube.com/watch?v=UuBRd7GeARg 15 | */ 16 | -------------------------------------------------------------------------------- /Lessons/Week 01/004 - Work With Chrome Developer Tools.js: -------------------------------------------------------------------------------- 1 | /* 2 | Resources For Chrome Dev Tools: 3 | - https://developer.chrome.com/docs/devtools/ 4 | - https://www.keycdn.com/blog/chrome-devtools 5 | - https://www.bitdegree.org/learn/chrome-developer-tools 6 | Chrome Dev Tools Tips & Tricks: 7 | https://www.youtube.com/watch?v=_IKTGQosYMo&list=PLDoPjvoNmBAz30MJ4-4lxhmu668bFTcoj&index=20 8 | */ 9 | -------------------------------------------------------------------------------- /Lessons/Week 01/005 - Where To Put The Code.js: -------------------------------------------------------------------------------- 1 | /* 2 | Resources: 3 | - https://developer.yahoo.com/performance/rules.html?guccounter=2&guce_referrer=aHR0cHM6Ly9lbHplcm8ub3JnLw&guce_referrer_sig=AQAAAFWX7xv44e5ey5OJkbuonXxV7i0t-PbKtii-wMQht0vutJT9KooQCoq2c9XtTzylR_ZDs_e4DrS74lNSz6VHm7t5h7VItB8qJB40DzYlq_QRfwTC2ouIeDIa0ho6SGWmpvm5Sl7rYragd-mU84nTaO9z1xqWnGlBR9NLBcc75sna 4 | - https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async 5 | */ 6 | -------------------------------------------------------------------------------- /Lessons/Week 01/006 - Comments And Bad Practice.js: -------------------------------------------------------------------------------- 1 | // Wait The Window To Load 2 | window.onload = function () { 3 | // Single Line Comment 4 | document.querySelector("h1").style.color = "Blue"; // Single Line Comment 5 | }; 6 | 7 | // Single Line Comment 8 | // Single Line Comment 9 | // Single Line Comment 10 | 11 | /* Single Line Comment */ 12 | 13 | /* 14 | Multiple Line Comment 15 | 1 16 | 2 17 | 3 18 | 4 19 | 5 20 | */ 21 | 22 | // Hotkey For Commenting The Selected Line => Ctrl + / 23 | -------------------------------------------------------------------------------- /Lessons/Week 01/007 - Output To Screen.js: -------------------------------------------------------------------------------- 1 | /* 2 | Output To Screen 3 | - window.alert() 4 | - document.write() 5 | - console.log() 6 | 7 | Syntax Of Each Of Them 8 | */ 9 | 10 | window.alert("Hello From JS File"); 11 | 12 | document.write("

Hello Page

"); 13 | 14 | console.log("Hello From JS File"); 15 | -------------------------------------------------------------------------------- /Lessons/Week 01/008 - Console Methods & Styling And Web API.js: -------------------------------------------------------------------------------- 1 | /* 2 | Console Methods 3 | - log 4 | - error 5 | - table 6 | 7 | Web API 8 | - Resources => https://developer.mozilla.org/en-US/docs/Web/API 9 | 10 | Styling Console 11 | - Directive %c 12 | */ 13 | 14 | console.log("Log"); 15 | console.error("Error"); 16 | console.table(["Osama", "Ahmed", "Sayed"]); 17 | 18 | console.log( 19 | "Hello From %cJS %cFile", 20 | "color: red; font-size: 40px", 21 | "color: blue; font-size: 40px" 22 | ); 23 | -------------------------------------------------------------------------------- /Lessons/Week 01/009 - What Is ECMAScript.js: -------------------------------------------------------------------------------- 1 | /* 2 | ES6 => ECMAScript 6 3 | - https://www.ecma-international.org/ 4 | - http://es6-features.org/#Constants 5 | - https://babeljs.io/repl/#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.15.3&externalPlugins=&assumptions=%7B%7D 6 | - https://en.wikipedia.org/wiki/ECMAScript 7 | */ 8 | 9 | var myName = "Osama"; 10 | 11 | console.log("Hello " + myName); 12 | console.log(`Hello ${myName}`); 13 | -------------------------------------------------------------------------------- /Lessons/Week 02/010 - Data Types & typeof Operator.js: -------------------------------------------------------------------------------- 1 | /* 2 | Data Types Intro 3 | - String 4 | - Number 5 | - Array => Object 6 | - Object 7 | - Boolean 8 | */ 9 | 10 | console.log("Osama Mohamed"); 11 | console.log(typeof "Osama Mohamed"); 12 | console.log(typeof 5000); 13 | console.log(typeof 5000.99); 14 | console.log(typeof [10, 15, 17]); 15 | console.log(typeof { name: "Osama", age: 17, country: "Eg" }); 16 | console.log(typeof true); 17 | console.log(typeof false); 18 | console.log(typeof undefined); 19 | console.log(typeof null); 20 | -------------------------------------------------------------------------------- /Lessons/Week 02/011 - Variables Introduction.js: -------------------------------------------------------------------------------- 1 | /* 2 | Variables Intro 3 | - What Is Variable ? 4 | - Why We Use Variables ? 5 | - Declare A Variable And Use 6 | - Syntax ( Keyword | Variable Name | Assignment Operator | Variable Value ) 7 | - Variable Without Var 8 | - Multiple Variables In The Same Line 9 | - ID And Global Variable 10 | - Loosely Typed vs Strongly Typed 11 | */ 12 | 13 | var user = "Sayed"; 14 | console.log(user); 15 | -------------------------------------------------------------------------------- /Lessons/Week 02/012 - Identifiers Name Conventions & Rules.js: -------------------------------------------------------------------------------- 1 | /* 2 | Identifiers 3 | - Name Conventions And Rules 4 | - Reserved Words 5 | */ 6 | 7 | var userName = "Sayed"; 8 | console.log(userName); 9 | -------------------------------------------------------------------------------- /Lessons/Week 02/013 - Var, Let, Const Compare.js: -------------------------------------------------------------------------------- 1 | /* 2 | Var 3 | - Redeclare (Yes) 4 | - Update (Yes) 5 | - Access Before Declare (Undefined) 6 | - Variable Scope Drama [Added To Window] () 7 | - Block Or Scope Function 8 | 9 | Let 10 | - Redeclare (No => Error) 11 | - Update (Yes) 12 | - Access Before Declare (Error) 13 | - Variable Scope Drama () 14 | - Block Or Scope Function 15 | 16 | Const 17 | - Redeclare (No => Error) 18 | - Update (No) 19 | - Access Before Declare (Error) 20 | - Variable Scope Drama () 21 | - Block Or Scope Function 22 | */ 23 | -------------------------------------------------------------------------------- /Lessons/Week 02/014 - String Syntax & Characters Escape Sequences.js: -------------------------------------------------------------------------------- 1 | /* 2 | String Syntax + Character Escape Sequences 3 | \ Escape + Line Continue 4 | \n 5 | */ 6 | 7 | console.log('Elzero Web "School"'); 8 | console.log("Elzero Web 'School'"); 9 | console.log('Elzero Web "School"'); 10 | console.log("Elzero \\ Web 'School'"); 11 | console.log("Elzero \ 12 | Web \ 13 | School"); 14 | console.log("Elzero\nWeb\nSchool"); 15 | -------------------------------------------------------------------------------- /Lessons/Week 02/015 - Concatenation.js: -------------------------------------------------------------------------------- 1 | /* 2 | Concatenation 3 | */ 4 | 5 | let a = "We Love"; 6 | let b = "JavaScript"; 7 | 8 | document.write(a + " " + b); 9 | console.log(a, b); 10 | -------------------------------------------------------------------------------- /Lessons/Week 02/016 - Template Literals (Template Strings).js: -------------------------------------------------------------------------------- 1 | /* 2 | Template Literals (Template Strings) 3 | */ 4 | // First Example 5 | let a = "We Love"; 6 | let b = "JavaScript"; 7 | let c = "And"; 8 | let d = "Programming"; 9 | 10 | console.log((a = ' "" ' + b + "\n" + c + " " + d)); 11 | 12 | console.log(`${a} "" '' \\ ${b} 13 | ${c} ${d}`); 14 | 15 | // Second Example 16 | let title = "Elzero"; 17 | let desc = "Elzero Web School"; 18 | 19 | let markup = ` 20 |
21 |
22 |

${title}

23 |

${desc}

24 |
25 |
26 | `; 27 | document.write(markup); 28 | -------------------------------------------------------------------------------- /Lessons/Week 02/017 - Variable & Concatenation Challenge.js: -------------------------------------------------------------------------------- 1 | /* 2 | =========================================== 3 | == Variables And Concatenation Challenge == 4 | =========================================== 5 | 6 | [1] Create 3 Variables [Title, Desctiption, Date] 7 | -- All In One Statement 8 | -- Variable Name Must Be Two Words 9 | -- Title Content Is "Elzero" 10 | -- Description Content Is "Elzero Web School" 11 | -- Date Content Is "25/10" 12 | [2] Create Variable Contains Div And This Div Contains 13 | -- H3 For Title 14 | -- P For Paragraph 15 | -- Span For Time 16 | [3] Add This Card To Page 4 Times 17 | [4] Use Template Literals For Concatenate 18 | 19 | Extra 20 | - Use ES6 Repeat 21 | - Style It With CSS (Optional) 22 | */ 23 | -------------------------------------------------------------------------------- /Lessons/Week 03/018 - Arithmetic Operators.js: -------------------------------------------------------------------------------- 1 | /* 2 | Arithmetic Operators 3 | + Addition 4 | - Subtraction 5 | * Multiplication 6 | / Division 7 | ** Exponentiation (Power) => (ES7) 8 | % Modulus (Division Remainder) 9 | ++ Increment [ Pre / Post ] 10 | -- Decrement [ Pre / Post ] 11 | */ 12 | 13 | console.log(10 + 20); 14 | console.log(10 + "Osama"); 15 | 16 | console.log(10 - 20); 17 | console.log(10 - "Osama"); // NaN 18 | console.log(typeof NaN); 19 | 20 | console.log(10 * 20); 21 | console.log(10 * -20); 22 | 23 | console.log(20 / 5); 24 | console.log(20 / 3); 25 | 26 | console.log(2 ** 4); 27 | console.log(2 * 2 * 2 * 2); 28 | 29 | console.log(10 % 2); 30 | console.log(11 % 2); // Remove 1 31 | -------------------------------------------------------------------------------- /Lessons/Week 03/019 - Unary Plus & Negation Operators.js: -------------------------------------------------------------------------------- 1 | /* 2 | => + Unary Plus [Return Number If Its Not Number] 3 | => - Unary Negation [Return Number If Its Not Number + Negates It] 4 | => Tests 5 | - Normal Number 6 | - String Number 7 | - String Negative Number 8 | - String Text 9 | - Float 10 | - Hexadecimal Numeral System => 0xFF 11 | - null 12 | - false 13 | - true 14 | */ 15 | 16 | console.log(+100); 17 | console.log(+"100"); 18 | console.log(+"-100"); 19 | console.log(+"Osama"); 20 | console.log(+"15.5"); 21 | console.log(+0xff); 22 | console.log(+null); 23 | console.log(+false); 24 | console.log(+true); 25 | 26 | console.log(-100); 27 | console.log(-"100"); 28 | console.log(-"-100"); 29 | console.log(-"Osama"); 30 | console.log(-"15.5"); 31 | console.log(-0xff); 32 | console.log(-null); 33 | console.log(-false); 34 | console.log(-true); 35 | 36 | console.log(Number("100")); 37 | -------------------------------------------------------------------------------- /Lessons/Week 03/020 - Type Coercion.js: -------------------------------------------------------------------------------- 1 | /* 2 | Type Coercion (Type Casting) 3 | + 4 | - 5 | "" - 2 6 | false - true 7 | */ 8 | 9 | let a = "100"; 10 | let b = 20; 11 | let c = true; 12 | 13 | console.log(+a + b + c); 14 | -------------------------------------------------------------------------------- /Lessons/Week 03/021 - Assignment Operators.js: -------------------------------------------------------------------------------- 1 | /* 2 | Assignment Operators 3 | */ 4 | let a = 10; 5 | 6 | a = a + 20; 7 | a = a + 70; 8 | a += 100; // => a = a + 100 9 | a -= 50; // => a = a - 50 10 | a /= 50; // => a = a / 50 11 | -------------------------------------------------------------------------------- /Lessons/Week 03/022 - Operators Challenges.js: -------------------------------------------------------------------------------- 1 | /* 2 | Challenge 1 3 | */ 4 | 5 | let a = 10; 6 | let b = "20"; 7 | let c = 80; 8 | 9 | console.log(++a + +b++ + +c++ - +a++); 10 | console.log(++a + -b + +c++ - -a++ + +a); 11 | console.log(--c + +b + --a * +b++ - +b * a + --a - +true); 12 | 13 | /* 14 | [++a] [+] 15 | [++a] 16 | - Value: 17 | - Explain: 18 | [+] 19 | - Explain: 20 | */ 21 | 22 | /* 23 | Challenge 2 24 | */ 25 | 26 | let d = "-100"; 27 | let e = "20"; 28 | let f = 30; 29 | let g = true; 30 | 31 | // Only Use Variables Value 32 | // Do Not Use Variable Twice 33 | 34 | console.log(); // 2000 35 | console.log(); // 173 36 | -------------------------------------------------------------------------------- /Lessons/Week 04/023 - Number.js: -------------------------------------------------------------------------------- 1 | /* 2 | Number 3 | - Double Precision 4 | - Syntactic Sugar "_" 5 | - e 6 | - ** 7 | - With Decimal 8 | - Number + BigInt 9 | - Number Min Value 10 | - Number Max Value 11 | */ 12 | 13 | console.log(1000000); 14 | console.log(1_000_000); 15 | console.log(1e6); 16 | console.log(10 ** 6); 17 | console.log(10 * 10 * 10 * 10 * 10 * 10); 18 | console.log(1000000.0); 19 | 20 | console.log(Number.MAX_SAFE_INTEGER); 21 | console.log(Number.MAX_VALUE); 22 | console.log(Number.MAX_VALUE + 23434343434); 23 | -------------------------------------------------------------------------------- /Lessons/Week 04/024 - Number Methods.js: -------------------------------------------------------------------------------- 1 | /* 2 | Number Methods 3 | - Two Dots To Call A Method 4 | - toString() 5 | - toFixed() 6 | - parseInt() 7 | - parseFloat() 8 | - isInteger() [ES6] 9 | - isNaN() [ES6] 10 | */ 11 | 12 | console.log((100).toString()); 13 | console.log((100.1).toString()); 14 | 15 | console.log((100.554555).toFixed(2)); 16 | 17 | console.log(Number("100 Osama")); 18 | console.log(+"100 Osama"); 19 | console.log(parseInt("100 Osama")); 20 | console.log(parseInt("Osama 100 Osama")); 21 | console.log(parseInt("100.500 Osama")); 22 | console.log(parseFloat("100.500 Osama")); 23 | 24 | console.log(Number.isInteger("100")); 25 | console.log(Number.isInteger(100.5)); 26 | console.log(Number.isInteger(100)); 27 | 28 | console.log(Number.isNaN("Osama" / 20)); 29 | -------------------------------------------------------------------------------- /Lessons/Week 04/025 - Math Object.js: -------------------------------------------------------------------------------- 1 | /* 2 | Math Object 3 | - round() => Normal Math Aproximation 4 | - ceil() => Remove Decimal And Add One To The Number 5 | - floor() => Remove Decimal 6 | - min() => Gets the Smallest Number 7 | - max() => Gets The Biggest Number 8 | - pow() => Power (Math.pow(2, 3) = 2 Power 3 = 8) 9 | - random() => Generates Random Number 10 | - trunc() [ES6] => Remove Decimal 11 | */ 12 | 13 | console.log(Math.round(99.2)); 14 | console.log(Math.round(99.5)); 15 | 16 | console.log(Math.ceil(99.2)); 17 | console.log(Math.floor(99.9)); 18 | 19 | console.log(Math.min(10, 20, 100, -100, 90)); 20 | console.log(Math.max(10, 20, 100, -100, 90)); 21 | 22 | console.log(Math.pow(2, 4)); 23 | console.log(Math.random()); 24 | console.log(Math.trunc(99.5)); 25 | -------------------------------------------------------------------------------- /Lessons/Week 04/026 - Number Challenge.js: -------------------------------------------------------------------------------- 1 | /* 2 | Number Challenge 3 | */ 4 | 5 | let a = 100; 6 | let b = 2_00.5; 7 | let c = 1e2; 8 | let d = 2.4; 9 | 10 | // Find Smallest Number In All Variables And Return Integer 11 | console.log(); 12 | 13 | // Use Variables a + d One Time To Get The Needed Output 14 | console.log(); // 10000 15 | 16 | // Get Integer "2" From d Variable With 4 Methods 17 | console.log(); 18 | console.log(); 19 | console.log(); 20 | console.log(); 21 | 22 | // Use Variables b + d To Get This Valus 23 | console.log(); // 66.67 => String 24 | console.log(); // 67 => Number 25 | -------------------------------------------------------------------------------- /Lessons/Week 04/027 - String Methods - Part 1.js: -------------------------------------------------------------------------------- 1 | /* 2 | String Methods 3 | - Access With Index 4 | - Access With charAt() 5 | - length 6 | - trim() 7 | - toUpperCase() 8 | - toLowerCase() 9 | - Chain Methods 10 | */ 11 | 12 | let theName = " Ahmed "; 13 | 14 | console.log(theName); 15 | console.log(theName[1]); 16 | console.log(theName[5]); 17 | 18 | console.log(theName.charAt(1)); 19 | console.log(theName.charAt(5)); 20 | 21 | console.log(theName.length); 22 | console.log(theName.trim()); 23 | 24 | console.log(theName.toUpperCase()); 25 | console.log(theName.toLowerCase()); 26 | 27 | console.log(theName.trim().charAt(2).toUpperCase()); 28 | -------------------------------------------------------------------------------- /Lessons/Week 04/028 - String Methods - Part 2.js: -------------------------------------------------------------------------------- 1 | /* 2 | String Methods 3 | - indexOf(Value [Mand], Start [Opt] 0) 4 | - lastIndexOf(Value [Mand], Start [Opt] Length) 5 | - slice(Start [Mand], End [Opt] Not Include End) 6 | - repeat(Times) [ES6] 7 | - split(Separator [Opt], Limit [Opt]) 8 | */ 9 | 10 | let a = "Elzero Web School"; 11 | 12 | console.log(a.indexOf("Web")); 13 | console.log(a.indexOf("Web", 8)); 14 | console.log(a.indexOf("o")); // 5 15 | console.log(a.lastIndexOf("o")); // 15 16 | 17 | console.log(a.slice(2, 6)); 18 | console.log(a.slice(-5, -3)); 19 | 20 | console.log(a.repeat(5)); 21 | 22 | console.log(a.split("", 6)); 23 | -------------------------------------------------------------------------------- /Lessons/Week 04/030 - String Challenge.js: -------------------------------------------------------------------------------- 1 | /* 2 | String Challenge 3 | All Solutions Must Be In One Chain 4 | You Can Use Concatenate 5 | */ 6 | 7 | let a = "Elzero Web School"; 8 | 9 | // Include This Method In Your Solution [slice, charAt] 10 | console.log(); // Zero 11 | 12 | // 8 H 13 | console.log(); // HHHHHHHH 14 | 15 | // Return Array 16 | console.log(); // ["Elzero"] 17 | 18 | // Use Only "substr" Method + Template Literals In Your Solution 19 | console.log(); // Elzero School 20 | 21 | // Solution Must Be Dynamic Because String May Changes 22 | console.log(); // eLZERO WEB SCHOOl 23 | -------------------------------------------------------------------------------- /Lessons/Week 05/031 - Comparison Operators.js: -------------------------------------------------------------------------------- 1 | /* 2 | Comparison Operators 3 | == Equal 4 | != Not Equal 5 | 6 | === Identical 7 | !== Not Identical 8 | 9 | > Larger Than 10 | >= Larger Than Or Equal 11 | 12 | < Smaller Than 13 | <= Smaller Than Or Equal 14 | */ 15 | 16 | console.log(10 == "10"); // Compare Value Only 17 | console.log(-100 == "-100"); // Compare Value Only 18 | console.log(10 != "10"); // Compare Value Only 19 | 20 | console.log(10 === "10"); // Compare Value + Type 21 | console.log(10 !== "10"); // Compare Value + Type 22 | console.log(10 !== 10); // Compare Value + Type 23 | 24 | console.log(10 > 20); 25 | console.log(10 > 10); 26 | console.log(10 >= 10); 27 | 28 | console.log(10 < 20); 29 | console.log(10 < 10); 30 | console.log(10 <= 10); 31 | 32 | console.log(typeof "Osama" === typeof "Ahmed"); 33 | -------------------------------------------------------------------------------- /Lessons/Week 05/032 - Logical Operators.js: -------------------------------------------------------------------------------- 1 | /* 2 | Logical Operators 3 | ! => Not 4 | && => And 5 | || => Or 6 | */ 7 | 8 | console.log(true); 9 | console.log(!true); 10 | 11 | console.log(!(10 == "10")); 12 | console.log(10 == "10" && 10 > 8 && 10 > 50); 13 | console.log(10 == "10" || 10 > 80 || 10 > 50); 14 | -------------------------------------------------------------------------------- /Lessons/Week 05/033 - If Conditions.js: -------------------------------------------------------------------------------- 1 | /* 2 | Control Flow 3 | - if 4 | - else if 5 | - else 6 | 7 | if (Condition) { 8 | Block Of Code 9 | } 10 | 11 | */ 12 | 13 | let price = 100; 14 | let discount = true; 15 | let discountAmount = 30; 16 | let country = "KSA"; 17 | 18 | if (discount === true) { 19 | price -= discountAmount; // price = price - discountAmount 20 | } else if (country === "Egypt") { 21 | price -= 40; 22 | } else if (country === "Syria") { 23 | price -= 50; 24 | } else { 25 | price -= 10; 26 | } 27 | 28 | console.log(price); 29 | -------------------------------------------------------------------------------- /Lessons/Week 05/034 - Nested If Conditions.js: -------------------------------------------------------------------------------- 1 | /* 2 | Nested If 3 | */ 4 | 5 | let price = 100; 6 | let discount = false; 7 | let discountAmount = 30; 8 | let country = "Egypt"; 9 | let student = true; 10 | 11 | if (discount === true) { 12 | price -= discountAmount; 13 | } else if (country === "Egypt") { 14 | if (student === true) { 15 | price -= discountAmount + 30; 16 | } else { 17 | price -= discountAmount + 10; 18 | } 19 | } else { 20 | price -= 10; 21 | } 22 | 23 | console.log(price); 24 | -------------------------------------------------------------------------------- /Lessons/Week 05/035 - Conditional Ternary Operator.js: -------------------------------------------------------------------------------- 1 | /* 2 | Conditional (Ternary) Operator 3 | */ 4 | 5 | let theName = "Mona"; 6 | let theGender = "Female"; 7 | let theAge = 30; 8 | 9 | if (theGender === "Male") { 10 | console.log("Mr"); 11 | } else { 12 | console.log("Mrs"); 13 | } 14 | 15 | // Condition ? If True : If False 16 | theGender === "Male" ? console.log("Mr") : console.log("Mrs"); 17 | 18 | let result = theGender === "Male" ? "Mr" : "Mrs"; 19 | 20 | document.write(result); 21 | 22 | console.log(theGender === "Male" ? "Mr" : "Mrs"); 23 | 24 | console.log(`Hello ${theGender === "Male" ? "Mr" : "Mrs"} ${theName}`); 25 | 26 | theAge < 20 27 | ? console.log(20) 28 | : theAge > 20 && theAge < 60 29 | ? console.log("20 To 60") 30 | : theAge > 60 31 | ? console.log("Larger Than 60") 32 | : console.log("Unknown"); 33 | -------------------------------------------------------------------------------- /Lessons/Week 05/036 - Nullish Coalescing Operator & Logical Or.js: -------------------------------------------------------------------------------- 1 | /* 2 | - Logical Or || 3 | -- Null + Undefined + Any Falsy Value 4 | - Nullish Coalescing Operator ?? 5 | -- Null + Undefined 6 | */ 7 | 8 | console.log(Boolean(100)); 9 | console.log(Boolean(-100)); 10 | console.log(Boolean(0)); 11 | console.log(Boolean("")); 12 | console.log(Boolean(null)); 13 | 14 | let price = 0; 15 | 16 | console.log(`The Price Is ${price || 200}`); 17 | console.log(`The Price Is ${price ?? 200}`); 18 | -------------------------------------------------------------------------------- /Lessons/Week 05/037 - If Condition Challenge.js: -------------------------------------------------------------------------------- 1 | /* 2 | If Condition Challenge 3 | */ 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 | // Write Previous Condition With Ternary If Syntax 18 | let st = "Elzero Web School"; 19 | 20 | // W Position May Change 21 | if ("????" === "w") { 22 | console.log("Good"); 23 | } 24 | if ("????" !== "string") { 25 | console.log("Good"); 26 | } 27 | if ("????" === "number") { 28 | console.log("Good"); 29 | } 30 | if ("????" === "ElzeroElzero") { 31 | console.log("Good"); 32 | } 33 | -------------------------------------------------------------------------------- /Lessons/Week 05/038 - Switch Statement.js: -------------------------------------------------------------------------------- 1 | /* 2 | Switch Statement 3 | switch(expression) { 4 | case 1: 5 | Code Block 6 | break; 7 | 8 | case 2: 9 | Code Block 10 | break; 11 | 12 | default: 13 | Code Block 14 | } 15 | - Default Ordering 16 | - Multiple Match 17 | - === 18 | */ 19 | 20 | let day = "A"; 21 | 22 | switch (day) { 23 | default: 24 | console.log("Unknown Day"); 25 | break; 26 | case 0: 27 | console.log("Saturday"); 28 | break; 29 | case 1: 30 | console.log("Sunday"); 31 | break; 32 | case 2: 33 | case 3: 34 | console.log("Monday"); 35 | break; 36 | } 37 | -------------------------------------------------------------------------------- /Lessons/Week 06/040 - Array Big Introduction.js: -------------------------------------------------------------------------------- 1 | /* 2 | Arrays 3 | - Create Arrays [Two Methods] new Array() + [] 4 | - Access Arrays Elements 5 | - Nested Arrays 6 | - Change Arrays Elements 7 | - Check For Array Array.isArray(arr); 8 | */ 9 | 10 | let myFriends = ["Ahmed", "Mohamed", "Sayed", ["Marwan", "Ali"]]; 11 | 12 | console.log(`Hello ${myFriends[0]}`); 13 | console.log(`Hello ${myFriends[2]}`); 14 | console.log(`${myFriends[1][2]}`); 15 | console.log(`Hello ${myFriends[3][1]}`); 16 | console.log(`${myFriends[3][1][2]}`); 17 | 18 | console.log(myFriends); 19 | myFriends[1] = "Gamal"; 20 | console.log(myFriends); 21 | myFriends[3] = ["Sameh", "Ameer"]; 22 | console.log(myFriends); 23 | 24 | console.log(Array.isArray(myFriends)); 25 | -------------------------------------------------------------------------------- /Lessons/Week 06/041 - Using Length With Array.js: -------------------------------------------------------------------------------- 1 | /* 2 | Array Methods 3 | - Length 4 | */ 5 | 6 | // Index Start From 0 [ 0, 1, 2, 3, 4 ] 7 | 8 | let myFriends = ["Ahmed", "Mohamed", "Sayed", "Alaa"]; 9 | 10 | myFriends.length = 2; 11 | 12 | console.log(myFriends); 13 | -------------------------------------------------------------------------------- /Lessons/Week 06/042 - Add And Remove From Array.js: -------------------------------------------------------------------------------- 1 | /* 2 | Arrays Methods [Adding And Removing] 3 | - unshift("", "") Add Element To The First 4 | - push("", "") Add Element To The End 5 | - shift() Remove First Element From Array 6 | - pop() Remove Last Element From Array 7 | */ 8 | 9 | let myFriends = ["Ahmed", "Mohamed", "Sayed", "Alaa"]; 10 | 11 | console.log(myFriends); 12 | 13 | myFriends.unshift("Osama", "Nabil"); 14 | 15 | console.log(myFriends); 16 | 17 | myFriends.push("Samah", "Eman"); 18 | 19 | console.log(myFriends); 20 | 21 | let first = myFriends.shift(); 22 | 23 | console.log(myFriends); 24 | 25 | console.log(`First Name Is ${first}`); 26 | 27 | let last = myFriends.pop(); 28 | 29 | console.log(myFriends); 30 | 31 | console.log(`Last Name Is ${last}`); 32 | -------------------------------------------------------------------------------- /Lessons/Week 06/043 - Searching Array.js: -------------------------------------------------------------------------------- 1 | /* 2 | Arrays Methods [Search] 3 | - indexOf(Search Element, From Index [Opt]) 4 | - lastIndexOf(Search Element, From Index [Opt]) 5 | - includes(valueToFind, fromIndex [Opt]) [ES7] 6 | */ 7 | 8 | let myFriends = ["Ahmed", "Mohamed", "Sayed", "Alaa", "Ahmed"]; 9 | 10 | console.log(myFriends); 11 | 12 | console.log(myFriends.indexOf("Ahmed")); 13 | console.log(myFriends.indexOf("Ahmed", 2)); 14 | 15 | console.log(myFriends.lastIndexOf("Ahmed")); 16 | console.log(myFriends.lastIndexOf("Ahmed", -2)); 17 | 18 | console.log(myFriends.includes("Ahmed")); 19 | console.log(myFriends.includes("Ahmed", 2)); 20 | 21 | if (myFriends.lastIndexOf("Osama") === -1) { 22 | console.log("Not Found"); 23 | } 24 | 25 | console.log(myFriends.indexOf("Osama")); 26 | console.log(myFriends.lastIndexOf("Osama")); 27 | -------------------------------------------------------------------------------- /Lessons/Week 06/044 - Sorting Array.js: -------------------------------------------------------------------------------- 1 | /* 2 | Arrays Methods [Sort] 3 | - sort(Function [Opt]) 4 | - reverse 5 | */ 6 | 7 | let myFriends = [10, "Sayed", "Mohamed", "90", 9000, 100, 20, "10", -20, -10]; 8 | 9 | console.log(myFriends); 10 | console.log(myFriends.sort().reverse()); 11 | -------------------------------------------------------------------------------- /Lessons/Week 06/045 - Slicing Array.js: -------------------------------------------------------------------------------- 1 | /* 2 | Arrays Methods [Slicing] 3 | - slice(Start [Opt], End [Opt] Not Including End) 4 | --- slice() => All Array 5 | --- If Start Is Undefined => 0 6 | --- Negative Count From End 7 | --- If End Is Undefined || > Indexes => Slice To The End Array.length 8 | --- Return New Array 9 | - splice(Start [Mand], DeleteCount [Opt] [0 No Remove], The Items To Add [Opt]) 10 | --- If Negative => Start From The End 11 | */ 12 | 13 | let myFriends = ["Ahmed", "Sayed", "Ali", "Osama", "Gamal", "Ameer"]; 14 | console.log(myFriends); 15 | console.log(myFriends.slice()); 16 | console.log(myFriends.slice(1)); 17 | console.log(myFriends.slice(1, 3)); 18 | console.log(myFriends.slice(-3)); 19 | console.log(myFriends.slice(1, -2)); 20 | console.log(myFriends.slice(-4, -2)); 21 | console.log(myFriends); 22 | 23 | myFriends.splice(1, 2, "Sameer", "Samara"); 24 | 25 | console.log(myFriends); 26 | -------------------------------------------------------------------------------- /Lessons/Week 06/046 - Joining Arrays.js: -------------------------------------------------------------------------------- 1 | /* 2 | Arrays Methods [Joining] 3 | - concat(array, array) => Return A New Array 4 | - join(Separator) 5 | */ 6 | 7 | let myFriends = ["Ahmed", "Sayed", "Ali", "Osama", "Gamal", "Ameer"]; 8 | let myNewFriends = ["Samar", "Sameh"]; 9 | let schoolFriends = ["Haytham", "Shady"]; 10 | 11 | let allFriends = myFriends.concat( 12 | myNewFriends, 13 | schoolFriends, 14 | "Gameel", 15 | [1, 2] 16 | ); 17 | 18 | console.log(allFriends); 19 | 20 | console.log(allFriends.join()); 21 | console.log(allFriends.join("")); 22 | console.log(allFriends.join(" @ ")); 23 | console.log(allFriends.join("|")); 24 | console.log(allFriends.join("|").toUpperCase()); 25 | -------------------------------------------------------------------------------- /Lessons/Week 06/047 - Array Challenge.js: -------------------------------------------------------------------------------- 1 | /* 2 | Array Challenge 3 | */ 4 | 5 | let zero = 0; 6 | let counter = 3; 7 | let my = ["Ahmed", "Mazero", "Elham", "Osama", "Gamal", "Ameer"]; 8 | 9 | // Write Code Here 10 | 11 | console.log(my); // ["Osama", "Elham", "Mazero", "Ahmed"]; 12 | 13 | console.log(my.slice("????")); // ["Elham", "Mazero"] 14 | 15 | console.log(); // "Elzero" 16 | 17 | console.log(); // "rO" 18 | -------------------------------------------------------------------------------- /Lessons/Week 07/048 - Loop - For & Concept Of Loop.js: -------------------------------------------------------------------------------- 1 | /* 2 | Loop 3 | - For 4 | for ([1] [2] [3]) { 5 | Block Of Code 6 | } 7 | */ 8 | 9 | for (let i = 0; i < 10; i++) { 10 | console.log(i); 11 | } 12 | -------------------------------------------------------------------------------- /Lessons/Week 07/049 - Loop On Sequences.js: -------------------------------------------------------------------------------- 1 | /* 2 | Loop 3 | - Loop On Sequences 4 | */ 5 | 6 | let myFriends = [1, 2, "Osama", "Ahmed", 3, 4, "Sayed", 6, "Ali"]; 7 | let onlyNames = []; 8 | 9 | for (let i = 0; i < myFriends.length; i++) { 10 | if (typeof myFriends[i] === "string") { 11 | onlyNames.push(myFriends[i]); 12 | } 13 | } 14 | 15 | console.log(onlyNames); 16 | 17 | // console.log(myFriends[0]); 18 | // console.log(myFriends[1]); 19 | // console.log(myFriends[2]); 20 | // console.log(myFriends[3]); 21 | // console.log(myFriends[4]); 22 | 23 | // for (let i = 0; i < myFriends.length; i++) { 24 | // console.log(myFriends[i]); 25 | // } 26 | -------------------------------------------------------------------------------- /Lessons/Week 07/050 - Nested Loops & Training.js: -------------------------------------------------------------------------------- 1 | /* 2 | Loop 3 | - Nested Loops 4 | */ 5 | 6 | let products = ["Keyboard", "Mouse", "Pen", "Pad", "Monitor"]; 7 | let colors = ["Red", "Green", "Black"]; 8 | let models = [2020, 2021]; 9 | 10 | for (let i = 0; i < products.length; i++) { 11 | console.log("#".repeat(15)); 12 | console.log(`# ${products[i]}`); 13 | console.log("#".repeat(15)); 14 | console.log("Colors: "); 15 | for (let j = 0; j < colors.length; j++) { 16 | console.log(`- ${colors[j]}`); 17 | } 18 | console.log("Models: "); 19 | for (let k = 0; k < models.length; k++) { 20 | console.log(`- ${models[k]}`); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Lessons/Week 07/051 - Loop Control - Break, Continue, Label.js: -------------------------------------------------------------------------------- 1 | /* 2 | Loop Control 3 | - Break 4 | - Continue 5 | - Label 6 | */ 7 | 8 | let products = ["Keyboard", "Mouse", "Pen", "Pad", "Monitor"]; 9 | 10 | let colors = ["Red", "Green", "Black"]; 11 | 12 | mainLoop: for (let i = 0; i < products.length; i++) { 13 | console.log(products[i]); 14 | nestedLoop: for (let j = 0; j < colors.length; j++) { 15 | console.log(`- ${colors[j]}`); 16 | if (colors[j] === "Green") { 17 | break mainLoop; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Lessons/Week 07/052 - Loop - For - Advanced Example.js: -------------------------------------------------------------------------------- 1 | /* 2 | Loop For Advanced Example 3 | */ 4 | 5 | let products = ["Keyboard", "Mouse", "Pen", "Pad", "Monitor", "iPhone"]; 6 | let i = 0; 7 | 8 | for (;;) { 9 | console.log(products[i]); 10 | i++; 11 | if (i === products.length) break; 12 | } 13 | -------------------------------------------------------------------------------- /Lessons/Week 07/053 - Practice - Add Products To Page/053 - Practice - Add Products To Page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 053 - Add Products To Page 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lessons/Week 07/053 - Practice - Add Products To Page/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | body { 5 | font-family: sans-serif; 6 | } 7 | h1 { 8 | text-align: center; 9 | color: #b00020; 10 | } 11 | div { 12 | background-color: #ddd; 13 | padding: 15px; 14 | text-align: center; 15 | } 16 | -------------------------------------------------------------------------------- /Lessons/Week 07/053 - Practice - Add Products To Page/master.js: -------------------------------------------------------------------------------- 1 | /* 2 | Products Practice 3 | */ 4 | 5 | const products = ["Keyboard", "Mouse", "Speakers", "Mouse Pad", "Monitor", "iPhone"]; 6 | const colors = ["Red", "Green", "Blue"]; 7 | const showCount = 5; 8 | 9 | document.write(`

Showing ${showCount} Products

`); 10 | 11 | for (let i = 0; i < showCount; i++) { 12 | document.write(`
`); 13 | document.write(`

[${i + 1}] ${products[i]}

`); 14 | for (let j = 0; j < colors.length; j++) { 15 | document.write(`

${colors[j]}

`); 16 | } 17 | document.write(`

${colors.join(" || ")}

`); 18 | document.write(`
`); 19 | document.write(`
`); 20 | } 21 | -------------------------------------------------------------------------------- /Lessons/Week 07/054 - Loop - While.js: -------------------------------------------------------------------------------- 1 | /* 2 | Loop 3 | - While 4 | */ 5 | 6 | let products = ["Keyboard", "Mouse", "Pen", "Pad", "Monitor", "iPhone"]; 7 | let index = 0; 8 | 9 | while (index < products.length) { 10 | console.log(products[index]); 11 | index += 1; 12 | } 13 | -------------------------------------------------------------------------------- /Lessons/Week 07/055 - Loop - Do While.js: -------------------------------------------------------------------------------- 1 | /* 2 | Loop 3 | - Do / While 4 | */ 5 | 6 | let products = ["Keyboard", "Mouse", "Pen", "Pad", "Monitor", "iPhone"]; 7 | let i = 0; 8 | 9 | do { 10 | console.log(i); 11 | i++; 12 | } while (false); 13 | 14 | console.log(i); 15 | -------------------------------------------------------------------------------- /Lessons/Week 07/056 - Loop Challenge.js: -------------------------------------------------------------------------------- 1 | /* 2 | Loop Challenge 3 | */ 4 | 5 | let myAdmins = ["Ahmed", "Osama", "Sayed", "Stop", "Samera"]; 6 | let myEmployees = [ 7 | "Amgad", 8 | "Samah", 9 | "Ameer", 10 | "Omar", 11 | "Othman", 12 | "Amany", 13 | "Samia", 14 | "Anwar", 15 | ]; 16 | 17 | document.write(`
We Have X Admins
`); 18 | -------------------------------------------------------------------------------- /Lessons/Week 08/057 - Function - Intro & Basic Usage.js: -------------------------------------------------------------------------------- 1 | /* 2 | Function 3 | - What Is Function ? 4 | - User-Defined vs Built In 5 | - Syntax + Basic Usage 6 | - Example From Real Life 7 | - Parameter + Argument 8 | - Practical Example 9 | */ 10 | 11 | function sayHello(userName) { 12 | console.log(`Hi ${userName}`); 13 | } 14 | 15 | sayHello("Osama"); 16 | sayHello("Sayed"); 17 | sayHello("Ali"); 18 | -------------------------------------------------------------------------------- /Lessons/Week 08/058 - Function - Advanced Example.js: -------------------------------------------------------------------------------- 1 | /* 2 | Function Advanced Examples 3 | */ 4 | 5 | function sayHello(userName, age) { 6 | if (age < 20) { 7 | console.log(`App is Not Suitable For You`); 8 | } else { 9 | console.log(`Hello ${userName} Your Age is ${age}`); 10 | } 11 | } 12 | 13 | sayHello("Osama", 38); 14 | sayHello("Sayed", 40); 15 | sayHello("Ali", 18); 16 | 17 | function generateYears(start, end, exclude) { 18 | for (let i = start; i <= end; i++) { 19 | if (i === exclude) { 20 | continue; 21 | } 22 | console.log(i); 23 | } 24 | } 25 | 26 | generateYears(1982, 2021, 2020); 27 | -------------------------------------------------------------------------------- /Lessons/Week 08/059 - Function - return Statement & Use Cases.js: -------------------------------------------------------------------------------- 1 | /* 2 | Function 3 | - Return 4 | - Automatic Semicolon Insertion [No Line Terminator Allowed] 5 | - Interrupting 6 | */ 7 | 8 | function generate(start, end) { 9 | for (let i = start; i <= end; i++) { 10 | if (i === 15) { 11 | return `Interrupting`; 12 | } 13 | console.log(i); 14 | } 15 | } 16 | generate(10, 20); 17 | -------------------------------------------------------------------------------- /Lessons/Week 08/060 - Function - Default Parameter.js: -------------------------------------------------------------------------------- 1 | /* 2 | Function 3 | - Default Function Parameters 4 | - Function Parameters Default [Undefined] 5 | - Old Strategies [Condition + Logical Or] 6 | - ES6 Method 7 | */ 8 | 9 | function sayHello(username = "Unknown", age = "Unknown") { 10 | // if (age === undefined) { 11 | // age = "Unknown"; 12 | // } 13 | // age = age || "Unknown"; 14 | return `Hello ${username} Your Age Is ${age}`; 15 | } 16 | console.log(sayHello()); 17 | -------------------------------------------------------------------------------- /Lessons/Week 08/061 - Function - Rest Parameter.js: -------------------------------------------------------------------------------- 1 | /* 2 | Function 3 | - Rest Parameters 4 | - Only One Allowed 5 | - Must Be Last Element 6 | */ 7 | 8 | function calc(...numbers) { 9 | // console.log(Array.isArray(numbers)); 10 | let result = 0; 11 | for (let i = 0; i < numbers.length; i++) { 12 | result += numbers[i]; // result = result + numbers[i] 13 | } 14 | return `Final Result Is ${result}`; 15 | } 16 | console.log(calc(10, 20, 10, 30, 50, 30)); 17 | -------------------------------------------------------------------------------- /Lessons/Week 08/062 - Practice - Ultimate Function.js: -------------------------------------------------------------------------------- 1 | /* 2 | Function Advanced Practice 3 | - Parameters 4 | - Default 5 | - Rest 6 | - Loop 7 | - Condition 8 | */ 9 | 10 | function showInfo(us = "Un", ag = "Un", rt = 0, show = "Yes", ...sk) { 11 | document.write(`
`); 12 | document.write(`

Welcome, ${us}

`); 13 | document.write(`

Age: ${ag}

`); 14 | document.write(`

Hour Rate: $${rt}

`); 15 | if (show === "Yes") { 16 | if (sk.length > 0) { 17 | document.write(`

Skills: ${sk.join(" | ")}

`); 18 | } else { 19 | document.write(`

Skills: No Skills

`); 20 | } 21 | } else { 22 | document.write(`

Skills Is Hidden

`); 23 | } 24 | document.write(`
`); 25 | } 26 | showInfo("Osama", 38, 20, "No", "Html", "CSS"); 27 | -------------------------------------------------------------------------------- /Lessons/Week 09/064 - Anonymous Function & Use Cases.js: -------------------------------------------------------------------------------- 1 | /* 2 | Function 3 | - Anonymous Function 4 | - Calling Named Function vs Anonymous Function 5 | - Argument To Other Function 6 | - Task Without Name 7 | - SetTimeout 8 | */ 9 | 10 | let calculator = function (num1, num2) { 11 | return num1 + num2; 12 | }; 13 | console.log(calculator(10, 20)); 14 | 15 | function sayHello() { 16 | console.log("Hello Osama"); 17 | } 18 | document.getElementById("show").onclick = sayHello; 19 | 20 | setTimeout(function elzero() { 21 | console.log("Good"); 22 | }, 2000); 23 | -------------------------------------------------------------------------------- /Lessons/Week 09/066 - Arrow Function Syntax.js: -------------------------------------------------------------------------------- 1 | /* 2 | Function 3 | - Arrow Function 4 | -- Regular vs Arrow [Param + No Param] 5 | -- Multiple Lines 6 | */ 7 | 8 | let print = function () { 9 | return 10; 10 | }; 11 | 12 | let print = () => 10; 13 | 14 | let print = function (num) { 15 | return num; 16 | }; 17 | 18 | let print = (num) => num; 19 | 20 | let print = function (num1, num2) { 21 | return num1 + num2; 22 | }; 23 | 24 | let print = (num1, num2) => num1 + num2; 25 | 26 | console.log(print(100, 50)); 27 | -------------------------------------------------------------------------------- /Lessons/Week 09/067 - Scope - Global & Local.js: -------------------------------------------------------------------------------- 1 | /* 2 | Scope 3 | - Global And Local Scope 4 | */ 5 | 6 | var a = 1; 7 | let b = 2; 8 | 9 | function showText() { 10 | var a = 10; 11 | let b = 20; 12 | console.log(`Function - From Local ${a}`); 13 | console.log(`Function - From Local ${b}`); 14 | } 15 | 16 | console.log(`From Global ${a}`); 17 | console.log(`From Global ${b}`); 18 | 19 | showText(); 20 | -------------------------------------------------------------------------------- /Lessons/Week 09/068 - Scope - Block.js: -------------------------------------------------------------------------------- 1 | /* 2 | Scope 3 | - Block Scope [If, Switch, For] 4 | */ 5 | 6 | var x = 10; 7 | 8 | if (10 === 10) { 9 | let x = 50; 10 | console.log(`From If Block ${x}`); 11 | } 12 | 13 | console.log(`From Global ${x}`); 14 | -------------------------------------------------------------------------------- /Lessons/Week 09/069 - Scope - Lexical (Static).js: -------------------------------------------------------------------------------- 1 | /* 2 | Scope 3 | - Lexical Scope 4 | 5 | Search 6 | - Execution Context 7 | - Lexical Environment 8 | */ 9 | 10 | function parent() { 11 | let a = 10; 12 | 13 | function child() { 14 | console.log(a); 15 | console.log(`From Child ${b}`); 16 | 17 | function grand() { 18 | let b = 100; 19 | console.log(`From Grand ${a}`); 20 | console.log(`From Grand ${b}`); 21 | } 22 | grand(); 23 | } 24 | child(); 25 | } 26 | parent(); 27 | -------------------------------------------------------------------------------- /Lessons/Week 09/070 - Arrow Function Challenge.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 = function () { 10 | // Parameter ? 11 | return "???"; 12 | }; 13 | 14 | console.log(names("Osama", "Mohamed", "Ali", "Ibrahim")); 15 | // String [Osama], [Mohamed], [Ali], [Ibrahim] => Done ! 16 | 17 | /* ================================= */ 18 | 19 | // [1] Replace ??? In Return Statement To Get The Output 20 | // [2] Create The Same Function With Regular Syntax 21 | // [3] Use Array Inside The Arguments To Get The Output 22 | 23 | let myNumbers = [20, 50, 10, 60]; 24 | 25 | let calc = (one, two, ...nums) => "???"; 26 | 27 | console.log(calc(10, "???", "???")); // 80 28 | -------------------------------------------------------------------------------- /Lessons/Week 10/074 - Higher Order Functions - Filter Practice.js: -------------------------------------------------------------------------------- 1 | /* 2 | Filter 3 | - Filter Longest Word By Number 4 | */ 5 | 6 | // Filter Words More Than 4 Characters 7 | let sentence = "I Love Foood Code Too Playing Much"; 8 | 9 | let smallWords = sentence 10 | .split(" ") 11 | .filter(function (ele) { 12 | return ele.length <= 4; 13 | }) 14 | .join(" "); 15 | 16 | console.log(smallWords); 17 | 18 | // Ignore Numbers 19 | let ignoreNumbers = "Elz123er4o"; 20 | 21 | let ign = ignoreNumbers 22 | .split("") 23 | .filter(function (ele) { 24 | return isNaN(parseInt(ele)); 25 | }) 26 | .join(""); 27 | 28 | console.log(ign); 29 | 30 | // Filter Strings + Multiply 31 | let mix = "A13BS2ZX"; 32 | 33 | let mixedContent = mix 34 | .split("") 35 | .filter(function (ele) { 36 | return !isNaN(parseInt(ele)); 37 | }) 38 | .map(function (ele) { 39 | return ele * ele; 40 | }) 41 | .join(""); 42 | 43 | console.log(mixedContent); 44 | -------------------------------------------------------------------------------- /Lessons/Week 10/078 - Higher Order Functions Challenge.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 | let myString = "1,2,3,EE,l,z,e,r,o,_,W,e,b,_,S,c,h,o,o,l,2,0,Z"; 20 | 21 | let solution = "?????"; 22 | 23 | console.log(solution); // Elzero Web School 24 | -------------------------------------------------------------------------------- /Lessons/Week 11/079 - Object Introduction.js: -------------------------------------------------------------------------------- 1 | /* 2 | Object 3 | - Intro and What Is Object 4 | - Testing Window Object 5 | - Accessing Object 6 | */ 7 | 8 | let user = { 9 | // Properties 10 | theName: "Osama", 11 | theAge: 38, 12 | // Methods 13 | sayHello: function () { 14 | return `Hello`; 15 | }, 16 | }; 17 | 18 | console.log(user.theName); 19 | console.log(user.theAge); 20 | console.log(user.sayHello()); 21 | -------------------------------------------------------------------------------- /Lessons/Week 11/080 - Dot Notation vs Bracket Notation.js: -------------------------------------------------------------------------------- 1 | /* 2 | Object 3 | - Dig Deeper 4 | - Dot Notation vs Bracket Notation 5 | - Dynamic Property Name 6 | */ 7 | 8 | let myVar = "country"; 9 | 10 | let user = { 11 | theName: "Osama", 12 | country: "Egypt", 13 | }; 14 | 15 | console.log(user.theName); 16 | console.log(user.country); // user.country 17 | console.log(user.myVar); // user.country 18 | console.log(user[myVar]); // user.country 19 | -------------------------------------------------------------------------------- /Lessons/Week 11/082 - Create Object With New Keyboard.js: -------------------------------------------------------------------------------- 1 | /* 2 | Object 3 | - Create With New Keyword new Object(); 4 | */ 5 | 6 | let user = new Object({ 7 | age: 20, 8 | }); 9 | 10 | console.log(user); 11 | 12 | user.age = 38; 13 | user["country"] = "Egypt"; 14 | 15 | user.sayHello = function () { 16 | return `Hello`; 17 | }; 18 | 19 | console.log(user); 20 | console.log(user.age); 21 | console.log(user.country); 22 | console.log(user.sayHello()); 23 | -------------------------------------------------------------------------------- /Lessons/Week 11/084 - Create Object With Create Method.js: -------------------------------------------------------------------------------- 1 | /* 2 | Object 3 | - Create Object With assign Method 4 | */ 5 | 6 | let user = { 7 | age: 20, 8 | doubleAge: function () { 9 | return this.age * 2; 10 | }, 11 | }; 12 | 13 | console.log(user); 14 | console.log(user.age); 15 | console.log(user.doubleAge()); 16 | 17 | let obj = Object.create({}); 18 | 19 | obj.a = 100; 20 | 21 | console.log(obj); 22 | 23 | let copyObj = Object.create(user); 24 | 25 | copyObj.age = 50; 26 | 27 | console.log(copyObj); 28 | console.log(copyObj.age); 29 | console.log(copyObj.doubleAge()); 30 | -------------------------------------------------------------------------------- /Lessons/Week 11/085 - Create Object With Assign Method.js: -------------------------------------------------------------------------------- 1 | /* 2 | Object 3 | - Create Object With assign Method 4 | */ 5 | 6 | let obj1 = { 7 | prop1: 1, 8 | meth1: function () { 9 | return this.prop1; 10 | }, 11 | }; 12 | 13 | let obj2 = { 14 | prop2: 2, 15 | meth2: function () { 16 | return this.prop2; 17 | }, 18 | }; 19 | 20 | let targetObject = { 21 | prop1: 100, 22 | prop3: 3, 23 | }; 24 | 25 | let finalObject = Object.assign(targetObject, obj1, obj2); 26 | 27 | finalObject.prop1 = 200; 28 | finalObject.prop4 = 4; 29 | 30 | console.log(finalObject); 31 | 32 | let newObject = Object.assign({}, obj1, { prop5: 5, prop6: 6 }); 33 | 34 | console.log(newObject); 35 | -------------------------------------------------------------------------------- /Lessons/Week 12/088 - Check Attributes & Examples.js: -------------------------------------------------------------------------------- 1 | /* 2 | DOM [Check Attributes] 3 | - Element.attributes 4 | - Element.hasAttribute 5 | - Element.hasAttributes 6 | - Element.removeAttribute 7 | */ 8 | 9 | console.log(document.getElementsByTagName("p")[0].attributes); 10 | 11 | let myP = document.getElementsByTagName("p")[0]; 12 | 13 | if (myP.hasAttribute("data-src")) { 14 | if (myP.getAttribute("data-src") === "") { 15 | myP.removeAttribute("data-src"); 16 | } else { 17 | myP.setAttribute("data-src", "New Value"); 18 | } 19 | } else { 20 | console.log(`Not Found`); 21 | } 22 | 23 | if (myP.hasAttributes()) { 24 | console.log(`Has Attributes`); 25 | } 26 | 27 | if (document.getElementsByTagName("div")[0].hasAttributes()) { 28 | console.log(`Has Attributes`); 29 | } else { 30 | console.log(`Div Has No Attributes`); 31 | } 32 | -------------------------------------------------------------------------------- /Lessons/Week 12/089 - Create & Append Elements.js: -------------------------------------------------------------------------------- 1 | /* 2 | DOM [Create Elements] 3 | - createElement 4 | - createComment 5 | - createTextNode 6 | - createAttribute 7 | - appendChild 8 | */ 9 | 10 | let myElement = document.createElement("div"); 11 | let myAttr = document.createAttribute("data-custom"); 12 | let myText = document.createTextNode("Product One"); 13 | let myComment = document.createComment("This Is Div"); 14 | 15 | myElement.className = "product"; 16 | myElement.setAttributeNode(myAttr); 17 | myElement.setAttribute("data-test", "Testing"); 18 | 19 | // Append Comment To Element 20 | myElement.appendChild(myComment); 21 | 22 | // Append Text To Element 23 | myElement.appendChild(myText); 24 | 25 | // Append Element To Body 26 | document.body.appendChild(myElement); 27 | -------------------------------------------------------------------------------- /Lessons/Week 12/090 - Practice - Product With Heading And Paragraph.js: -------------------------------------------------------------------------------- 1 | /* 2 | DOM [Create Elements] 3 | - Practice Product With Heading And Paragraph 4 | */ 5 | 6 | let myMainElement = document.createElement("div"); 7 | let myHeading = document.createElement("h2"); 8 | let myParagraph = document.createElement("p"); 9 | 10 | let myHeadingText = document.createTextNode("Product Title"); 11 | let myParagraphText = document.createTextNode("Product Description"); 12 | 13 | // Add Heading Text 14 | myHeading.appendChild(myHeadingText); 15 | 16 | // Add Heading To Main Element 17 | myMainElement.appendChild(myHeading); 18 | 19 | // Add Paragraph Text 20 | myParagraph.appendChild(myParagraphText); 21 | 22 | // Add Paragraph To Main Element 23 | myMainElement.appendChild(myParagraph); 24 | 25 | myMainElement.className = "product"; 26 | 27 | document.body.appendChild(myMainElement); 28 | -------------------------------------------------------------------------------- /Lessons/Week 12/092 - DOM Events.js: -------------------------------------------------------------------------------- 1 | /* 2 | DOM [Events] 3 | - Use Events On HTML 4 | - Use Events On JS 5 | --- onclick 6 | --- oncontextmenu 7 | --- onmouseenter 8 | --- onmouseleave 9 | 10 | --- onload 11 | --- onscroll 12 | --- onresize 13 | 14 | --- onfocus 15 | --- onblur 16 | --- onsubmit 17 | */ 18 | 19 | let myBtn = document.getElementById("btn"); 20 | 21 | myBtn.onmouseleave = function () { 22 | console.log("Clicked"); 23 | }; 24 | 25 | window.onresize = function () { 26 | console.log("Scroll"); 27 | }; 28 | -------------------------------------------------------------------------------- /Lessons/Week 12/093 - Validate Form & Prevent Default.js: -------------------------------------------------------------------------------- 1 | /* 2 | DOM [Events] 3 | - Validate Form Practice 4 | - Prevent Default 5 | */ 6 | 7 | let userInput = document.querySelector("[name='username']"); 8 | let ageInput = document.querySelector("[name='age']"); 9 | 10 | document.forms[0].onsubmit = function (e) { 11 | let userValid = false; 12 | let ageValid = false; 13 | 14 | if (userInput.value !== "" && userInput.value.length <= 10) { 15 | userValid = true; 16 | } 17 | 18 | if (ageInput.value !== "") { 19 | ageValid = true; 20 | } 21 | 22 | if (userValid === false || ageValid === false) { 23 | e.preventDefault(); 24 | } 25 | }; 26 | 27 | document.links[0].onclick = function (event) { 28 | console.log(event); 29 | event.preventDefault(); 30 | }; 31 | -------------------------------------------------------------------------------- /Lessons/Week 13/094 - Event Simulation – Click, Focus, Blur.js: -------------------------------------------------------------------------------- 1 | /* 2 | DOM [Events Simulation] 3 | - click 4 | - focus 5 | - blur 6 | */ 7 | 8 | let one = document.querySelector(".one"); 9 | let two = document.querySelector(".two"); 10 | 11 | window.onload = function () { 12 | two.focus(); 13 | }; 14 | 15 | one.onblur = function () { 16 | document.links[0].click(); 17 | }; 18 | -------------------------------------------------------------------------------- /Lessons/Week 13/095 - ClassList Object & Methods.js: -------------------------------------------------------------------------------- 1 | /* 2 | DOM [Class List] 3 | - classList 4 | --- length 5 | --- contains 6 | --- item(index) 7 | --- add 8 | --- remove 9 | --- toggle 10 | */ 11 | 12 | let element = document.getElementById("my-div"); 13 | 14 | console.log(element.classList); 15 | console.log(typeof element.classList); 16 | console.log(element.classList.contains("osama")); 17 | console.log(element.classList.contains("show")); 18 | console.log(element.classList.item("3")); 19 | 20 | element.onclick = function () { 21 | element.classList.toggle("show"); 22 | }; 23 | -------------------------------------------------------------------------------- /Lessons/Week 13/096 - CSS Styling & Stylesheets.js: -------------------------------------------------------------------------------- 1 | /* 2 | DOM [CSS] 3 | - style 4 | - cssText 5 | - removeProperty(propertyName) [Inline, Stylesheet] 6 | - setProperty(propertyName, value, priority) 7 | */ 8 | 9 | let element = document.getElementById("my-div"); 10 | 11 | element.style.color = "red"; 12 | element.style.fontWeight = "bold"; 13 | 14 | element.style.cssText = "font-weight: bold; color: green; opacity: 0.9"; 15 | 16 | element.style.removeProperty("color"); 17 | element.style.setProperty("font-size", "40px", "important"); 18 | 19 | document.styleSheets[0].rules[0].style.removeProperty("line-height"); 20 | document.styleSheets[0].rules[0].style.setProperty( 21 | "background-color", 22 | "red", 23 | "important" 24 | ); 25 | -------------------------------------------------------------------------------- /Lessons/Week 13/097 - Before, After, Prepend, Append, Remove.js: -------------------------------------------------------------------------------- 1 | /* 2 | DOM [Deal With Elements] 3 | - before [Element || String] 4 | - after [Element || String] 5 | - append [Element || String] 6 | - prepend [Element || String] 7 | - remove 8 | */ 9 | 10 | let element = document.getElementById("my-div"); 11 | let createdP = document.createElement("p"); 12 | 13 | // element.remove(); 14 | -------------------------------------------------------------------------------- /Lessons/Week 13/098 - DOM Traversing.js: -------------------------------------------------------------------------------- 1 | /* 2 | DOM [Traversing] 3 | - nextSibling 4 | - previousSibling 5 | - nextElementSibling 6 | - previousElementSibling 7 | - parentElement 8 | */ 9 | 10 | let span = document.querySelector(".two"); 11 | 12 | console.log(span.parentElement); 13 | 14 | span.onclick = function () { 15 | span.parentElement.remove(); 16 | }; 17 | -------------------------------------------------------------------------------- /Lessons/Week 13/099 - DOM Cloning.js: -------------------------------------------------------------------------------- 1 | /* 2 | DOM [Cloning] 3 | - cloneNode(Deep) 4 | */ 5 | 6 | let myP = document.querySelector("p").cloneNode(true); 7 | let myDiv = document.querySelector("div"); 8 | 9 | myP.id = `${myP.id}-clone`; 10 | 11 | myDiv.appendChild(myP); 12 | -------------------------------------------------------------------------------- /Lessons/Week 13/101 - DOM Challenge.js: -------------------------------------------------------------------------------- 1 | // Final Result Should be similar to this image 2 | // https://elzero.org/wp-content/uploads/2021/09/dom-challenge.jpg 3 | -------------------------------------------------------------------------------- /Lessons/Week 14/102 - What Is BOM.js: -------------------------------------------------------------------------------- 1 | /* 2 | BOM [Browser Object Model] 3 | - Introduction 4 | --- Window Object Is The Browser Window 5 | --- Window Contain The Document Object 6 | --- All Global Variables And Objects And Functions Are Members Of Window Object 7 | ------ Test Document And Console 8 | - What Can We Do With Window Object ? 9 | --- Open Window 10 | --- Close Window 11 | --- Move Window 12 | --- Resize Window 13 | --- Print Document 14 | --- Run Code After Period Of Time Once Or More 15 | --- Fully Control The URL 16 | --- Save Data Inside Browser To Use Later 17 | */ 18 | 19 | window.document.title = "Hello JS"; 20 | -------------------------------------------------------------------------------- /Lessons/Week 14/103 - Alert & Confirm & Prompt.js: -------------------------------------------------------------------------------- 1 | /* 2 | BOM [Browser Object Model] 3 | - alert(Message) => Need No Response Only Ok Available 4 | - confirm(Message) => Need Response And Return A Boolean 5 | - prompt(Message, Default Message) => Collect Data 6 | 7 | TIP: https://sweetalert2.github.io 8 | */ 9 | 10 | // alert("Test"); 11 | // console.log("Test"); 12 | 13 | // let confirmMsg = confirm("Are You Sure?"); 14 | 15 | // console.log(confirmMsg); 16 | 17 | // if (confirmMsg === true) { 18 | // console.log("Item Deleted"); 19 | // } else { 20 | // console.log("Item Not Deleted"); 21 | // } 22 | 23 | let promptMsg = prompt("Good Day To You?", "Write Day With 3 Characters"); 24 | console.log(promptMsg); 25 | -------------------------------------------------------------------------------- /Lessons/Week 14/104 - setTimeout & clearTimeout.js: -------------------------------------------------------------------------------- 1 | /* 2 | BOM [Browser Object Model] 3 | - setTimeout(Function, Timeout, Additional Params) 4 | - clearTimeout(Identifier) 5 | */ 6 | 7 | // setTimeout(function () { 8 | // console.log("Msg"); 9 | // }, 3000); 10 | 11 | // setTimeout(sayMsg, 3000); 12 | 13 | // function sayMsg() { 14 | // console.log(`Iam Message`); 15 | // } 16 | 17 | // setTimeout(sayMsg, 3000, "Osama", 38); 18 | 19 | // function sayMsg(user, age) { 20 | // console.log(`Iam Message For ${user} Age Is : ${age}`); 21 | // } 22 | 23 | let btn = document.querySelector("button"); 24 | 25 | btn.onclick = function () { 26 | clearTimeout(counter); 27 | }; 28 | 29 | function sayMsg(user, age) { 30 | console.log(`Iam Message For ${user} Age Is : ${age}`); 31 | } 32 | 33 | let counter = setTimeout(sayMsg, 3000, "Osama", 38); 34 | -------------------------------------------------------------------------------- /Lessons/Week 14/105 - setInterval & clearInterval.js: -------------------------------------------------------------------------------- 1 | /* 2 | BOM [Browser Object Model] 3 | - setInterval(Function, Millseconds, Additional Params) 4 | - clearInterval(Identifier) 5 | */ 6 | 7 | // setInterval(function () { 8 | // console.log(`Msg`); 9 | // }, 1000); 10 | 11 | // setInterval(sayMsg, 1000); 12 | 13 | // function sayMsg() { 14 | // console.log(`Iam Message`); 15 | // } 16 | 17 | // setInterval(sayMsg, 1000, "Osama", 38); 18 | 19 | // function sayMsg(user, age) { 20 | // console.log(`Iam Message For ${user} His Age Is: ${age}`); 21 | // } 22 | 23 | let div = document.querySelector("div"); 24 | 25 | function countdown() { 26 | div.innerHTML -= 1; 27 | if (div.innerHTML === "0") { 28 | clearInterval(counter); 29 | } 30 | } 31 | 32 | let counter = setInterval(countdown, 1000); 33 | -------------------------------------------------------------------------------- /Lessons/Week 14/106 - Window Location Object.js: -------------------------------------------------------------------------------- 1 | /* 2 | BOM [Browser Object Model] 3 | - location Object 4 | --- href Get / Set [URL || Hash || File || Mail] 5 | --- host 6 | --- hash 7 | --- protocol 8 | --- reload() 9 | --- replace() 10 | --- assign() 11 | */ 12 | 13 | console.log(location); 14 | console.log(location.href); 15 | 16 | // location.href = "https://google.com"; 17 | // location.href = "/#sec02"; 18 | // location.href = "https://developer.mozilla.org/en-US/docs/Web/JavaScript#reference"; 19 | 20 | // console.log(location.host); 21 | // console.log(location.hostname); 22 | 23 | // console.log(location.protocol); 24 | 25 | // console.log(location.hash); 26 | -------------------------------------------------------------------------------- /Lessons/Week 14/107 - Window Open & Close.js: -------------------------------------------------------------------------------- 1 | /* 2 | BOM [Browser Object Model] 3 | - open(URL [Opt], Window Name Or Target Attr [Opt], Win Features [Opt], History Replace [Opt]) 4 | - close() 5 | - Window Features 6 | --- left [Num] 7 | --- top [Num] 8 | --- width [Num] 9 | --- height [Num] 10 | --- menubar [yes || no] 11 | 12 | Search 13 | - Window.Open Window Features 14 | */ 15 | 16 | setTimeout(function () { 17 | window.open("", "_self", "", false); 18 | }, 2000); 19 | 20 | setTimeout(function () { 21 | window.open( 22 | "https://google.com", 23 | "_blank", 24 | "width=400,height=400,left=200,top=10" 25 | ); 26 | }, 2000); 27 | -------------------------------------------------------------------------------- /Lessons/Week 14/108 - Window History Object.js: -------------------------------------------------------------------------------- 1 | /* 2 | BOM [Browser Object Model] 3 | - History API 4 | --- Properties 5 | ------ length 6 | --- Methods 7 | ------ back() 8 | ------ forward() 9 | ------ go(Delta) => Position In History 10 | 11 | Search [For Advanced Knowledge] 12 | - pushState() + replaceState() 13 | */ 14 | 15 | console.log(history); 16 | -------------------------------------------------------------------------------- /Lessons/Week 14/109 - Scroll, ScrollTo, ScrollBy, Focus, Print, Stop.js: -------------------------------------------------------------------------------- 1 | /* 2 | BOM [Browser Object Model] 3 | - stop() 4 | - print() 5 | - focus() 6 | - scrollTo(x, y || Options) 7 | - scroll(x, y || Options) 8 | - scrollBy(x, y || Options) 9 | */ 10 | 11 | let myNewWindow = window.open("https://google.com", "", "width=500,height=500"); 12 | 13 | window.scrollTo({ 14 | left: 500, 15 | top: 200, 16 | behavior: "smooth", 17 | }); 18 | -------------------------------------------------------------------------------- /Lessons/Week 14/110 - Practice - Scroll To Top Using ScrollY.js: -------------------------------------------------------------------------------- 1 | /* 2 | BOM [Browser Object Model] 3 | - Practice => Scroll To Top 4 | - scrollX [Alias => PageXOffset] 5 | - scrollY [Alias => PageYOffset] 6 | */ 7 | 8 | // console.log(window.scrollX === window.pageXOffset); 9 | 10 | let btn = document.querySelector("button"); 11 | 12 | window.onscroll = function () { 13 | if (window.scrollY >= 600) { 14 | btn.style.display = "block"; 15 | } else { 16 | btn.style.display = "none"; 17 | } 18 | }; 19 | 20 | btn.onclick = function () { 21 | window.scrollTo({ 22 | left: 0, 23 | top: 0, 24 | behavior: "smooth", 25 | }); 26 | }; 27 | -------------------------------------------------------------------------------- /Lessons/Week 15/112 - Practice - Local Storage Color App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 112 - Local Storage & Color 8 | 9 | 10 | 11 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Lessons/Week 15/114 - BOM Challenge.js: -------------------------------------------------------------------------------- 1 | /* 2 | Challenge: https://elzero.org/wp-content/uploads/2021/10/BOM_Challenge.gif 3 | */ 4 | -------------------------------------------------------------------------------- /Lessons/Week 16/115 - Destructuring Arrays - Part 1.js: -------------------------------------------------------------------------------- 1 | /* 2 | Destructuring: 3 | is a JavaScript expression that allows us to extract data from arrays, 4 | objects, and maps and set them into new, distinct variables. 5 | - Destructuring Array 6 | */ 7 | 8 | let a = 1; 9 | let b = 2; 10 | let c = 3; 11 | let d = 4; 12 | 13 | let myFriends = ["Ahmed", "Sayed", "Ali", "Maysa"]; 14 | 15 | [a = "A", b, c, d, e = "Osama"] = myFriends; 16 | 17 | console.log(a); 18 | console.log(b); 19 | console.log(c); 20 | console.log(d); 21 | console.log(e); 22 | 23 | // console.log(myFriends[4]); 24 | 25 | let [, y, , z] = myFriends; 26 | 27 | console.log(y); 28 | console.log(z); 29 | -------------------------------------------------------------------------------- /Lessons/Week 16/116 - Destructuring Arrays - Part 2.js: -------------------------------------------------------------------------------- 1 | /* 2 | Destructuring 3 | - Destructuring Array Advanced Examples 4 | */ 5 | 6 | let myFriends = [ 7 | "Ahmed", 8 | "Sayed", 9 | "Ali", 10 | ["Shady", "Amr", ["Mohamed", "Gamal"]], 11 | ]; 12 | 13 | // console.log(myFriends[3][2][1]); 14 | 15 | // let [, , , [a, , [, b]]] = myFriends; 16 | 17 | let [, , , [a, , [, b]]] = myFriends; 18 | 19 | console.log(a); // Shady 20 | console.log(b); // Gamal 21 | -------------------------------------------------------------------------------- /Lessons/Week 16/117 - Destructuring Arrays - Part 3 - Swap Variables.js: -------------------------------------------------------------------------------- 1 | /* 2 | Destructuring 3 | - Destructuring Array => Swapping Variables 4 | */ 5 | 6 | let book = "Video"; 7 | let video = "Book"; 8 | 9 | // Save Book Value In Stash 10 | // let stash = book; // Video 11 | 12 | // Change Book Value 13 | // book = video; // Book 14 | 15 | // Change Video Value 16 | // video = stash; // Video 17 | 18 | [book, video] = [video, book]; 19 | 20 | console.log(book); 21 | console.log(video); 22 | -------------------------------------------------------------------------------- /Lessons/Week 16/118 - Destructuring Objects - Part 1.js: -------------------------------------------------------------------------------- 1 | /* 2 | Destructuring 3 | - Destructuring Object 4 | */ 5 | 6 | const user = { 7 | theName: "Osama", 8 | theAge: 39, 9 | theTitle: "Developer", 10 | theCountry: "Egypt", 11 | }; 12 | 13 | // console.log(user.theName); 14 | // console.log(user.theAge); 15 | // console.log(user.theTitle); 16 | // console.log(user.theCountry); 17 | 18 | // let theName = user.theName; 19 | // let theAge = user.theAge; 20 | // let theTitle = user.theTitle; 21 | // let theCountry = user.theCountry; 22 | 23 | // console.log(theName); 24 | // console.log(theAge); 25 | // console.log(theTitle); 26 | // console.log(theCountry); 27 | 28 | // ({ theName, theAge, theTitle, theCountry } = user); 29 | const { theName, theAge, theCountry } = user; 30 | 31 | console.log(theName); 32 | console.log(theAge); 33 | console.log(theCountry); 34 | -------------------------------------------------------------------------------- /Lessons/Week 16/119 - Destructuring Objects - Part 2.js: -------------------------------------------------------------------------------- 1 | /* 2 | Destructuring 3 | - Destructuring Object 4 | --- Naming The Variables 5 | --- Add New Property 6 | --- Nested Object 7 | --- Destructuring The Nested Object Only 8 | */ 9 | 10 | const user = { 11 | theName: "Osama", 12 | theAge: 39, 13 | theTitle: "Developer", 14 | theCountry: "Egypt", 15 | theColor: "Black", 16 | skills: { 17 | html: 70, 18 | css: 80, 19 | }, 20 | }; 21 | 22 | const { 23 | theName: n, 24 | theAge: a, 25 | theCountry, 26 | theColor: co = "Red", 27 | skills: { html: h, css }, 28 | } = user; 29 | 30 | console.log(n); 31 | console.log(a); 32 | console.log(theCountry); 33 | console.log(co); 34 | console.log(`My HTML Skill Progress Is ${h}`); 35 | console.log(`My CSS Skill Progress Is ${css}`); 36 | 37 | const { html: skillOne, css: skillTwo } = user.skills; 38 | 39 | console.log(`My HTML Skill Progress Is ${skillOne}`); 40 | console.log(`My CSS Skill Progress Is ${skillTwo}`); 41 | -------------------------------------------------------------------------------- /Lessons/Week 16/120 - Destructuring Function Parameters.js: -------------------------------------------------------------------------------- 1 | /* 2 | Destructuring 3 | - Destructuring Function Parameters 4 | */ 5 | 6 | const user = { 7 | theName: "Osama", 8 | theAge: 39, 9 | skills: { 10 | html: 70, 11 | css: 80, 12 | }, 13 | }; 14 | 15 | showDetails(user); 16 | 17 | // function showDetails(obj) { 18 | // console.log(`Your Name Is ${obj.theName}`); 19 | // console.log(`Your Age Is ${obj.theAge}`); 20 | // console.log(`Your CSS Skill Progress Is ${obj.skills.css}`); 21 | // } 22 | 23 | function showDetails({ theName: n, theAge: a, skills: { css: c } } = user) { 24 | console.log(`Your Name Is ${n}`); 25 | console.log(`Your Age Is ${a}`); 26 | console.log(`Your CSS Skill Progress Is ${c}`); 27 | } 28 | -------------------------------------------------------------------------------- /Lessons/Week 16/121 - Destructuring Mixed Content.js: -------------------------------------------------------------------------------- 1 | /* 2 | Destructuring 3 | - Destructuring Mixed Content 4 | */ 5 | 6 | const user = { 7 | theName: "Osama", 8 | theAge: 39, 9 | skills: ["HTML", "CSS", "JavaScript"], 10 | addresses: { 11 | egypt: "Cairo", 12 | ksa: "Riyadh", 13 | }, 14 | }; 15 | 16 | const { 17 | theName: n, 18 | theAge: a, 19 | skills: [, , three], 20 | addresses: { egypt: e }, 21 | } = user; 22 | 23 | console.log(`Your Name Is: ${n}`); 24 | console.log(`Your Age Is: ${a}`); 25 | console.log(`Your Last Skill Is: ${three}`); 26 | console.log(`Your Live In: ${e}`); 27 | -------------------------------------------------------------------------------- /Lessons/Week 16/122 - Destructuring Challenge.js: -------------------------------------------------------------------------------- 1 | /* 2 | Destructuring 3 | - Challenge 4 | */ 5 | 6 | let chosen = 3; 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 | -------------------------------------------------------------------------------- /Lessons/Week 17/126 - Map Methods.js: -------------------------------------------------------------------------------- 1 | /* 2 | - Map Data Type 3 | Methods 4 | --- set 5 | --- get 6 | --- delete 7 | --- clear 8 | --- has 9 | 10 | Properties 11 | --- size 12 | */ 13 | 14 | let myMap = new Map([ 15 | [10, "Number"], 16 | ["Name", "String"], 17 | [false, "Boolean"], 18 | ]); 19 | 20 | // myMap.set(10, "Number"); 21 | // myMap.set("Name", "String"); 22 | 23 | console.log(myMap); 24 | 25 | console.log(myMap.get(10)); 26 | console.log(myMap.get("Name")); 27 | console.log(myMap.get(false)); 28 | 29 | console.log("####"); 30 | 31 | console.log(myMap.has("Name")); 32 | 33 | console.log("####"); 34 | 35 | console.log(myMap.size); 36 | 37 | console.log(myMap.delete("Name")); 38 | 39 | console.log(myMap.size); 40 | 41 | myMap.clear(); 42 | 43 | console.log(myMap.size); 44 | -------------------------------------------------------------------------------- /Lessons/Week 17/127 - Map vs WeakMap.js: -------------------------------------------------------------------------------- 1 | /* 2 | - Map vs WeakMap 3 | WeakMap Allows Garbage Collector To Do Its Task But Not Map. 4 | 5 | Map => Key Can Be Anything 6 | WeakMap => Key Can Be Object Only 7 | */ 8 | 9 | let mapUser = { theName: "Elzero" }; 10 | 11 | let myMap = new Map(); 12 | 13 | myMap.set(mapUser, "Object Value"); 14 | 15 | mapUser = null; // Override The Reference 16 | 17 | console.log(myMap); 18 | 19 | console.log("#".repeat(20)); 20 | 21 | let wMapUser = { theName: "Elzero" }; 22 | 23 | let myWeakMap = new WeakMap(); 24 | 25 | myWeakMap.set(wMapUser, "Object Value"); 26 | 27 | wMapUser = null; // Override The Reference 28 | 29 | console.log(myWeakMap); 30 | -------------------------------------------------------------------------------- /Lessons/Week 17/128 - Array.from Method.js: -------------------------------------------------------------------------------- 1 | /* 2 | Array Methods 3 | - Array.from(Iterable, MapFunc, This) 4 | --- Variable 5 | --- String Numbers 6 | --- Set 7 | --- Using The Map Function 8 | --- Arrow Function 9 | --- Shorten The Method + Use arguments 10 | */ 11 | 12 | console.log(Array.from("Osama")); 13 | console.log( 14 | Array.from("12345", function (n) { 15 | return +n + +n; 16 | }) 17 | ); 18 | console.log(Array.from("12345", (n) => +n + +n)); 19 | 20 | let myArray = [1, 1, 1, 2, 3, 4]; 21 | 22 | let mySet = new Set(myArray); 23 | 24 | console.log(Array.from(mySet)); 25 | 26 | // console.log([...new Set(myArray)]); // Future 27 | 28 | function af() { 29 | return Array.from(arguments); 30 | } 31 | 32 | console.log(af("Osama", "Ahmed", "sayed", 1, 2, 3)); 33 | -------------------------------------------------------------------------------- /Lessons/Week 17/131 - Array.every Method.js: -------------------------------------------------------------------------------- 1 | /* 2 | Array Methods 3 | - Array.every(CallbackFunc(Element, Index, Array), This Argument) 4 | --- CallbackFunc => Function To Run On Every Element On The Given Array 5 | ------ Element => The Current Element To Process 6 | ------ Index => Index Of Current Element 7 | ------ Array => The Current Array Working With 8 | --- This Argument => Value To Use As This When Executing CallbackFunc 9 | */ 10 | 11 | const locations = { 12 | 20: "Place 1", 13 | 30: "Place 2", 14 | 50: "Place 3", 15 | 40: "Place 4", 16 | }; 17 | 18 | let mainLocation = 15; 19 | 20 | let locationsArray = Object.keys(locations); 21 | 22 | console.log(locationsArray); 23 | 24 | let locationArrayNumbers = locationsArray.map((n) => +n); 25 | 26 | console.log(locationArrayNumbers); 27 | 28 | let check = locationArrayNumbers.every(function (e) { 29 | return e > this; 30 | }, mainLocation); 31 | 32 | console.log(check); 33 | -------------------------------------------------------------------------------- /Lessons/Week 17/133 - Map And Set Challenge.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("Your Solution Here"); // 210 21 | -------------------------------------------------------------------------------- /Lessons/Week 18/134 - Intro & What Is Regular Expression.js: -------------------------------------------------------------------------------- 1 | /* 2 | Regular Expression 3 | - Email 4 | - IP 5 | - Phone 6 | - URL 7 | */ 8 | 9 | let str1 = "10 20 100 1000 5000"; 10 | let str2 = "Os1 Os12 Os123 Os123Os Os12312Os123"; 11 | 12 | let invalidEmail = "Osama@@@gmail....com"; 13 | let validEmail = "o@nn.sa"; 14 | 15 | let ip = "192.168.2.1"; // IPv4 16 | 17 | let url1 = "elzero.org"; 18 | let url2 = "elzero.org/"; 19 | let url3 = "http://elzero.org/"; 20 | let url4 = "http://www.elzero.org/"; 21 | let url5 = "https://.elzero.org/"; 22 | let url6 = "https://www.elzero.org/"; 23 | let url7 = "https://www.elzero.org/?facebookid=asdasdasd"; 24 | -------------------------------------------------------------------------------- /Lessons/Week 18/135 - RegExp Modifiers.js: -------------------------------------------------------------------------------- 1 | /* 2 | Regular Expression 3 | Syntax 4 | /pattern/modifier(s); 5 | new RegExp("pattern", "modifier(s)") 6 | 7 | Modifiers => Flags 8 | i => case-insensitive 9 | g => global 10 | m => Multilines 11 | 12 | Search Methods 13 | - match(Pattern) 14 | 15 | Match 16 | -- Matches A String Against a Regular Expression Pattern 17 | -- Returns An Array With The Matches 18 | -- Returns null If No Match Is Found. 19 | */ 20 | 21 | let myString = "Hello Elzero Web School I Love elzero"; 22 | 23 | let regex = /elzero/gi; 24 | 25 | console.log(myString.match(regex)); 26 | -------------------------------------------------------------------------------- /Lessons/Week 18/138 - RegExp Character Classes - Part 1.js: -------------------------------------------------------------------------------- 1 | /* 2 | Regular Expression 3 | Character Classes 4 | . => matches any character, except newline or other line terminators. 5 | \w => matches word characters. [a-z, A-Z, 0-9 And Underscore] 6 | \W => matches Non word characters 7 | \d => matches digits from 0 to 9. 8 | \D => matches non-digit characters. 9 | \s => matches whitespace character. 10 | \S => matches non whitespace character. 11 | */ 12 | 13 | let email = "O@@@g...com O@g.com O@g.net A@Y.com O-g.com o@s.org 1@1.com"; 14 | let dot = /./g; 15 | let word = /\w/g; 16 | let valid = /\w@\w.(com|net)/g; 17 | console.log(email.match(dot)); 18 | console.log(email.match(word)); 19 | console.log(email.match(valid)); 20 | -------------------------------------------------------------------------------- /Lessons/Week 18/139 - RegExp Character Classes - Part 2.js: -------------------------------------------------------------------------------- 1 | /* 2 | Regular Expression 3 | Character Classes 4 | \b => matches at the beginning or end of a word. 5 | \B => matches NOT at the beginning/end of a word. 6 | 7 | Test Method 8 | pattern.test(input) 9 | */ 10 | 11 | let names = "Sayed 1Spam 2Spam 3Spam Spam4 Spam5 Osama Ahmed Aspamo"; 12 | let re = /(\bspam|spam\b)/gi; 13 | console.log(names.match(re)); 14 | 15 | console.log(re.test(names)); 16 | console.log(/(\bspam|spam\b)/gi.test("Osama")); 17 | console.log(/(\bspam|spam\b)/gi.test("1Spam")); 18 | console.log(/(\bspam|spam\b)/gi.test("Spam1")); 19 | -------------------------------------------------------------------------------- /Lessons/Week 18/140 - RegExp Quantifiers - Part 1.js: -------------------------------------------------------------------------------- 1 | /* 2 | Regular Expression 3 | Quantifiers 4 | n+ => One Or More 5 | n* => zero or more 6 | n? => zero or one 7 | */ 8 | 9 | let mails = "o@nn.sa osama@gmail.com elzero@gmail.net osama@mail.ru"; // All Emails 10 | // let mailsRe = /\w+@\w+.(com|net)/ig; 11 | let mailsRe = /\w+@\w+.\w+/gi; 12 | console.log(mails.match(mailsRe)); 13 | 14 | let nums = "0110 10 150 05120 0560 350 00"; // 0 Numbers Or No 0 15 | let numsRe = /0\d*0/gi; 16 | console.log(nums.match(numsRe)); 17 | 18 | let urls = "https://google.com http://www.website.net web.com"; // http + https 19 | let urlsRe = /(https?:\/\/)?(www.)?\w+.\w+/gi; 20 | console.log(urls.match(urlsRe)); 21 | -------------------------------------------------------------------------------- /Lessons/Week 18/141 - RegExp Quantifiers - Part 2.js: -------------------------------------------------------------------------------- 1 | /* 2 | Regular Expression 3 | Quantifiers 4 | n{x} => Number of 5 | n{x,y} => Range 6 | n{x,} => At Least x 7 | */ 8 | 9 | let serials = "S100S S3000S S50000S S950000S"; 10 | 11 | console.log(serials.match(/s\d{3}s/gi)); // S[Three Digits]S 12 | console.log(serials.match(/s\d{4,5}s/gi)); // S[Four Or Five Digits]S 13 | console.log(serials.match(/s\d{4,}s/gi)); // S[At Least Four Digits]S 14 | -------------------------------------------------------------------------------- /Lessons/Week 18/142 - RegExp Quantifiers - Part 3.js: -------------------------------------------------------------------------------- 1 | /* 2 | Regular Expression 3 | Quantifiers 4 | $ => End With Something 5 | ^ => Start With Something 6 | ?= => Followed By Something 7 | ?! => Not Followed By Something 8 | */ 9 | 10 | let myString = "We Love Programming"; 11 | let names = "1OsamaZ 2AhmedZ 3Mohammed 4MoustafaZ 5GamalZ"; 12 | 13 | console.log(/ing$/gi.test(myString)); 14 | console.log(/^we/gi.test(myString)); 15 | console.log(/lz$/gi.test(names)); 16 | console.log(/^\d/gi.test(names)); 17 | 18 | console.log(names.match(/\d\w{5}(?=Z)/gi)); 19 | console.log(names.match(/\d\w{8}(?!Z)/gi)); 20 | -------------------------------------------------------------------------------- /Lessons/Week 18/143 - Replace With RegExp Pattern.js: -------------------------------------------------------------------------------- 1 | /* 2 | Regular Expression 3 | - replace 4 | - replaceAll 5 | */ 6 | 7 | let txt = "We Love Programming And @ Because @ Is Amazing"; 8 | console.log(txt.replace("@", "JavaScript")); 9 | console.log(txt.replaceAll("@", "JavaScript")); 10 | let re = /@/gi; 11 | console.log(txt.replaceAll(re, "JavaScript")); 12 | console.log(txt.replaceAll(/@/gi, "JavaScript")); 13 | -------------------------------------------------------------------------------- /Lessons/Week 18/144 - Form Validation With RegExp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 144 - Regular Expression Form Validation 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Lessons/Week 18/144 - Form Validation With RegExp/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | body { 5 | font-family: sans-serif; 6 | } 7 | form { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | flex-direction: column; 12 | gap: 10px; 13 | } 14 | form input { 15 | width: 300px; 16 | padding: 10px 15px; 17 | } 18 | form input:first-child { 19 | outline-color: #b00020; 20 | } 21 | form input:last-child { 22 | border-color: #b00020; 23 | outline: none; 24 | } 25 | -------------------------------------------------------------------------------- /Lessons/Week 18/144 - Form Validation With RegExp/master.js: -------------------------------------------------------------------------------- 1 | /* 2 | Regular Expression 3 | - Input Form Validation Practice 4 | */ 5 | 6 | document.getElementById("register").onsubmit = function () { 7 | let phoneInput = document.getElementById("phone").value; 8 | let phoneRe = /\(\d{4}\)\s\d{3}-\d{4}/; // (1234) 567-8910 9 | let validationResult = phoneRe.test(phoneInput); 10 | if (validationResult === false) return false; 11 | return true; 12 | }; 13 | -------------------------------------------------------------------------------- /Lessons/Week 18/145 - Test Your RegExp And Discussions.js: -------------------------------------------------------------------------------- 1 | // https://regexr.com/ 2 | // https://www.regextester.com/ 3 | // https://regex101.com/ 4 | -------------------------------------------------------------------------------- /Lessons/Week 18/146 - RegExp Challenge.js: -------------------------------------------------------------------------------- 1 | /* 2 | Regular Expression 3 | - Challenge 4 | */ 5 | 6 | let url1 = "elzero.org"; 7 | let url2 = "http://elzero.org"; 8 | let url3 = "https://elzero.org"; 9 | let url4 = "https://www.elzero.org"; 10 | let url5 = "https://www.elzero.org:8080/articles.php?id=100&cat=topics"; 11 | let url6 = "https://www.youtube.com/watch?v=_n_oiZRqH_k"; 12 | 13 | let re = //ig; 14 | console.log(url1.match(re)); 15 | console.log(url2.match(re)); 16 | console.log(url3.match(re)); 17 | console.log(url4.match(re)); 18 | console.log(url5.match(re)); 19 | console.log(url6.match(re)); 20 | -------------------------------------------------------------------------------- /Lessons/Week 19/147 - OOP Introduction.js: -------------------------------------------------------------------------------- 1 | // This Lesson Contains a ppt slide 2 | // https://docs.google.com/presentation/d/10JibB9Dk0_ZCE4hTYf9-XWlzxW5FkGTx/edit?usp=sharing&ouid=106428879811142598448&rtpof=true&sd=true 3 | -------------------------------------------------------------------------------- /Lessons/Week 19/148 - Constructor Function Introduction.js: -------------------------------------------------------------------------------- 1 | /* 2 | Constructor Function 3 | */ 4 | 5 | function User(id, username, salary) { 6 | this.i = id; 7 | this.u = username; 8 | this.s = salary + 1000; 9 | } 10 | 11 | let userOne = new User(100, "Elzero", 5000); 12 | let userTwo = new User(101, "Hassan", 6000); 13 | let userThree = new User(102, "Sayed", 7000); 14 | 15 | console.log(userOne.i); 16 | console.log(userOne.u); 17 | console.log(userOne.s); 18 | 19 | console.log(userTwo.i); 20 | console.log(userTwo.u); 21 | console.log(userTwo.s); 22 | 23 | console.log(userThree.i); 24 | console.log(userThree.u); 25 | console.log(userThree.s); 26 | 27 | // const userOne = { 28 | // id: 100, 29 | // username: "Elzero", 30 | // salary: 5000, 31 | // }; 32 | 33 | // const userTwo = { 34 | // id: 101, 35 | // username: "Hassan", 36 | // salary: 6000, 37 | // }; 38 | 39 | // const userThree = { 40 | // id: 102, 41 | // username: "Sayed", 42 | // salary: 7000, 43 | // }; 44 | -------------------------------------------------------------------------------- /Lessons/Week 19/149 - Constructor Function New Syntax.js: -------------------------------------------------------------------------------- 1 | /* 2 | Constructor Function 3 | - New Syntax 4 | */ 5 | 6 | class User { 7 | constructor(id, username, salary) { 8 | this.i = id; 9 | this.u = username; 10 | this.s = salary + 1000; 11 | } 12 | } 13 | 14 | let userOne = new User(100, "Elzero", 5000); 15 | 16 | console.log(userOne.i); 17 | console.log(userOne.u); 18 | console.log(userOne.s); 19 | 20 | console.log(userOne instanceof User); 21 | console.log(userOne.constructor === User); 22 | -------------------------------------------------------------------------------- /Lessons/Week 19/150 - Deal With Properties & Methods.js: -------------------------------------------------------------------------------- 1 | /* 2 | Constructor Function 3 | - Deal With Properties And Methods 4 | */ 5 | 6 | class User { 7 | constructor(id, username, salary) { 8 | // Properties 9 | this.i = id; 10 | this.u = username || "Unknown"; 11 | this.s = salary < 6000 ? salary + 500 : salary; 12 | this.msg = function () { 13 | return `Hello ${this.u} Your Salary Is ${this.s}`; 14 | }; 15 | } 16 | // Methods 17 | writeMsg() { 18 | return `Hello ${this.u} Your Salary Is ${this.s}`; 19 | } 20 | } 21 | 22 | let userOne = new User(100, "Elzero", 5000); 23 | let userTwo = new User(101, "", 6000); 24 | 25 | console.log(userOne.u); 26 | console.log(userOne.s); 27 | console.log(userOne.msg()); 28 | console.log(userOne.writeMsg()); 29 | 30 | console.log(userTwo.u); 31 | console.log(userTwo.s); 32 | console.log(userTwo.msg); // Native Code 33 | console.log(userTwo.writeMsg); // Native Code 34 | -------------------------------------------------------------------------------- /Lessons/Week 19/151 - Update Properties & Built In Constructors.js: -------------------------------------------------------------------------------- 1 | /* 2 | Constructor Function 3 | - Update Properties 4 | - Built In Constructors 5 | */ 6 | 7 | class User { 8 | constructor(id, username, salary) { 9 | this.i = id; 10 | this.u = username; 11 | this.s = salary; 12 | } 13 | updateName(newName) { 14 | this.u = newName; 15 | } 16 | } 17 | 18 | let userOne = new User(100, "Elzero", 5000); 19 | 20 | console.log(userOne.u); 21 | userOne.updateName("Osama"); 22 | console.log(userOne.u); 23 | 24 | let strOne = "Elzero"; 25 | let strTwo = new String("Elzero"); 26 | 27 | console.log(typeof strOne); 28 | console.log(typeof strTwo); 29 | 30 | console.log(strOne instanceof String); 31 | console.log(strTwo instanceof String); 32 | 33 | console.log(strOne.constructor === String); 34 | console.log(strTwo.constructor === String); 35 | -------------------------------------------------------------------------------- /Lessons/Week 19/152 - Class Static Properties & Methods.js: -------------------------------------------------------------------------------- 1 | /* 2 | Class 3 | - Static Properties And Methods 4 | */ 5 | 6 | class User { 7 | // Static Property 8 | static count = 0; 9 | 10 | constructor(id, username, salary) { 11 | this.i = id; 12 | this.u = username; 13 | this.s = salary; 14 | User.count++; 15 | } 16 | 17 | // Static Methods 18 | static sayHello() { 19 | return `Hello From Class`; 20 | } 21 | static countMembers() { 22 | return `${this.count} Members Created`; 23 | } 24 | } 25 | 26 | let userOne = new User(100, "Elzero", 5000); 27 | let userTwo = new User(101, "Ahmed", 5000); 28 | let userThree = new User(102, "Sayed", 5000); 29 | 30 | console.log(userOne.u); 31 | console.log(userTwo.u); 32 | console.log(userOne.count); 33 | console.log(User.count); 34 | console.log(User.sayHello()); 35 | console.log(User.countMembers()); 36 | -------------------------------------------------------------------------------- /Lessons/Week 19/154 - Class Encapsulation.js: -------------------------------------------------------------------------------- 1 | /* 2 | Encapsulation 3 | - Class Fields Are Public By Default 4 | - Guards The Data Against Illegal Access. 5 | - Helps To Achieve The Target Without Revealing Its Complex Details. 6 | - Will Reduce Human Errors. 7 | - Make The App More Flexible And Manageable. 8 | - Simplifies The App. 9 | */ 10 | 11 | class User { 12 | // Private Property 13 | #e; 14 | constructor(id, username, eSalary) { 15 | this.i = id; 16 | this.u = username; 17 | this.#e = eSalary; 18 | } 19 | getSalary() { 20 | return parseInt(this.#e); 21 | } 22 | } 23 | 24 | let userOne = new User(100, "Elzero", "5000 Gneh"); 25 | 26 | console.log(userOne.u); 27 | console.log(userOne.getSalary() * 0.3); 28 | -------------------------------------------------------------------------------- /Lessons/Week 19/155 - Prototype Introduction.js: -------------------------------------------------------------------------------- 1 | /* 2 | Prototype 3 | - Introduction 4 | - Prototypes are the mechanism by which JavaScript objects 5 | inherit features from one another. 6 | */ 7 | 8 | class User { 9 | constructor(id, username) { 10 | this.i = id; 11 | this.u = username; 12 | } 13 | sayHello() { 14 | return `Hello ${this.u}`; 15 | } 16 | } 17 | 18 | let userOne = new User(100, "Elzero"); 19 | console.log(userOne.u); 20 | 21 | console.log(User.prototype); 22 | 23 | let strOne = "Elzero"; 24 | 25 | console.log(String.prototype); 26 | -------------------------------------------------------------------------------- /Lessons/Week 19/156 - Add To Prototype Chain.js: -------------------------------------------------------------------------------- 1 | /* 2 | Prototype 3 | - Add To Prototype Chain 4 | - Extend Built In Constructors Features 5 | */ 6 | 7 | class User { 8 | constructor(id, username) { 9 | this.i = id; 10 | this.u = username; 11 | } 12 | sayHello() { 13 | return `Hello ${this.u}`; 14 | } 15 | } 16 | 17 | let userOne = new User(100, "Elzero"); 18 | console.log(userOne.u); 19 | console.log(User.prototype); 20 | console.log(userOne); 21 | 22 | User.prototype.sayWelcome = function () { 23 | return `Welcome ${this.u}`; 24 | }; 25 | 26 | Object.prototype.love = "Elzero Web School"; 27 | 28 | String.prototype.addDotBeforeAndAfter = function (val) { 29 | return `.${this}.`; 30 | }; 31 | 32 | let myString = "Elzero"; 33 | -------------------------------------------------------------------------------- /Lessons/Week 19/157 - Object Meta Data & Descriptor - Part 1.js: -------------------------------------------------------------------------------- 1 | /* 2 | Object Meta Data And Descriptor 3 | - writable 4 | - enumerable 5 | - configurable [Cannot Delete Or Reconfigure] 6 | */ 7 | 8 | const myObject = { 9 | a: 1, 10 | b: 2, 11 | }; 12 | 13 | Object.defineProperty(myObject, "c", { 14 | writable: false, 15 | enumerable: true, 16 | configurable: false, 17 | value: 3, 18 | }); 19 | 20 | // Object.defineProperty(myObject, "c", { 21 | // writable: false, 22 | // enumerable: true, 23 | // configurable: true, <= Cannot redefine property 24 | // value: 3, 25 | // }); 26 | 27 | myObject.c = 100; 28 | 29 | console.log(delete myObject.c); 30 | 31 | for (let prop in myObject) { 32 | console.log(prop, myObject[prop]); 33 | } 34 | 35 | console.log(myObject); 36 | -------------------------------------------------------------------------------- /Lessons/Week 19/158 - Object Meta Data & Descriptor - Part 2.js: -------------------------------------------------------------------------------- 1 | /* 2 | Object Meta Data And Descriptor 3 | - Define Multiple Properties 4 | - Check Descriptors 5 | */ 6 | 7 | const myObject = { 8 | a: 1, 9 | b: 2, 10 | }; 11 | 12 | Object.defineProperties(myObject, { 13 | c: { 14 | configurable: true, 15 | value: 3, 16 | }, 17 | d: { 18 | configurable: true, 19 | value: 4, 20 | }, 21 | e: { 22 | configurable: true, 23 | value: 5, 24 | }, 25 | }); 26 | 27 | console.log(myObject); 28 | 29 | console.log(Object.getOwnPropertyDescriptor(myObject, "d")); 30 | console.log(Object.getOwnPropertyDescriptors(myObject)); 31 | -------------------------------------------------------------------------------- /Lessons/Week 20/160 - Get Date & Time.js: -------------------------------------------------------------------------------- 1 | /* 2 | Date And Time 3 | - getTime() => Number Of Milliseconds 4 | - getDate() => Day Of The Month 5 | - getFullYear() 6 | - getMonth() => Zero Based 7 | - getDay() => Day Of The Week 8 | - getHours() 9 | - getMinutes() 10 | - getSeconds() 11 | */ 12 | 13 | let dateNow = new Date(); 14 | let birthday = new Date("Oct 25, 82"); 15 | let dateDiff = dateNow - birthday; 16 | 17 | console.log(dateDiff); 18 | console.log(dateDiff / 1000 / 60 / 60 / 24 / 365); 19 | 20 | console.log(dateNow); 21 | console.log(dateNow.getTime()); 22 | console.log(dateNow.getDate()); 23 | console.log(dateNow.getFullYear()); 24 | console.log(dateNow.getMonth()); 25 | console.log(dateNow.getDay()); 26 | console.log(dateNow.getHours()); 27 | console.log(dateNow.getMinutes()); 28 | console.log(dateNow.getSeconds()); 29 | -------------------------------------------------------------------------------- /Lessons/Week 20/163 - Tracking Operations Time.js: -------------------------------------------------------------------------------- 1 | /* 2 | Date And Time 3 | - Track Operations Time 4 | 5 | Search 6 | - performance.now() 7 | - performance.mark() 8 | */ 9 | 10 | // Start Time 11 | let start = new Date(); 12 | 13 | // Operation 14 | for (let i = 0; i < 100000; i++) { 15 | // document.write(`
${i}
`); 16 | let div = document.createElement("div"); 17 | div.appendChild(document.createTextNode(i)); 18 | document.body.appendChild(div); 19 | } 20 | 21 | // Time End 22 | let end = new Date(); 23 | 24 | // Operation Duration 25 | let duration = end - start; 26 | 27 | console.log(duration); 28 | -------------------------------------------------------------------------------- /Lessons/Week 20/164 - Generator Function Introduction.js: -------------------------------------------------------------------------------- 1 | /* 2 | Generators 3 | - Generator Function Run Its Code When Required. 4 | - Generator Function Return Special Object [Generator Object] 5 | - Generators Are Iterable 6 | */ 7 | 8 | function* generateNumbers() { 9 | yield 1; 10 | console.log("Hello After Yield 1"); 11 | yield 2; 12 | yield 3; 13 | yield 4; 14 | } 15 | 16 | let generator = generateNumbers(); 17 | 18 | console.log(typeof generator); 19 | console.log(generator); 20 | 21 | console.log(generator.next()); 22 | console.log(generator.next()); 23 | console.log(generator.next()); 24 | console.log(generator.next()); 25 | console.log(generator.next()); 26 | 27 | for (let value of generateNumbers()) { 28 | console.log(value); 29 | } 30 | 31 | for (let value of generator) { 32 | console.log(value); 33 | } 34 | -------------------------------------------------------------------------------- /Lessons/Week 20/165 - Delegate Generator Function.js: -------------------------------------------------------------------------------- 1 | /* 2 | Generators 3 | - Delegate Generator 4 | */ 5 | 6 | function* generateNums() { 7 | yield 1; 8 | yield 2; 9 | yield 3; 10 | } 11 | 12 | function* generateLetters() { 13 | yield "A"; 14 | yield "B"; 15 | yield "C"; 16 | } 17 | 18 | function* generateAll() { 19 | yield* generateNums(); 20 | yield* generateLetters(); 21 | yield* [4, 5, 6]; 22 | } 23 | 24 | let generator = generateAll(); 25 | 26 | console.log(generator.next()); 27 | console.log(generator.next()); 28 | console.log(generator.next()); 29 | console.log(generator.next()); 30 | console.log(generator.next()); 31 | console.log(generator.next()); 32 | console.log(generator.return("Z")); 33 | console.log(generator.next()); 34 | console.log(generator.next()); 35 | console.log(generator.next()); 36 | -------------------------------------------------------------------------------- /Lessons/Week 20/166 - Generate Infinite Numbers.js: -------------------------------------------------------------------------------- 1 | /* 2 | Generators 3 | - Generate Infinite Numbers 4 | - Use Return Inside Generators 5 | */ 6 | 7 | function* generateNumbers() { 8 | // yield 1; 9 | // yield 2; 10 | // return "A"; 11 | // yield 3; 12 | // yield 4; 13 | let index = 0; 14 | 15 | while (true) { 16 | yield index++; 17 | } 18 | } 19 | 20 | let generator = generateNumbers(); 21 | 22 | console.log(generator.next()); 23 | console.log(generator.next()); 24 | console.log(generator.next()); 25 | console.log(generator.next()); 26 | -------------------------------------------------------------------------------- /Lessons/Week 20/167 - Modules Import & Export/app.js: -------------------------------------------------------------------------------- 1 | import { a, arr, saySomething as s } from "./main.js"; 2 | 3 | console.log(a); 4 | console.log(arr); 5 | console.log(s()); 6 | -------------------------------------------------------------------------------- /Lessons/Week 20/167 - Modules Import & Export/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 167 - Modules Import And Export 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lessons/Week 20/167 - Modules Import & Export/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | Modules 3 | - Import And Export 4 | */ 5 | 6 | let a = 10; 7 | let arr = [1, 2, 3, 4]; 8 | 9 | function saySomething() { 10 | return `Something`; 11 | } 12 | 13 | export { a, arr, saySomething }; 14 | -------------------------------------------------------------------------------- /Lessons/Week 20/168 - Named vs Default Export And Import All/app.js: -------------------------------------------------------------------------------- 1 | // import elzero, { myNumber, arr, saySomething as s } from "./main.js"; 2 | 3 | // console.log(myNumber); 4 | // console.log(arr); 5 | // console.log(s()); 6 | // console.log(elzero()); 7 | 8 | import * as all from "./main.js"; 9 | 10 | console.log(all); 11 | 12 | console.log(all.myNumber); 13 | console.log(all.arr); 14 | -------------------------------------------------------------------------------- /Lessons/Week 20/168 - Named vs Default Export And Import All/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 168 - Named vs Default Export And Import All 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lessons/Week 20/168 - Named vs Default Export And Import All/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | Modules 3 | - Export Alias 4 | - Named Export 5 | - Default Export 6 | - Import All 7 | */ 8 | 9 | let a = 10; 10 | let arr = [1, 2, 3, 4]; 11 | 12 | function saySomething() { 13 | return `Something`; 14 | } 15 | 16 | export { a as myNumber, arr, saySomething }; 17 | 18 | export default function () { 19 | return `Hello`; 20 | } 21 | -------------------------------------------------------------------------------- /Lessons/Week 21/169 - Introduction & What Is JSON/test.json: -------------------------------------------------------------------------------- 1 | { 2 | "widget": { 3 | "debug": "on", 4 | "window": { 5 | "title": "Sample Konfabulator Widget", 6 | "name": "main_window", 7 | "width": 500, 8 | "height": 500 9 | }, 10 | "image": { 11 | "src": "Images/Sun.png", 12 | "name": "sun1", 13 | "hOffset": 250, 14 | "vOffset": 250, 15 | "alignment": "center" 16 | }, 17 | "text": { 18 | "data": "Click Here", 19 | "size": 36, 20 | "style": "bold", 21 | "name": "text1", 22 | "hOffset": 250, 23 | "vOffset": 100, 24 | "alignment": "center", 25 | "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;" 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /Lessons/Week 21/169 - Introduction & What Is JSON/test.xml: -------------------------------------------------------------------------------- 1 | 2 | on 3 | 4 | main_window 5 | 500 6 | 500 7 | 8 | 9 | 250 10 | 250 11 | center 12 | 13 | 14 | text1 15 | 250 16 | 100 17 | center 18 | 19 | sun1.opacity = (sun1.opacity / 100) * 90; 20 | 21 | 22 | -------------------------------------------------------------------------------- /Lessons/Week 21/170 - JSON Syntax & Compare With JS Object/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | JSON Syntax 3 | - Data Added Inside Curly Braces { } 4 | - Data Added With Key : Value 5 | - Key Should Be String Wrapped In Double Quotes 6 | - Data Separated By Comma 7 | - Square Brackets [] For Arrays 8 | - Curly Braces {} For Objects 9 | 10 | Available Data Types 11 | - String 12 | - Number 13 | - Object 14 | - Array 15 | - Boolean Values 16 | - null 17 | */ 18 | -------------------------------------------------------------------------------- /Lessons/Week 21/170 - JSON Syntax & Compare With JS Object/test.json: -------------------------------------------------------------------------------- 1 | { 2 | "string": "Elzero", 3 | "number": 100, 4 | "object": { "EG": "Giza", "KSA": "Riyadh" }, 5 | "array": ["HTML", "CSS", "JS"], 6 | "boolean": true, 7 | "null": null 8 | } 9 | -------------------------------------------------------------------------------- /Lessons/Week 21/171 - What is API.js: -------------------------------------------------------------------------------- 1 | /* 2 | JSON 3 | - API Overview 4 | - Tools To Test API 5 | - Preview Github API 6 | 7 | https://api.github.com/users/elzerowebschool 8 | https://api.github.com/users/elzerowebschool/repos 9 | https://myjson.dit.upm.es/ 10 | */ 11 | -------------------------------------------------------------------------------- /Lessons/Week 21/172 - Parse & Stringify.js: -------------------------------------------------------------------------------- 1 | /* 2 | JSON 3 | - JSON.parse => Convert Text Data To JS Object 4 | - JSON.stringify => Convert JS Object To JSON 5 | */ 6 | 7 | // Get From Server 8 | const myJsonObjectFromServer = '{"Username": "Osama", "Age": 39}'; 9 | console.log(typeof myJsonObjectFromServer); 10 | console.log(myJsonObjectFromServer); 11 | 12 | // Convert To JS Object 13 | const myJsObject = JSON.parse(myJsonObjectFromServer); 14 | console.log(typeof myJsObject); 15 | console.log(myJsObject); 16 | 17 | // Update Data 18 | myJsObject["Username"] = "Elzero"; 19 | myJsObject["Age"] = 40; 20 | 21 | // Send To Server 22 | const myJsonObjectToServer = JSON.stringify(myJsObject); 23 | console.log(typeof myJsonObjectToServer); 24 | console.log(myJsonObjectToServer); 25 | -------------------------------------------------------------------------------- /Lessons/Week 21/176 - What Is AJAX And Network Information.js: -------------------------------------------------------------------------------- 1 | /* 2 | AJAX 3 | - Asynchronous JavaScript And XML 4 | - Approach To Use Many Technologies Together [HTML, CSS, Js, DOM] 5 | - It Use "XMLHttpRequest" Object To Interact With The Server 6 | - You Can Fetch Data Or Send Data Without Page Refresh 7 | - Examples 8 | --- Youtube Studio 9 | --- Google Drive 10 | --- Upload Article Photo 11 | --- Form Check Name 12 | 13 | Test new XMLHttpRequest(); 14 | Request And Response 15 | Status Code 16 | */ 17 | 18 | let req = new XMLHttpRequest(); 19 | console.log(req); 20 | -------------------------------------------------------------------------------- /Lessons/Week 21/177 - Request And Response From Real API.js: -------------------------------------------------------------------------------- 1 | /* 2 | Ajax 3 | - Ready State => Status Of The Request 4 | [0] Request Not Initialized 5 | [1] Server Connection Established 6 | [2] Request Received 7 | [3] Processing Request 8 | [4] Request Is Finished And Response Is Ready 9 | - Status 10 | [200] Response Is Successful 11 | [404] Not Found 12 | */ 13 | 14 | let myRequest = new XMLHttpRequest(); 15 | myRequest.open("GET", "https://api.github.com/users/elzerowebschool/repos"); 16 | myRequest.send(); 17 | console.log(myRequest); 18 | 19 | myRequest.onreadystatechange = function () { 20 | // console.log(myRequest.readyState); 21 | // console.log(myRequest.status); 22 | if (this.readyState === 4 && this.status === 200) { 23 | console.log(this.responseText); 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /Lessons/Week 22/182 - Promise And XHR.js: -------------------------------------------------------------------------------- 1 | /* 2 | Promise And XHR 3 | */ 4 | 5 | const getData = (apiLink) => { 6 | return new Promise((resolve, reject) => { 7 | let myRequest = new XMLHttpRequest(); 8 | myRequest.onload = function () { 9 | if (this.readyState === 4 && this.status === 200) { 10 | resolve(JSON.parse(this.responseText)); 11 | } else { 12 | reject(Error("No Data Found")); 13 | } 14 | }; 15 | 16 | myRequest.open("GET", apiLink); 17 | myRequest.send(); 18 | }); 19 | }; 20 | 21 | getData("https://api.github.com/users/elzerowebschool/repos") 22 | .then((result) => { 23 | result.length = 10; 24 | return result; 25 | }) 26 | .then((result) => console.log(result[0].name)) 27 | .catch((rej) => console.log(rej)); 28 | -------------------------------------------------------------------------------- /Lessons/Week 22/186 - Await & Training.js: -------------------------------------------------------------------------------- 1 | /* 2 | Await 3 | - Await Works Only Inside Asnyc Functions 4 | - Await Make JavaScript Wait For The Promise Result 5 | - Await Is More Elegant Syntax Of Getting Promise Result 6 | */ 7 | 8 | const myPromise = new Promise((resolve, reject) => { 9 | setTimeout(() => { 10 | // resolve("Iam The Good Promise"); 11 | reject(Error("Iam The Bad Promise")); 12 | }, 3000); 13 | }); 14 | 15 | async function readData() { 16 | console.log("Before Promise"); 17 | // myPromise.then((resolvedValue) => console.log(resolvedValue)); 18 | // console.log(await myPromise); 19 | console.log(await myPromise.catch((err) => err)); 20 | console.log("After Promise"); 21 | } 22 | 23 | readData(); 24 | -------------------------------------------------------------------------------- /Lessons/Week 22/188 - The End & Advices.js: -------------------------------------------------------------------------------- 1 | /* 2 | The End 3 | - Other Information => Practice + Tutorials 4 | - Problem Solving 5 | - Search In Lessons 6 | - Advanced Books 7 | */ 8 | --------------------------------------------------------------------------------