├── 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 |
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 |
11 |
12 |
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 |
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 |
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 | Repository Name |
15 | Stars |
16 | Visit Link |
17 |
18 |
19 |
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 |
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 |
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 |
--------------------------------------------------------------------------------