├── 01-Javascript-Fundamentals-Part -1-Section-1
    ├── end
    │   ├── index.html
    │   └── script.js
    └── start
    │   └── index.html
├── 02-Javascript-Fundamentals-Part-2-Section-2
    ├── end
    │   ├── index.html
    │   └── script.js
    └── starter
    │   ├── index.html
    │   └── script.js
├── 03-Developer-Skills
    ├── .prettierrc
    └── starter
    │   ├── index.html
    │   └── script.js
├── 04-Guess-My-Number
    ├── demo
    │   ├── .prettierrc
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    ├── end
    │   ├── .prettierrc
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    └── starter
    │   ├── .prettierrc
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
├── 05-Modal-Window
    ├── end
    │   ├── .prettierrc
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    └── starter
    │   ├── .prettierrc
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
├── 06-Dice-Game
    ├── end
    │   ├── .prettierrc
    │   ├── Thumbs.db
    │   ├── dice-1.png
    │   ├── dice-2.png
    │   ├── dice-3.png
    │   ├── dice-4.png
    │   ├── dice-5.png
    │   ├── dice-6.png
    │   ├── dice-game-flowchart.png
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    └── starter
    │   ├── .prettierrc
    │   ├── Thumbs.db
    │   ├── dice-1.png
    │   ├── dice-2.png
    │   ├── dice-3.png
    │   ├── dice-4.png
    │   ├── dice-5.png
    │   ├── dice-6.png
    │   ├── dice-game-flowchart.png
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
├── 07-Navbar-project assignment- 1
    ├── Bounce-Bar-Preloader-1.gif
    ├── Thumbs.db
    ├── index.html
    ├── index.js
    ├── load.gif
    ├── logo.svg
    └── styles.css
├── 08-Sidebar-project - assignment-2
    ├── index.html
    ├── index.js
    ├── logo.svg
    └── styles.css
├── 09-Behind the Scene
    ├── final
    │   ├── index.html
    │   └── index.js
    └── start
    │   ├── index.html
    │   └── index.js
├── 10-Data-Structures-Operators
    ├── 10-Data-Structures-Operators
    │   ├── end
    │   │   ├── .prettierrc
    │   │   ├── index.html
    │   │   └── script.js
    │   └── starter
    │   │   ├── .prettierrc
    │   │   ├── index.html
    │   │   └── script.js
    ├── end
    │   ├── .prettierrc
    │   ├── index.html
    │   └── script.js
    └── starter
    │   ├── .prettierrc
    │   ├── index.html
    │   └── script.js
├── 11-WEEK16-ASSIGNMENT-STARTER FILES
    ├── index.html
    ├── script.js
    └── style.css
├── 12-Closer Look at Functions
    ├── end
    │   ├── index.html
    │   └── script.js
    └── start
    │   └── index.html
├── 13-Arrays-Mobile Banking Website
    ├── final
    │   ├── .prettierrc
    │   ├── Bankist-flowchart.png
    │   ├── icon.png
    │   ├── index.html
    │   ├── logo.png
    │   ├── script.js
    │   └── style.css
    └── starter
    │   ├── .prettierrc
    │   ├── Bankist-flowchart.png
    │   ├── icon.png
    │   ├── index.html
    │   ├── logo.png
    │   ├── script.js
    │   └── style.css
├── 14-Numbers-Dates-Timers-Mobile Banking Website
    ├── final
    │   ├── .prettierrc
    │   ├── Bankist-flowchart.png
    │   ├── icon.png
    │   ├── index.html
    │   ├── logo.png
    │   ├── script.js
    │   └── style.css
    └── starter
    │   ├── .prettierrc
    │   ├── Bankist-flowchart.png
    │   ├── icon.png
    │   ├── index.html
    │   ├── logo.png
    │   ├── script.js
    │   └── style.css
├── 15-Advanced-DOM
    ├── final
    │   ├── .prettierrc
    │   ├── img
    │   │   ├── Thumbs.db
    │   │   ├── card-lazy.jpg
    │   │   ├── card.jpg
    │   │   ├── digital-lazy.jpg
    │   │   ├── digital.jpg
    │   │   ├── grow-lazy.jpg
    │   │   ├── grow.jpg
    │   │   ├── hero.png
    │   │   ├── icon.png
    │   │   ├── icons.svg
    │   │   ├── img-1.jpg
    │   │   ├── img-2.jpg
    │   │   ├── img-3.jpg
    │   │   ├── img-4.jpg
    │   │   ├── logo.png
    │   │   ├── user-1.png
    │   │   ├── user-2.png
    │   │   └── user-3.png
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    └── starter
    │   ├── .prettierrc
    │   ├── img
    │       ├── Thumbs.db
    │       ├── card-lazy.jpg
    │       ├── card.jpg
    │       ├── digital-lazy.jpg
    │       ├── digital.jpg
    │       ├── grow-lazy.jpg
    │       ├── grow.jpg
    │       ├── hero.png
    │       ├── icon.png
    │       ├── icons.svg
    │       ├── img-1.jpg
    │       ├── img-2.jpg
    │       ├── img-3.jpg
    │       ├── img-4.jpg
    │       ├── logo.png
    │       ├── user-1.png
    │       ├── user-2.png
    │       └── user-3.png
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
├── 16-OOP
    ├── final
    │   ├── .prettierrc
    │   ├── index.html
    │   └── script.js
    └── starter
    │   ├── .prettierrc
    │   ├── index.html
    │   └── script.js
├── 17-Asynchronous
    ├── final
    │   ├── .prettierrc
    │   ├── img
    │   │   ├── Thumbs.db
    │   │   ├── img-1.jpg
    │   │   ├── img-2.jpg
    │   │   └── img-3.jpg
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    └── starter
    │   ├── .prettierrc
    │   ├── img
    │       ├── Thumbs.db
    │       ├── img-1.jpg
    │       ├── img-2.jpg
    │       └── img-3.jpg
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
└── CODING CHALLENGE 1 -  SECTION 7.pdf


/01-Javascript-Fundamentals-Part -1-Section-1/end/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>JavaScript Fundamentals – Part 1</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #2a2e80, #212aca);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |     </style>
25 |   </head>
26 |   <body>
27 |     <h1>JavaScript Fundamentals – Part 1</h1>
28 |     <script src="./script.js"></script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/01-Javascript-Fundamentals-Part -1-Section-1/end/script.js:
--------------------------------------------------------------------------------
  1 | /* console.log("yaaayyym, i am excited");
  2 | alert("hello world");*/
  3 | 
  4 | // VALUES AND VARIABLES
  5 | // console.log('Ayo');
  6 | // console.log(100);
  7 | 
  8 | // let firstName = "dumebi";
  9 | // let lastName = "Ciroma";
 10 | // let myFirstName = "Ayo";
 11 | 
 12 | // let Name = "Ayo";
 13 | // console.log(firstName);
 14 | // console.log(firstName);
 15 | // console.log(firstName)
 16 | 
 17 | // let _firstJob = "Programmer";
 18 | // let currentJob = "teacher";
 19 | 
 20 | // let job1 = "Programmer";
 21 | // let job2 = "teacher";
 22 | 
 23 | //TOPIC 4 -DATA TYPES
 24 | // let highScore = 100;
 25 | // let playerName = "Ciroma";
 26 | // console.log(highScore)
 27 | // Primitive data types
 28 | // 1)Numbers
 29 | // 2)String
 30 | // 3)Boolean
 31 | // 4)Undefined
 32 | // 5)null
 33 | // 6)symbol
 34 | // 7)BigInt
 35 | 
 36 | // 1)Numbers
 37 | // let PI = 3.142;
 38 | // let distance = 200;
 39 | // console.log(typeof distance)
 40 | 
 41 | // 2)String
 42 | // let sentence = "John is walking home"
 43 | // console.log(typeof sentence)
 44 | 
 45 | // 3)Boolean
 46 | // let isRaining = false;
 47 | // console.log(typeof isRaining)
 48 | 
 49 | //8/16/2022
 50 | 
 51 | // 4)Undefined
 52 | // let box;
 53 | // console.log(typeof box);
 54 | 
 55 | // 5)null
 56 | // let box = null;
 57 | // console.log(typeof box)
 58 | 
 59 | // 6)symbol
 60 | 
 61 | // 7)BigInt
 62 | 
 63 | // dynamic typing
 64 | // let myName = "Ayo";
 65 | // console.log("myName");
 66 | 
 67 | // LET, CONST AND VAR
 68 | 
 69 | // let currentYear = 2022;
 70 | // currentYear = 2023;
 71 | // console.log(currentYear)
 72 | 
 73 | // let price;
 74 | // console.log(price)
 75 | 
 76 | // const
 77 | // const birthYear = 2000;
 78 | // console.log(birthYear)
 79 | // const price = "uh";
 80 | // console.log(price)
 81 | 
 82 | // var
 83 | // var myFavouriteColor = "Black";
 84 | 
 85 | // myFavouriteColor = "Cyan"
 86 | // console.log(myFavouriteColor)
 87 | 
 88 | // myColor = "Yellow";
 89 | // console.log(myColor)
 90 | 
 91 | //====> BASIC OPERATORS
 92 | // mathematical op
 93 | // const currentYear = 2022
 94 | // const ageCiroma = currentYear-2002;
 95 | // const ageDumebi = currentYear-2000;
 96 | // console.log(ageCiroma * 2);
 97 | // console.log(ageDumebi / 2);
 98 | 
 99 | // const firstName = "Ciroma";
100 | // const lastName = "Adekunle";
101 | // console.log(firstName+" "+lastName);
102 | 
103 | // typeof op
104 | // console.log(typeof "Hello")
105 | 
106 | //Assignment op
107 | // let x = 10 + 5;
108 | // +=
109 | // -=
110 | // /=
111 | // *=
112 | // x *= 20// x = x * 20
113 | // console.log(x);
114 | // let y = 10;
115 | 
116 | // y+=20; // y = y + 20
117 | // console.log(y)
118 | 
119 | // let x = 5;
120 | // x
121 | // console.log(x)
122 | 
123 | // comparison  operators
124 | // const currentYear = 2022
125 | // const ageCiroma = currentYear-2002;
126 | // const ageDumebi = currentYear-2000;
127 | 
128 | // const isDumebiOlder = ageDumebi > ageCiroma;
129 | 
130 | // console.log(currentYear-2000 > currentYear-2002)
131 | 
132 | // Operator precedence
133 | 
134 | // let x,y;
135 | // x = y = 25 -10 -5;
136 | // console.log(x , y)
137 | // const currentYear = 2022
138 | // const ageCiroma = currentYear-2002;
139 | // const ageDumebi = currentYear-2000;
140 | // const averageAge = (ageCiroma + ageDumebi)/2;
141 | // console.log(averageAge)
142 | //CODING CHALLENGE -1
143 | 
144 | // const massCiroma = 78;
145 | // const heightCiroma = 1.68;
146 | // const massDumebi = 92;
147 | // const heightDumebi = 1.95;
148 | 
149 | // const dumebiBMI = massDumebi /(heightDumebi * heightDumebi) ;
150 | // const ciromaBMI = massCiroma /(heightCiroma * heightCiroma) ;
151 | // console.log(dumebiBMI, "Dumebi");
152 | // console.log(ciromaBMI, "Ciroma");
153 | 
154 | // const ciromaHigherBMI = ciromaBMI > dumebiBMI;
155 | // console.log(ciromaHigherBMI)
156 | 
157 | //8/17/2022
158 | 
159 | // TEMPLATE LITERALS
160 | // let firstName = "Ciroma";
161 | // let lastName = "Adekunle";
162 | // console.log(firstName + " "+ lastName)
163 | 
164 | // console.log(
165 | //   "I woke up with " + 500 + " , and I am going to bed with " + (500 - 200)
166 | // );
167 | // console.log(typeof
168 | //   `I woke up with ${500} and and iam going to bed with ${500 - 200}`
169 | // );
170 | 
171 | // console.log( "This is a \n\
172 | // string\n\
173 | // with multiple lines")
174 | 
175 | // console.log(`This is a
176 | // string
177 | // with multiple
178 | //  lin
179 | //  es`)
180 | 
181 | // IF ELSE STATEMENTS
182 | 
183 | // const age = 120;
184 | // if(age >= 18){
185 | //  console.log("come get your license")
186 | // }else{
187 | //     console.log(`come in ${18-age} year(s) time`)
188 | // }
189 | 
190 | //TYPE CONVERSION AND TYPE COERCION
191 | // const birthYear = "2000";
192 | // console.log(Number(birthYear) + 20)
193 | 
194 | // const myName = "Ayo";
195 | // console.log(typeof Number(myName))
196 | // let highScore = 100;
197 | // console.log(typeof String(highScore))
198 | 
199 | // const birthYear = "2000";
200 | // console.log(birthYear + 20)
201 | 
202 | // console.log(2 + 3+ "5" - 3 )
203 | // let n ="1" + 1;
204 | // n = n - 1;
205 | // console.log(n)
206 | 
207 | // console.log("4" + "3" - "2" + "1" - 1)
208 | // console.log("2" + "5" - 1 )
209 | 
210 | // TRUTHY AND FALSY
211 | // 0, "", undefined, null , NaN
212 | 
213 | // console.log(Boolean(0))
214 | 
215 | // console.log(Boolean(""))
216 | 
217 | // console.log(Boolean("Ayo"))
218 | 
219 | // console.log(Boolean(8))
220 | 
221 | // console.log(Boolean(undefined))
222 | 
223 | // console.log(Boolean(null))
224 | 
225 | // const money = "";
226 | 
227 | // if(money){
228 | //     console.log("Don't spend it all")
229 | // }else{
230 | //     console.log("Get a job");
231 | // }
232 | 
233 | // let height = 0;
234 | // if(height){
235 | //     console.log("yaay, height is defined");
236 | // }else{
237 | //     console.log("uhhhh, height is undefined");
238 | // }
239 | 
240 | // EQUALITY OPERATORS
241 | // 8/18/2022
242 | 
243 | // const age = "18";
244 | // if (age === 18) {
245 | //   console.log("Adult");
246 | // } else {
247 | //   console.log("something...");
248 | // }
249 | 
250 | // const userInput = Number(prompt("Enter your lucky number"));
251 | // if (userInput === 50) {
252 | //   console.log("Yaay, you won 50K");
253 | // } else if (userInput === 100) {
254 | //   console.log("Yaay, you won 100K");
255 | // } else if (userInput === 150) {
256 | //   console.log("Yaay, you won 150K");
257 | // } else {
258 | //   console.log("Keep trying....");
259 | // }
260 | 
261 | // if(userInput !== 50){
262 | //     console.log("Why not 50?")
263 | // }
264 | 
265 | // BOOLEAN LOGIC
266 | //AND, OR, NOT
267 | 
268 | // const isDarkSkinned = true;
269 | // const isHausa = true;
270 | // const isEducated = true;
271 | // console.log(isDarkSkinned && isHausa )
272 | // console.log(isDarkSkinned || isHausa )
273 | // console.log(isDarkSkinned && isHausa || isEducated  )
274 | // console.log(!isDarkSkinned && isHausa && isEducated )
275 | // console.log(isDarkSkinned && isHausa )
276 | // console.log(isDarkSkinned && isHausa )
277 | 
278 | // SWITCH CASE STATEMENT
279 | // const day = prompt("What day is today?")
280 | // switch(day){
281 | //     case "Monday":
282 | //         console.log("Structure my course contents");
283 | //         console.log("Today is monday");
284 | //         break;
285 | //     case "Tuesday":
286 | //         console.log("Today is Tuesday");
287 | //         break;
288 | //     case "Wednesday":
289 | //         console.log("Today is Wednesday");
290 | //         break;
291 | //     case "Thursday":
292 | //     case "Friday":
293 | //         console.log("Today is my Favorite day");
294 | //         break;
295 | //     case "Saturday":
296 | //         console.log("Owambe tinzz");
297 | //         break;
298 | //     case "Sunday":
299 | //         console.log("Rest");
300 | //         break;
301 | //     default:
302 | //         console.log("Day is Invalid")
303 | // }
304 | 
305 | // if(day === "Monday"){
306 | //     console.log("Structure my course contents");
307 | //     console.log("Today is monday");
308 | // }else if(day === "Tuesday"){
309 | //     console.log("Today is Tuesday");
310 | // }else if(day === "Wednesday"){
311 | //     console.log("Today is Wednesday");
312 | // }else if(day === "Thursday" || day === "Friday"){
313 | //     console.log("Today is my Favorite day");
314 | // }else if(day === "Saturday"){
315 | //     console.log("Owambe tinzz");
316 | // }else if(day === "Sunday"){
317 | //     console.log("Rest");
318 | // }else{
319 | //     console.log("Day is Invalid")
320 | // }
321 | 
322 | //
323 | 
324 | //STATEMENTS AND EXPRESSIONS
325 | 
326 | // 3 + 4; //
327 | // 5; //
328 | 
329 | // console.log(`I woke up with ${500} and went to bed with ${18 === 18}.`);
330 | // if(18 === 18){
331 | //     console.log("it is equal")
332 | // }
333 | const massCiroma = 78;
334 | const heightCiroma = 1.68;
335 | const massDumebi = 200;
336 | const heightDumebi = 1.95;
337 | 
338 | const dumebiBMI = massDumebi /(heightDumebi * heightDumebi) ;
339 | const ciromaBMI = massCiroma /(heightCiroma * heightCiroma) ;
340 | console.log(dumebiBMI, "Dumebi");
341 | console.log(ciromaBMI, "Ciroma");
342 | 
343 | if(ciromaBMI > dumebiBMI){
344 |     console.log(`Ciroma BMI (${ciromaBMI}) is higher than Dumebi's (${dumebiBMI})`)
345 | }else{
346 |     console.log(`Dumebi's BMI (${dumebiBMI}) is greater than Ciroma's (${ciromaBMI}) `)
347 | }


--------------------------------------------------------------------------------
/01-Javascript-Fundamentals-Part -1-Section-1/start/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>JavaScript Fundamentals – Part 1</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #2a2e80, #212aca);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |     </style>
25 |   </head>
26 |   <body>
27 |     <h1>JavaScript Fundamentals – Part 1</h1>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/02-Javascript-Fundamentals-Part-2-Section-2/end/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>JavaScript Fundamentals – Part 2</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #28b487, #7dd56f);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |     </style>
25 |   </head>
26 |   <body>
27 |     <h1>JavaScript Fundamentals – Part 2</h1>
28 |     <script src="script.js"></script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/02-Javascript-Fundamentals-Part-2-Section-2/end/script.js:
--------------------------------------------------------------------------------
  1 | // ACTIVATING THE STRICT MODE
  2 | "use strict";
  3 | // let giveDriversLicense = true;
  4 | // let passTest = true;
  5 | // if(passTest){
  6 | //     giveDriverLicense  = true
  7 | //     console.log(giveDriverLicense)
  8 | // }else{
  9 | //     giveDriverLicense  = false
 10 | //     console.log(giveDriverLicense)
 11 | // }
 12 | 
 13 | // const private = "Audio"
 14 | //8/23/2022
 15 | //FUNCTIONS
 16 | // function logger(){
 17 | // console.log("My name is Ayo");
 18 | // }
 19 | // const loggerVariable = logger();
 20 | 
 21 | // function sumOfNumbers (x,y){
 22 | // const sum = x + y;
 23 | // return sum;
 24 | // }
 25 | 
 26 | // const result = sumOfNumbers(5,7);
 27 | // console.log(result)
 28 | 
 29 | // function fruitBlender(apple, watermelon) {
 30 | //   const juice = `Juice with ${apple} apples and ${watermelon} watermelon`;
 31 | //   console.log(2+5);
 32 | //   return juice;
 33 | // }
 34 | //  console.log(fruitBlender(5, 6));
 35 | 
 36 | //FUNCTION DECLARATION AND FUNCTION EXPRESSIONS
 37 | // function fruitBlender(apple, watermelon) {
 38 | //   const juice = `Juice with ${apple} apples and ${watermelon} watermelon`;
 39 | //   console.log(juice);
 40 | //   return juice;
 41 | // }
 42 | //FUNCTION DECLARATION
 43 | // const ageOfUser = ageCalculator(2002);
 44 | // function ageCalculator(birthYear){
 45 | // const age = 2022 - birthYear;
 46 | // return age;
 47 | // }
 48 | // console.log(ageOfUser)
 49 | 
 50 | //FUNCTION EXPRESSIONS
 51 | // const ageCalculator2 = function (birthYear){
 52 | // const age = 2022 - birthYear;
 53 | // return age;
 54 | // }
 55 | // const ageUser2 = ageCalculator2(2007);
 56 | // console.log(ageUser2)
 57 | 
 58 | //ARROW FUNCTIONS
 59 | // const ageCalculator2 = function (birthYear){
 60 | // const age = 2022 - birthYear;
 61 | // return age;
 62 | // }
 63 | // const ageUser2 = ageCalculator2(2007);
 64 | // console.log(ageUser2);
 65 | 
 66 | // const retirementCalc = (birthYear, firstName) => {
 67 | //   const age = 2022 - birthYear;
 68 | //   const yearsUntilRetirement = 65 - age;
 69 | //   if (yearsUntilRetirement >= 1) {
 70 | //     console.log(
 71 | //       `${firstName} age is ${age} and you have ${yearsUntilRetirement} years left to rest`
 72 | //     );
 73 | //   } else {
 74 | //     console.log(`${firstName} age is ${age} and you have to rest immediately`);
 75 | //   }
 76 | //   return "rubbish";
 77 | // };
 78 | // const functionValue = retirementCalc(1950, "Ciroma");
 79 | // console.log(functionValue)
 80 | 
 81 | //FUNCTIONS CALLING OTHER FUNCTIONS
 82 | // const fruitCutter = function(fruits){
 83 | //     return fruits * 4
 84 | // }
 85 | // const fruitBlender = function (apple, watermelon) {
 86 | //   const applePieces = fruitCutter(apple);
 87 | //   const watermelonPieces = fruitCutter(watermelon);
 88 | //   const juice = `Juice with ${applePieces} apple pieces and ${watermelonPieces} watermelon pieces `;
 89 | //   return juice;
 90 | // }
 91 | 
 92 | // console.log(fruitBlender(2,3))
 93 | 
 94 | //8/24/2022
 95 | //FUNCTION ANATOMY
 96 | // function subtractNumber (x,y){
 97 | //     console.log(x)
 98 | //     return x+y
 99 | //     }
100 | // function addNumber (x,y){
101 | // console.log(x)
102 | // subtractNumber(2,4);
103 | // return x+y
104 | // }
105 | // addNumber(2,4);
106 | // const sum = function (a, b) {
107 | //   return a + b;
108 | // };
109 | // const sumOfNumbers = sum(5, 6);
110 | // console.log(sumOfNumbers);
111 | 
112 | // const sum2 = (a, b) => {
113 | //   const sum =  a + b;
114 | //   return sum
115 | // };
116 | // sum2(5, 6);
117 | 
118 | //TEST DATA 1
119 | //PRINCIPAL 20,000
120 | //RATE = 5
121 | //TIME = 2
122 | //FINAL AMT = 22000
123 | //FINAL AMT = PR + PR*T*R
124 | 
125 | // const principal = 15000;
126 | // const rate = 0.;
127 | // const time = 1;
128 | 
129 | // function simpleInt(principal,rate,time){
130 | // let simpleInt = principal * rate * time
131 | // let finalAmt = principal + simpleInt;
132 | // return finalAmt
133 | // }
134 | 
135 | // const finalAmount = simpleInt(principal, rate, time);
136 | // console.log(`The final amount of the simple interest ${finalAmount}`)
137 | //CI = PRINCIPAl * RATE * N/ N * time
138 | //Final amt
139 | //PRINCIPAL 20,000
140 | //RATE = 5
141 | //TIME = 2
142 | //N = 3
143 | // function compoundInt(p, r, n, t) {
144 | //  const ci =  (p * r * n) / (n * t);
145 | //  console.log(
146 | //     `The final amt of the compound interest is ${ci} `
147 | //   );
148 | //   return 2
149 | // }
150 | 
151 | // let result = compoundInt(2000, 0.03, 5, 3);
152 | // console.log(result)
153 | 
154 | //INTRODUCTION TO ARRAYS
155 | 
156 | // const friend1 = "Ayo";
157 | // const friend2 = "babatunde";
158 | // const friend3 = "Ciroma";
159 | // console.log(friend1, friend2, friend3)
160 | // const box = "Paper";
161 | // const myFunction = function () {
162 | //   return "Hello";
163 | // };
164 | 
165 | // const friends = [
166 | //   "Ayo",
167 | //   "Babatunde",
168 | //   "Ciroma",
169 | //   "Dumebi"
170 | // ];
171 | 
172 | // const years = [2002, 2004, 2006]
173 | // const calcAge = function(birthYear){
174 | //     return 2022 - birthYear
175 | // }
176 | // const ages = [calcAge(years[0]), calcAge(years[1]), calcAge(years[2])]
177 | // console.log(ages)
178 | 
179 | //BASIC ARRAY OPERATIONS
180 | //Adding elements to an array
181 | //PUSH METHOD
182 | // const friends = [
183 | //   "Ayo",
184 | //   "Babatunde",
185 | //   "Ciroma",
186 | // ];
187 | 
188 | //UNSHIFT METHOD
189 | // console.log(friends.unshift("Ralph"))
190 | //Removing elements from an array
191 | // friends.pop()
192 | // console.log(friends)
193 | // console.log(friends.pop())
194 | 
195 | // const friends = [
196 | //     "Ayo",
197 | //     "Babatunde",
198 | //     "Ciroma",
199 | //   ];
200 | 
201 | // const status = friends.includes("babatunde")
202 | // const person1 = {
203 | //   firstName: "Ciroma",
204 | //   lastName: "Adekunle",
205 | //   birthYear: 1996,
206 | //   job: "Teacher",
207 | //   complexion: "Fair",
208 | //   interest: "Playing video games",
209 | //   friends: ["ciroma", " dumebi", " adekunle"],
210 | //   calcAge: function () {
211 | //     this.age = 2022 -this.birthYear
212 | //     return this.age;
213 | //   },
214 | //   hasDriverLicense: false,
215 | //   getSummary : function(){
216 | //     console.log(`${this.firstName} is a ${this.calcAge()} year old ${this.job} and he has ${this.hasDriverLicense? "a" : "no"} driver's license `)
217 | //   }
218 | // };
219 | 
220 | // person1.getSummary();
221 | 
222 | // console.log(person1.calcAge());
223 | // console.log(person1["calcAge"]());
224 | // console.log(person1["calcAge"]());
225 | // console.log(person1["calcAge"]());
226 | 
227 | // console.log(person1.friends);
228 | 
229 | // console.log(person1["age"])
230 | // console.log(person1.age)
231 | 
232 | // const lastWord = "Name";
233 | // console.log(person1["first" + lastWord])
234 | // const interest = prompt(
235 | //   "What are you interested in, firstName, lastName, age, job, complexion"
236 | // );
237 | // if(person1[interest]){
238 | //   console.log(person1[interest])
239 | // }else{
240 | //   console.log(`Wrong request,choose between  firstName, lastName, age, job, complexion `)
241 | // }
242 | // console.log(
243 | //   `${person1["firstName"]} has ${person1.friends.length} friends and his best friend is${person1.friends[1]}`
244 | // );
245 | 
246 | //CODING CHALLENGE
247 | // const person1 = {
248 | //   firstName: "Ciroma",
249 | //   lastName: "Adekunle",
250 | //   height: 2,
251 | //   mass: 85,
252 | //   calcBMI: function () {
253 | //     this.BMI = this.mass / this.height ** 2;
254 | //     return this.BMI;
255 | //   },
256 | // };
257 | // const person2 = {
258 | //   firstName: "Dumebi",
259 | //   lastName: "Katrina",
260 | //   height: 2,
261 | //   mass: 80,
262 | //   calcBMI: function () {
263 | //     this.BMI = this.mass / this.height ** 2;
264 | //     return this.BMI;
265 | //   },
266 | // };
267 | // if (person2.calcBMI() > person1.calcBMI()) {
268 | //   console.log(
269 | //     `${person2.firstName}'s BMI (${person2.calcBMI()}) is greater than ${
270 | //       person1.firstName
271 | //     }'s BMI (${person1.calcBMI()})`
272 | //   );
273 | // } else {
274 | //   console.log(
275 | //     `${person1.firstName}'s BMI (${person1.calcBMI()}) is greater than ${
276 | //       person2.firstName
277 | //     }'s BMI (${person2.calcBMI()})`
278 | //   );
279 | // }
280 | 
281 | // for(const rep = 1; rep <=10; rep++){
282 | //   // console.log(`Lifting weights repitition ${rep}`)
283 | // }
284 | 
285 | // const arr = [
286 | //   "Ayo",
287 | //   "Ciroma",
288 | //   "Dumebi",
289 | //   100,
290 | //   true,
291 | //   ["Afro", "AfroFusion", "Rock"]
292 | // ]
293 | // const types = []
294 | // for(let i = 0; i<arr.length; i++ ){
295 | //   // console.log(arr[i], typeof arr[i])
296 | //   // types[i] = typeof arr[i]
297 | //   types.unshift(typeof arr[i])
298 | // }
299 | // console.log(types)
300 | 
301 | // console.log(5%2)
302 | 
303 | // for(let i = 0; i<=100; i++){
304 | //   if(i % 2 !== 0){
305 | //     console.log(i)
306 | //   }
307 | // }
308 | // const arr = [
309 | //   "Ayo",
310 | //  "Ciroma",
311 | //   "Dumebi",
312 | //   100,
313 | //   true,
314 | //   ["Afro", "AfroFusion", "Rock"],
315 | //   "Dumeb",
316 | // ];
317 | // for (let i = 0; i < arr.length; i++) {
318 | //   if (typeof arr[i] !== "string") {
319 | //     break;
320 | //   }
321 | // console.log(arr[i], typeof arr[i]);
322 | // }
323 | 
324 | // let counter = 1;
325 | // while (counter <= 10) {
326 | //   console.log(counter);
327 | //   counter++;
328 | // }
329 | let random = Math.round(Math.random() * 6);
330 | while(random !== 6){
331 |   console.log(`you rolled ${random}`)
332 |  random = Math.round(Math.random() * 6);
333 | 
334 | }
335 | 
336 | 
337 | /*
338 | Let's improve Ciroma's tip calculator even more, this time using loops!
339 | 
340 | 1. Create an array 'bills' containing all 10 test bill values
341 | 2. Create empty arrays for the tips and the totals ('tips' and 'totals')
342 | 3. Use the 'calcTip' function we wrote before (no need to repeat) to calculate tips and total values (bill + tip) for every bill value in the bills array. Use a for loop to perform the 10 calculations!
343 | 
344 | TEST DATA: 22, 295, 176, 440, 37, 105, 10, 1100, 86 and 52
345 | 
346 | HINT: Call calcTip in the loop and use the push method to add values to the tips and totals arrays 😉
347 | 
348 | 4. BONUS: Write a function 'calcAverage' which takes an array called 'arr' as an argument. This function calculates the average of all numbers in the given array. This is a DIFFICULT challenge (we haven't done this before)! Here is how to solve it:
349 |   4.1. First, you will need to add up all values in the array. To do the addition, start by creating a variable 'sum' that starts at 0. Then loop over the array using a for loop. In each iteration, add the current value to the 'sum' variable. This way, by the end of the loop, you have all values added together
350 |   4.2. To calculate the average, divide the sum you calculated before by the length of the array (because that's the number of elements)
351 |   4.3. Call the function with the 'totals' array
352 | 
353 | GOOD LUCK 😀
354 | */
355 | let arrayOfBills = [22, 295, 176, 440, 37, 105, 10, 1100, 86 , 52]
356 | let tips = [];
357 | let totals= [];
358 | 
359 | for (let i = 0; i <= arrayOfBills.length; i++){
360 | fu
361 | }


--------------------------------------------------------------------------------
/02-Javascript-Fundamentals-Part-2-Section-2/starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>JavaScript Fundamentals – Part 2</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #28b487, #7dd56f);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |     </style>
25 |   </head>
26 |   <body>
27 |     <h1>JavaScript Fundamentals – Part 2</h1>
28 |     <script src="script.js"></script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/02-Javascript-Fundamentals-Part-2-Section-2/starter/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/02-Javascript-Fundamentals-Part-2-Section-2/starter/script.js


--------------------------------------------------------------------------------
/03-Developer-Skills/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |     "singleQuote": false,
3 |     "arrowParens": "avoid"
4 | }


--------------------------------------------------------------------------------
/03-Developer-Skills/starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Developer Skills & Editor Setup</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #28b487, #7dd56f);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |     </style>
25 |   </head>
26 |   <body>
27 |     <h1>Developer Skills & Editor Setup</h1>
28 |     <script src="script.js"></script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/03-Developer-Skills/starter/script.js:
--------------------------------------------------------------------------------
1 | // Remember, we're gonna use strict mode in all scripts now!
2 | "use strict";
3 | 
4 | let myName = "Ayo";
5 | 
6 | let age = 18;
7 | if (true) console.log("hello");
8 | 
9 | const calcAge = function(){}


--------------------------------------------------------------------------------
/04-Guess-My-Number/demo/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/04-Guess-My-Number/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <title>Guess My Number!</title>
 9 |   </head>
10 |   <body>
11 |     <header>
12 |       <h1>Guess My Number!</h1>
13 |       <p class="between">(Between 1 and 20)</p>
14 |       <button class="btn again">Again!</button>
15 |       <div class="number">?</div>
16 |     </header>
17 |     <main>
18 |       <section class="left">
19 |         <input type="number" class="guess" />
20 |         <button class="btn check">Check!</button>
21 |       </section>
22 |       <section class="right">
23 |         <p class="message">Start guessing...</p>
24 |         <p class="label-score">💯 Score: <span class="score">20</span></p>
25 |         <p class="label-highscore">
26 |           🥇 Highscore: <span class="highscore">0</span>
27 |         </p>
28 |       </section>
29 |     </main>
30 |     <script src="script.js"></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/04-Guess-My-Number/demo/script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 


--------------------------------------------------------------------------------
/04-Guess-My-Number/demo/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: inherit;
  7 | }
  8 | 
  9 | html {
 10 |   font-size: 62.5%;
 11 |   box-sizing: border-box;
 12 | }
 13 | 
 14 | body {
 15 |   font-family: 'Press Start 2P', sans-serif;
 16 |   color: #eee;
 17 |   background-color: #222;
 18 |   /* background-color: #60b347; */
 19 | }
 20 | 
 21 | /* LAYOUT */
 22 | header {
 23 |   position: relative;
 24 |   height: 35vh;
 25 |   border-bottom: 7px solid #eee;
 26 | }
 27 | 
 28 | main {
 29 |   height: 65vh;
 30 |   color: #eee;
 31 |   display: flex;
 32 |   align-items: center;
 33 |   justify-content: space-around;
 34 | }
 35 | 
 36 | .left {
 37 |   width: 52rem;
 38 |   display: flex;
 39 |   flex-direction: column;
 40 |   align-items: center;
 41 | }
 42 | 
 43 | .right {
 44 |   width: 52rem;
 45 |   font-size: 2rem;
 46 | }
 47 | 
 48 | /* ELEMENTS STYLE */
 49 | h1 {
 50 |   font-size: 4rem;
 51 |   text-align: center;
 52 |   position: absolute;
 53 |   width: 100%;
 54 |   top: 52%;
 55 |   left: 50%;
 56 |   transform: translate(-50%, -50%);
 57 | }
 58 | 
 59 | .number {
 60 |   background: #eee;
 61 |   color: #333;
 62 |   font-size: 6rem;
 63 |   width: 15rem;
 64 |   padding: 3rem 0rem;
 65 |   text-align: center;
 66 |   position: absolute;
 67 |   bottom: 0;
 68 |   left: 50%;
 69 |   transform: translate(-50%, 50%);
 70 | }
 71 | 
 72 | .between {
 73 |   font-size: 1.4rem;
 74 |   position: absolute;
 75 |   top: 2rem;
 76 |   right: 2rem;
 77 | }
 78 | 
 79 | .again {
 80 |   position: absolute;
 81 |   top: 2rem;
 82 |   left: 2rem;
 83 | }
 84 | 
 85 | .guess {
 86 |   background: none;
 87 |   border: 4px solid #eee;
 88 |   font-family: inherit;
 89 |   color: inherit;
 90 |   font-size: 5rem;
 91 |   padding: 2.5rem;
 92 |   width: 25rem;
 93 |   text-align: center;
 94 |   display: block;
 95 |   margin-bottom: 3rem;
 96 | }
 97 | 
 98 | .btn {
 99 |   border: none;
100 |   background-color: #eee;
101 |   color: #222;
102 |   font-size: 2rem;
103 |   font-family: inherit;
104 |   padding: 2rem 3rem;
105 |   cursor: pointer;
106 | }
107 | 
108 | .btn:hover {
109 |   background-color: #ccc;
110 | }
111 | .message {
112 |   margin-bottom: 8rem;
113 |   height: 3rem;
114 | }
115 | .label-score {
116 |   margin-bottom: 2rem;
117 | }
118 | 


--------------------------------------------------------------------------------
/04-Guess-My-Number/end/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/04-Guess-My-Number/end/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <title>Guess My Number!</title>
 9 |   </head>
10 |   <body>
11 |     <header>
12 |       <h1>Guess My Number!</h1>
13 |       <p class="between">(Between 1 and 20)</p>
14 |       <button class="btn again">New Game!</button>
15 |       <div class="number">?</div>
16 |     </header>
17 |     <main>
18 |       <section class="left">
19 |         <input type="number" class="guess" />
20 |         <button class="btn check">Check!</button>
21 |       </section>
22 |       <section class="right">
23 |         <p class="message">💡 Start guessing...   </p>
24 |         <p class="label-score">💯 Score: <span class="score">20</span></p>
25 |         <p class="label-highscore">
26 |           🥇 Highscore: <span class="highscore">0</span>
27 |         </p>
28 |       </section>
29 |     </main>
30 |     <script src="script.js"></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/04-Guess-My-Number/end/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | let randomSecretNumber = Math.floor(Math.random() * 20) + 1;
 4 | let score = 20;
 5 | let highScore = 0;
 6 | const displayMessage = function (message) {
 7 |   document.querySelector('.message').textContent = message;
 8 | };
 9 | const displayScore = function (score) {
10 |   document.querySelector('.score').textContent = score;
11 | };
12 | document.querySelector('.check').addEventListener('click', function () {
13 |   const guessedNumber = Number(document.querySelector('.guess').value);
14 |   //User inputs no number
15 |   if (!guessedNumber) {
16 |     document.querySelector('.message').textContent = '🔴 No Number';
17 |   }
18 |   //user inputs correct number
19 |   else if (guessedNumber === randomSecretNumber) {
20 |     document.querySelector('.number').textContent = randomSecretNumber;
21 |     displayMessage('You are correct');
22 |     document.querySelector('body').style.backgroundColor = '#60b347';
23 |     document.querySelector('.number').style.width = '30rem';
24 |     if (score > highScore) {
25 |       highScore = score;
26 |       document.querySelector('.highscore').textContent = highScore;
27 |     }
28 |   }
29 |   //user inputs wrong number
30 |   else if (guessedNumber !== randomSecretNumber) {
31 |     if (score > 1) {
32 |       displayMessage(guessedNumber > randomSecretNumber ? 'Too high' : "Too low");
33 |       score--;
34 |       displayScore(score);
35 |     } else {
36 |       displayScore(0);
37 |       displayMessage('You lost the game');
38 |     }
39 |   }
40 | });
41 | 
42 | document.querySelector('.again').addEventListener('click', function () {
43 |   randomSecretNumber = Math.floor(Math.random() * 20) + 1;
44 |   score = 20;
45 |   displayScore(score);
46 |   document.querySelector('.guess').value = '';
47 |   document.querySelector('body').style.backgroundColor = '#222';
48 |   document.querySelector('.number').textContent = '?';
49 |   document.querySelector('.number').style.width = '15rem';
50 |   displayMessage('Start guessing...');
51 | });
52 | 
53 | /* 
54 | Implement a game rest functionality, so that the player can make a new guess! Here is how:
55 | 
56 | 1. Select the element with the 'again' class and attach a click event handler
57 | 2. In the handler function, restore initial values of the score and secretNumber variables
58 | 3. Restore the initial conditions of the message, number, score and guess input field
59 | 4. Also restore the original background color (#222) and number width (15rem)
60 | 
61 | GOOD LUCK 😀
62 | */
63 | 


--------------------------------------------------------------------------------
/04-Guess-My-Number/end/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: inherit;
  7 | }
  8 | 
  9 | html {
 10 |   font-size: 62.5%;
 11 |   box-sizing: border-box;
 12 | }
 13 | 
 14 | body {
 15 |   font-family: 'Press Start 2P', sans-serif;
 16 |   color: #eee;
 17 |   background-color: #222;
 18 |   /* background-color: #60b347; */
 19 | }
 20 | 
 21 | /* LAYOUT */
 22 | header {
 23 |   position: relative;
 24 |   height: 35vh;
 25 |   border-bottom: 7px solid #eee;
 26 | }
 27 | 
 28 | main {
 29 |   height: 65vh;
 30 |   color: #eee;
 31 |   display: flex;
 32 |   align-items: center;
 33 |   justify-content: space-around;
 34 | }
 35 | 
 36 | .left {
 37 |   width: 52rem;
 38 |   display: flex;
 39 |   flex-direction: column;
 40 |   align-items: center;
 41 | }
 42 | 
 43 | .right {
 44 |   width: 52rem;
 45 |   font-size: 2rem;
 46 | }
 47 | 
 48 | /* ELEMENTS STYLE */
 49 | h1 {
 50 |   font-size: 4rem;
 51 |   text-align: center;
 52 |   position: absolute;
 53 |   width: 100%;
 54 |   top: 52%;
 55 |   left: 50%;
 56 |   transform: translate(-50%, -50%);
 57 | }
 58 | 
 59 | .number {
 60 |   background: #eee;
 61 |   color: #333;
 62 |   font-size: 6rem;
 63 |   width: 15rem;
 64 |   padding: 3rem 0rem;
 65 |   text-align: center;
 66 |   position: absolute;
 67 |   bottom: 0;
 68 |   left: 50%;
 69 |   transform: translate(-50%, 50%);
 70 | }
 71 | 
 72 | .between {
 73 |   font-size: 1.4rem;
 74 |   position: absolute;
 75 |   top: 2rem;
 76 |   right: 2rem;
 77 | }
 78 | 
 79 | .again {
 80 |   position: absolute;
 81 |   top: 2rem;
 82 |   left: 2rem;
 83 | }
 84 | 
 85 | .guess {
 86 |   background: none;
 87 |   border: 4px solid #eee;
 88 |   font-family: inherit;
 89 |   color: inherit;
 90 |   font-size: 5rem;
 91 |   padding: 2.5rem;
 92 |   width: 25rem;
 93 |   text-align: center;
 94 |   display: block;
 95 |   margin-bottom: 3rem;
 96 | }
 97 | 
 98 | .btn {
 99 |   border: none;
100 |   background-color: #eee;
101 |   color: #222;
102 |   font-size: 2rem;
103 |   font-family: inherit;
104 |   padding: 2rem 3rem;
105 |   cursor: pointer;
106 | }
107 | 
108 | .btn:hover {
109 |   background-color: #ccc;
110 | }
111 | 
112 | .message {
113 |   margin-bottom: 8rem;
114 |   height: 3rem;
115 | }
116 | 
117 | .label-score {
118 |   margin-bottom: 2rem;
119 | }
120 | 


--------------------------------------------------------------------------------
/04-Guess-My-Number/starter/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/04-Guess-My-Number/starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <title>Guess My Number!</title>
 9 |   </head>
10 |   <body>
11 |     <header>
12 |       <h1>Guess My Number!</h1>
13 |       <p class="between">(Between 1 and 20)</p>
14 |       <button class="btn again">Again!</button>
15 |       <div class="number">?</div>
16 |     </header>
17 |     <main>
18 |       <section class="left">
19 |         <input type="number" class="guess" />
20 |         <button class="btn check">Check!</button>
21 |       </section>
22 |       <section class="right">
23 |         <p class="message">Start guessing...</p>
24 |         <p class="label-score">💯 Score: <span class="score">20</span></p>
25 |         <p class="label-highscore">
26 |           🥇 Highscore: <span class="highscore">0</span>
27 |         </p>
28 |       </section>
29 |     </main>
30 |     <script src="script.js"></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/04-Guess-My-Number/starter/script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 


--------------------------------------------------------------------------------
/04-Guess-My-Number/starter/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: inherit;
  7 | }
  8 | 
  9 | html {
 10 |   font-size: 62.5%;
 11 |   box-sizing: border-box;
 12 | }
 13 | 
 14 | body {
 15 |   font-family: 'Press Start 2P', sans-serif;
 16 |   color: #eee;
 17 |   background-color: #222;
 18 |   /* background-color: #60b347; */
 19 | }
 20 | 
 21 | /* LAYOUT */
 22 | header {
 23 |   position: relative;
 24 |   height: 35vh;
 25 |   border-bottom: 7px solid #eee;
 26 | }
 27 | 
 28 | main {
 29 |   height: 65vh;
 30 |   color: #eee;
 31 |   display: flex;
 32 |   align-items: center;
 33 |   justify-content: space-around;
 34 | }
 35 | 
 36 | .left {
 37 |   width: 52rem;
 38 |   display: flex;
 39 |   flex-direction: column;
 40 |   align-items: center;
 41 | }
 42 | 
 43 | .right {
 44 |   width: 52rem;
 45 |   font-size: 2rem;
 46 | }
 47 | 
 48 | /* ELEMENTS STYLE */
 49 | h1 {
 50 |   font-size: 4rem;
 51 |   text-align: center;
 52 |   position: absolute;
 53 |   width: 100%;
 54 |   top: 52%;
 55 |   left: 50%;
 56 |   transform: translate(-50%, -50%);
 57 | }
 58 | 
 59 | .number {
 60 |   background: #eee;
 61 |   color: #333;
 62 |   font-size: 6rem;
 63 |   width: 15rem;
 64 |   padding: 3rem 0rem;
 65 |   text-align: center;
 66 |   position: absolute;
 67 |   bottom: 0;
 68 |   left: 50%;
 69 |   transform: translate(-50%, 50%);
 70 | }
 71 | 
 72 | .between {
 73 |   font-size: 1.4rem;
 74 |   position: absolute;
 75 |   top: 2rem;
 76 |   right: 2rem;
 77 | }
 78 | 
 79 | .again {
 80 |   position: absolute;
 81 |   top: 2rem;
 82 |   left: 2rem;
 83 | }
 84 | 
 85 | .guess {
 86 |   background: none;
 87 |   border: 4px solid #eee;
 88 |   font-family: inherit;
 89 |   color: inherit;
 90 |   font-size: 5rem;
 91 |   padding: 2.5rem;
 92 |   width: 25rem;
 93 |   text-align: center;
 94 |   display: block;
 95 |   margin-bottom: 3rem;
 96 | }
 97 | 
 98 | .btn {
 99 |   border: none;
100 |   background-color: #eee;
101 |   color: #222;
102 |   font-size: 2rem;
103 |   font-family: inherit;
104 |   padding: 2rem 3rem;
105 |   cursor: pointer;
106 | }
107 | 
108 | .btn:hover {
109 |   background-color: #ccc;
110 | }
111 | .message {
112 |   margin-bottom: 8rem;
113 |   height: 3rem;
114 | }
115 | .label-score {
116 |   margin-bottom: 2rem;
117 | }
118 | 


--------------------------------------------------------------------------------
/05-Modal-Window/end/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/05-Modal-Window/end/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <title>Modal window</title>
 9 |   </head>
10 |   <body>
11 |     <button class="show-modal">Show modal 1</button>
12 |     <button class="show-modal">Show modal 2</button>
13 |     <button class="show-modal">Show modal 3</button>
14 | 
15 |     <div class="modal hidden">
16 |       <button class="close-modal">&times;</button>
17 |       <h1>I'm a modal window 😻 </h1>
18 |       <p>
19 |         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
20 |         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
21 |         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
22 |         commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
23 |         velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
24 |         occaecat cupidatat non proident, sunt in culpa qui officia deserunt
25 |         mollit anim id est laborum.
26 |       </p>
27 |     </div>
28 |     <div class="overlay hidden"></div>
29 | 
30 |     <script src="script.js"></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/05-Modal-Window/end/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const modal = document.querySelector('.modal');
 3 | const closeModalButton = document.querySelector('.close-modal');
 4 | const overlay = document.querySelector('.overlay');
 5 | const buttons = document.querySelectorAll('.show-modal')
 6 | 
 7 | const showModal = function(){
 8 |     modal.classList.remove("hidden")
 9 |     overlay.classList.remove("hidden")
10 |   
11 | }
12 | const closeModal = function(){
13 |     modal.classList.add("hidden")
14 |     overlay.classList.add("hidden")
15 | }
16 | for(let i = 0; i < buttons.length; i++){
17 |   buttons[i].addEventListener('click', showModal);
18 | }
19 | closeModalButton.addEventListener("click", closeModal)
20 | overlay.addEventListener("click", closeModal)
21 | 
22 | document.addEventListener("keydown", function(e){
23 | if(e.key === "Escape" && !modal.classList.contains("hidden")){
24 |  closeModal()
25 | }
26 | })
27 | 


--------------------------------------------------------------------------------
/05-Modal-Window/end/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: inherit;
 5 | }
 6 | 
 7 | html {
 8 |   font-size: 62.5%;
 9 |   box-sizing: border-box;
10 | }
11 | 
12 | body {
13 |   font-family: sans-serif;
14 |   color: #333;
15 |   line-height: 1.5;
16 |   height: 100vh;
17 |   position: relative;
18 |   display: flex;
19 |   align-items: flex-start;
20 |   justify-content: center;
21 |   background: linear-gradient(to top left, #28b487, #7dd56f);
22 | }
23 | 
24 | .show-modal {
25 |   font-size: 2rem;
26 |   font-weight: 600;
27 |   padding: 1.75rem 3.5rem;
28 |   margin: 5rem 2rem;
29 |   border: none;
30 |   background-color: #fff;
31 |   color: #444;
32 |   border-radius: 10rem;
33 |   cursor: pointer;
34 | }
35 | 
36 | .close-modal {
37 |   position: absolute;
38 |   top: 1.2rem;
39 |   right: 2rem;
40 |   font-size: 5rem;
41 |   color: #333;
42 |   cursor: pointer;
43 |   border: none;
44 |   background: none;
45 | }
46 | 
47 | h1 {
48 |   font-size: 2.5rem;
49 |   margin-bottom: 2rem;
50 | }
51 | 
52 | p {
53 |   font-size: 1.8rem;
54 | }
55 | 
56 | /* -------------------------- */
57 | /* CLASSES TO MAKE MODAL WORK */
58 | .hidden {
59 |   display: none;
60 | }
61 | 
62 | .modal {
63 |   position: absolute;
64 |   top: 50%;
65 |   left: 50%;
66 |   transform: translate(-50%, -50%);
67 |   width: 70%;
68 |   background-color: white;
69 |   padding: 6rem;
70 |   border-radius: 5px;
71 |   box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
72 |   z-index: 10;
73 | }
74 | 
75 | .overlay {
76 |   position: absolute;
77 |   top: 0;
78 |   left: 0;
79 |   width: 100%;
80 |   height: 100%;
81 |   background-color: rgba(0, 0, 0, 0.6);
82 |   backdrop-filter: blur(3px);
83 |   z-index: 5;
84 | }
85 | 


--------------------------------------------------------------------------------
/05-Modal-Window/starter/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/05-Modal-Window/starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <title>Modal window</title>
 9 |   </head>
10 |   <body>
11 |     <button class="show-modal">Show modal 1</button>
12 |     <button class="show-modal">Show modal 2</button>
13 |     <button class="show-modal">Show modal 3</button>
14 | 
15 |     <div class="modal hidden">
16 |       <button class="close-modal">&times;</button>
17 |       <h1>I'm a modal window 😍</h1>
18 |       <p>
19 |         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
20 |         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
21 |         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
22 |         commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
23 |         velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
24 |         occaecat cupidatat non proident, sunt in culpa qui officia deserunt
25 |         mollit anim id est laborum.
26 |       </p>
27 |     </div>
28 |     <div class="overlay hidden"></div>
29 | 
30 |     <script src="script.js"></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/05-Modal-Window/starter/script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 


--------------------------------------------------------------------------------
/05-Modal-Window/starter/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: inherit;
 5 | }
 6 | 
 7 | html {
 8 |   font-size: 62.5%;
 9 |   box-sizing: border-box;
10 | }
11 | 
12 | body {
13 |   font-family: sans-serif;
14 |   color: #333;
15 |   line-height: 1.5;
16 |   height: 100vh;
17 |   position: relative;
18 |   display: flex;
19 |   align-items: flex-start;
20 |   justify-content: center;
21 |   background: linear-gradient(to top left, #28b487, #7dd56f);
22 | }
23 | 
24 | .show-modal {
25 |   font-size: 2rem;
26 |   font-weight: 600;
27 |   padding: 1.75rem 3.5rem;
28 |   margin: 5rem 2rem;
29 |   border: none;
30 |   background-color: #fff;
31 |   color: #444;
32 |   border-radius: 10rem;
33 |   cursor: pointer;
34 | }
35 | 
36 | .close-modal {
37 |   position: absolute;
38 |   top: 1.2rem;
39 |   right: 2rem;
40 |   font-size: 5rem;
41 |   color: #333;
42 |   cursor: pointer;
43 |   border: none;
44 |   background: none;
45 | }
46 | 
47 | h1 {
48 |   font-size: 2.5rem;
49 |   margin-bottom: 2rem;
50 | }
51 | 
52 | p {
53 |   font-size: 1.8rem;
54 | }
55 | 
56 | /* -------------------------- */
57 | /* CLASSES TO MAKE MODAL WORK */
58 | .hidden {
59 |   display: none;
60 | }
61 | 
62 | .modal {
63 |   position: absolute;
64 |   top: 50%;
65 |   left: 50%;
66 |   transform: translate(-50%, -50%);
67 |   width: 70%;
68 | 
69 |   background-color: white;
70 |   padding: 6rem;
71 |   border-radius: 5px;
72 |   box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
73 |   z-index: 10;
74 | }
75 | 
76 | .overlay {
77 |   position: absolute;
78 |   top: 0;
79 |   left: 0;
80 |   width: 100%;
81 |   height: 100%;
82 |   background-color: rgba(0, 0, 0, 0.6);
83 |   backdrop-filter: blur(3px);
84 |   z-index: 5;
85 | }
86 | 


--------------------------------------------------------------------------------
/06-Dice-Game/end/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/06-Dice-Game/end/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/end/Thumbs.db


--------------------------------------------------------------------------------
/06-Dice-Game/end/dice-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/end/dice-1.png


--------------------------------------------------------------------------------
/06-Dice-Game/end/dice-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/end/dice-2.png


--------------------------------------------------------------------------------
/06-Dice-Game/end/dice-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/end/dice-3.png


--------------------------------------------------------------------------------
/06-Dice-Game/end/dice-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/end/dice-4.png


--------------------------------------------------------------------------------
/06-Dice-Game/end/dice-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/end/dice-5.png


--------------------------------------------------------------------------------
/06-Dice-Game/end/dice-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/end/dice-6.png


--------------------------------------------------------------------------------
/06-Dice-Game/end/dice-game-flowchart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/end/dice-game-flowchart.png


--------------------------------------------------------------------------------
/06-Dice-Game/end/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <title>Pig Game</title>
 9 |   </head>
10 |   <body>
11 |     <main>
12 |       <section class="player player--0 player--active">
13 |         <h2 class="name" id="name--0">Player 1</h2>
14 |         <p class="score" id="score--0">53</p>
15 |         <div class="current">
16 |           <p class="current-label">Current</p>
17 |           <p class="current-score" id="current--0">0</p>
18 |         </div>
19 |       </section>
20 |       <section class="player player--1">
21 |         <h2 class="name" id="name--1">Player 2</h2>
22 |         <p class="score" id="score--1">24</p>
23 |         <div class="current">
24 |           <p class="current-label">Current</p>
25 |           <p class="current-score" id="current--1">0</p>
26 |         </div>
27 |       </section>
28 |       
29 |       <img src="dice-4.png" alt="Playing dice" class="dice" />
30 |       <button class="btn btn--new">🔄 New game</button>
31 |       <button class="btn btn--roll">🎲 Roll dice</button>
32 |       <button class="btn btn--hold">📥 Hold</button>
33 |     </main>
34 |     <script src="script.js"></script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/06-Dice-Game/end/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | let score0Element = document.getElementById('score--0');
 3 | let score1Element = document.getElementById('score--1');
 4 | let rollDiceButton = document.querySelector('.btn--roll');
 5 | let resetGameButton = document.querySelector('.btn--new');
 6 | let holdButton = document.querySelector('.btn--hold');
 7 | let diceElement = document.querySelector('.dice');
 8 | let currentScore00 = document.getElementById('current--0');
 9 | let currentScore01 = document.getElementById('current--1');
10 | let player00 = document.querySelector('.player--0');
11 | let player01 = document.querySelector('.player--1');
12 | let scores, currentScore, activePlayer, playing;
13 | const init = function () {
14 |   scores = [0, 0];
15 |   currentScore = 0;
16 |   activePlayer = 0;
17 |   playing = true;
18 |   score0Element.textContent = 0;
19 |   score1Element.textContent = 0;
20 |   currentScore00.textContent = 0;
21 |   currentScore01.textContent = 0;
22 |   player00.classList.remove('player--winner');
23 |   player01.classList.remove('player--winner');
24 |   player00.classList.add('player--active');
25 |   player01.classList.remove('player--active');
26 | };
27 | init();
28 | const switchPlayer = function () {
29 |   document.getElementById(`current--${activePlayer}`).textContent = 0;
30 |   activePlayer = activePlayer === 0 ? 1 : 0;
31 |   currentScore = 0;
32 |   player00.classList.toggle('player--active');
33 |   player01.classList.toggle('player--active');
34 | };
35 | rollDiceButton.addEventListener('click', function () {
36 |   if (playing) {
37 |     let randomDiceNumber = Math.trunc(Math.random() * 6) + 1;
38 |     diceElement.style.display = 'block';
39 |     diceElement.src = `dice-${randomDiceNumber}.png`;
40 |     if (randomDiceNumber !== 1) {
41 |       currentScore += randomDiceNumber;
42 |       document.getElementById(`current--${activePlayer}`).textContent =
43 |         currentScore;
44 |     } else {
45 |       switchPlayer();
46 |     }
47 |   }
48 | });
49 | holdButton.addEventListener('click', function () {
50 |   if (playing) {
51 |     scores[activePlayer] += currentScore;
52 |     document.getElementById(`score--${activePlayer}`).textContent =
53 |       scores[activePlayer];
54 |     if (scores[activePlayer] >= 20) {
55 |       playing = false;
56 |       diceElement.style.display = 'none';
57 |       document
58 |         .querySelector(`.player--${activePlayer}`)
59 |         .classList.add('player--winner');
60 |       document
61 |         .querySelector(`.player--${activePlayer}`)
62 |         .classList.remove('player--active');
63 |     } else {
64 |       switchPlayer();
65 |     }
66 |   }
67 | });
68 | resetGameButton.addEventListener('click', init);
69 | 


--------------------------------------------------------------------------------
/06-Dice-Game/end/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: inherit;
  7 | }
  8 | 
  9 | html {
 10 |   font-size: 62.5%;
 11 |   box-sizing: border-box;
 12 | }
 13 | 
 14 | body {
 15 |   font-family: 'Nunito', sans-serif;
 16 |   font-weight: 400;
 17 |   height: 100vh;
 18 |   color: #333;
 19 |   background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);
 20 |   display: flex;
 21 |   align-items: center;
 22 |   justify-content: center;
 23 | }
 24 | 
 25 | /* LAYOUT */
 26 | main {
 27 |   position: relative;
 28 |   width: 100rem;
 29 |   height: 60rem;
 30 |   background-color: rgba(255, 255, 255, 0.35);
 31 |   backdrop-filter: blur(200px);
 32 |   filter: blur();
 33 |   box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
 34 |   border-radius: 9px;
 35 |   overflow: hidden;
 36 |   display: flex;
 37 | }
 38 | 
 39 | .player {
 40 |   flex: 50%;
 41 |   padding: 9rem;
 42 |   display: flex;
 43 |   flex-direction: column;
 44 |   align-items: center;
 45 |   transition: all 0.75s;
 46 | }
 47 | 
 48 | /* ELEMENTS */
 49 | .name {
 50 |   position: relative;
 51 |   font-size: 4rem;
 52 |   text-transform: uppercase;
 53 |   letter-spacing: 1px;
 54 |   word-spacing: 2px;
 55 |   font-weight: 300;
 56 |   margin-bottom: 1rem;
 57 | }
 58 | 
 59 | .score {
 60 |   font-size: 8rem;
 61 |   font-weight: 300;
 62 |   color: #c7365f;
 63 |   margin-bottom: auto;
 64 | }
 65 | 
 66 | .player--active {
 67 |   background-color: rgba(255, 255, 255, 0.4);
 68 | }
 69 | .player--active .name {
 70 |   font-weight: 700;
 71 | }
 72 | .player--active .score {
 73 |   font-weight: 400;
 74 | }
 75 | 
 76 | .player--active .current {
 77 |   opacity: 1;
 78 | }
 79 | 
 80 | .current {
 81 |   background-color: #c7365f;
 82 |   opacity: 0.8;
 83 |   border-radius: 9px;
 84 |   color: #fff;
 85 |   width: 65%;
 86 |   padding: 2rem;
 87 |   text-align: center;
 88 |   transition: all 0.75s;
 89 | }
 90 | 
 91 | .current-label {
 92 |   text-transform: uppercase;
 93 |   margin-bottom: 1rem;
 94 |   font-size: 1.7rem;
 95 |   color: #ddd;
 96 | }
 97 | 
 98 | .current-score {
 99 |   font-size: 3.5rem;
100 | }
101 | 
102 | /* ABSOLUTE POSITIONED ELEMENTS */
103 | .btn {
104 |   position: absolute;
105 |   left: 50%;
106 |   transform: translateX(-50%);
107 |   color: #444;
108 |   background: none;
109 |   border: none;
110 |   font-family: inherit;
111 |   font-size: 1.8rem;
112 |   text-transform: uppercase;
113 |   cursor: pointer;
114 |   font-weight: 400;
115 |   transition: all 0.2s;
116 | 
117 |   background-color: white;
118 |   background-color: rgba(255, 255, 255, 0.6);
119 |   backdrop-filter: blur(10px);
120 | 
121 |   padding: 0.7rem 2.5rem;
122 |   border-radius: 50rem;
123 |   box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
124 | }
125 | 
126 | .btn::first-letter {
127 |   font-size: 2.4rem;
128 |   display: inline-block;
129 |   margin-right: 0.7rem;
130 | }
131 | 
132 | .btn--new {
133 |   top: 4rem;
134 | }
135 | .btn--roll {
136 |   top: 39.3rem;
137 | }
138 | .btn--hold {
139 |   top: 46.1rem;
140 | }
141 | 
142 | .btn:active {
143 |   transform: translate(-50%, 3px);
144 |   box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
145 | }
146 | 
147 | .btn:focus {
148 |   outline: none;
149 | }
150 | 
151 | .dice {
152 |   position: absolute;
153 |   left: 50%;
154 |   top: 16.5rem;
155 |   transform: translateX(-50%);
156 |   height: 10rem;
157 |   box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
158 |   display: none;
159 | }
160 | 
161 | .player--winner {
162 |   background-color: #2f2f2f;
163 | }
164 | 
165 | .player--winner .name {
166 |   font-weight: 700;
167 |   color: #c7365f;
168 | }
169 | 


--------------------------------------------------------------------------------
/06-Dice-Game/starter/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/06-Dice-Game/starter/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/starter/Thumbs.db


--------------------------------------------------------------------------------
/06-Dice-Game/starter/dice-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/starter/dice-1.png


--------------------------------------------------------------------------------
/06-Dice-Game/starter/dice-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/starter/dice-2.png


--------------------------------------------------------------------------------
/06-Dice-Game/starter/dice-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/starter/dice-3.png


--------------------------------------------------------------------------------
/06-Dice-Game/starter/dice-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/starter/dice-4.png


--------------------------------------------------------------------------------
/06-Dice-Game/starter/dice-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/starter/dice-5.png


--------------------------------------------------------------------------------
/06-Dice-Game/starter/dice-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/starter/dice-6.png


--------------------------------------------------------------------------------
/06-Dice-Game/starter/dice-game-flowchart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/06-Dice-Game/starter/dice-game-flowchart.png


--------------------------------------------------------------------------------
/06-Dice-Game/starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <title>Pig Game</title>
 9 |   </head>
10 |   <body>
11 |     <main>
12 |       <section class="player player--0 player--active">
13 |         <h2 class="name" id="name--0">Player 1</h2>
14 |         <p class="score" id="score--0">43</p>
15 |         <div class="current">
16 |           <p class="current-label">Current</p>
17 |           <p class="current-score" id="current--0">0</p>
18 |         </div>
19 |       </section>
20 |       <section class="player player--1">
21 |         <h2 class="name" id="name--1">Player 2</h2>
22 |         <p class="score" id="score--1">24</p>
23 |         <div class="current">
24 |           <p class="current-label">Current</p>
25 |           <p class="current-score" id="current--1">0</p>
26 |         </div>
27 |       </section>
28 | 
29 |       <img src="dice-5.png" alt="Playing dice" class="dice" />
30 |       <button class="btn btn--new">🔄 New game</button>
31 |       <button class="btn btn--roll">🎲 Roll dice</button>
32 |       <button class="btn btn--hold">📥 Hold</button>
33 |     </main>
34 |     <script src="script.js"></script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/06-Dice-Game/starter/script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 


--------------------------------------------------------------------------------
/06-Dice-Game/starter/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: inherit;
  7 | }
  8 | 
  9 | html {
 10 |   font-size: 62.5%;
 11 |   box-sizing: border-box;
 12 | }
 13 | 
 14 | body {
 15 |   font-family: 'Nunito', sans-serif;
 16 |   font-weight: 400;
 17 |   height: 100vh;
 18 |   color: #333;
 19 |   background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);
 20 |   display: flex;
 21 |   align-items: center;
 22 |   justify-content: center;
 23 | }
 24 | 
 25 | /* LAYOUT */
 26 | main {
 27 |   position: relative;
 28 |   width: 100rem;
 29 |   height: 60rem;
 30 |   background-color: rgba(255, 255, 255, 0.35);
 31 |   backdrop-filter: blur(200px);
 32 |   filter: blur();
 33 |   box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
 34 |   border-radius: 9px;
 35 |   overflow: hidden;
 36 |   display: flex;
 37 | }
 38 | 
 39 | .player {
 40 |   flex: 50%;
 41 |   padding: 9rem;
 42 |   display: flex;
 43 |   flex-direction: column;
 44 |   align-items: center;
 45 |   transition: all 0.75s;
 46 | }
 47 | 
 48 | /* ELEMENTS */
 49 | .name {
 50 |   position: relative;
 51 |   font-size: 4rem;
 52 |   text-transform: uppercase;
 53 |   letter-spacing: 1px;
 54 |   word-spacing: 2px;
 55 |   font-weight: 300;
 56 |   margin-bottom: 1rem;
 57 | }
 58 | 
 59 | .score {
 60 |   font-size: 8rem;
 61 |   font-weight: 300;
 62 |   color: #c7365f;
 63 |   margin-bottom: auto;
 64 | }
 65 | 
 66 | .player--active {
 67 |   background-color: rgba(255, 255, 255, 0.4);
 68 | }
 69 | .player--active .name {
 70 |   font-weight: 700;
 71 | }
 72 | .player--active .score {
 73 |   font-weight: 400;
 74 | }
 75 | 
 76 | .player--active .current {
 77 |   opacity: 1;
 78 | }
 79 | 
 80 | .current {
 81 |   background-color: #c7365f;
 82 |   opacity: 0.8;
 83 |   border-radius: 9px;
 84 |   color: #fff;
 85 |   width: 65%;
 86 |   padding: 2rem;
 87 |   text-align: center;
 88 |   transition: all 0.75s;
 89 | }
 90 | 
 91 | .current-label {
 92 |   text-transform: uppercase;
 93 |   margin-bottom: 1rem;
 94 |   font-size: 1.7rem;
 95 |   color: #ddd;
 96 | }
 97 | 
 98 | .current-score {
 99 |   font-size: 3.5rem;
100 | }
101 | 
102 | /* ABSOLUTE POSITIONED ELEMENTS */
103 | .btn {
104 |   position: absolute;
105 |   left: 50%;
106 |   transform: translateX(-50%);
107 |   color: #444;
108 |   background: none;
109 |   border: none;
110 |   font-family: inherit;
111 |   font-size: 1.8rem;
112 |   text-transform: uppercase;
113 |   cursor: pointer;
114 |   font-weight: 400;
115 |   transition: all 0.2s;
116 | 
117 |   background-color: white;
118 |   background-color: rgba(255, 255, 255, 0.6);
119 |   backdrop-filter: blur(10px);
120 | 
121 |   padding: 0.7rem 2.5rem;
122 |   border-radius: 50rem;
123 |   box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
124 | }
125 | 
126 | .btn::first-letter {
127 |   font-size: 2.4rem;
128 |   display: inline-block;
129 |   margin-right: 0.7rem;
130 | }
131 | 
132 | .btn--new {
133 |   top: 4rem;
134 | }
135 | .btn--roll {
136 |   top: 39.3rem;
137 | }
138 | .btn--hold {
139 |   top: 46.1rem;
140 | }
141 | 
142 | .btn:active {
143 |   transform: translate(-50%, 3px);
144 |   box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
145 | }
146 | 
147 | .btn:focus {
148 |   outline: none;
149 | }
150 | 
151 | .dice {
152 |   position: absolute;
153 |   left: 50%;
154 |   top: 16.5rem;
155 |   transform: translateX(-50%);
156 |   height: 10rem;
157 |   box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
158 | }
159 | 
160 | .player--winner {
161 |   background-color: #2f2f2f;
162 | }
163 | 
164 | .player--winner .name {
165 |   font-weight: 700;
166 |   color: #c7365f;
167 | }
168 | 


--------------------------------------------------------------------------------
/07-Navbar-project assignment- 1/Bounce-Bar-Preloader-1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/07-Navbar-project assignment- 1/Bounce-Bar-Preloader-1.gif


--------------------------------------------------------------------------------
/07-Navbar-project assignment- 1/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/07-Navbar-project assignment- 1/Thumbs.db


--------------------------------------------------------------------------------
/07-Navbar-project assignment- 1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Ayobami Owoeye</title>
 8 |     <link
 9 |       rel="stylesheet"
10 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
11 |       integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
12 |       crossorigin="anonymous"
13 |     />
14 |     <link rel="stylesheet" href="styles.css" />
15 |   </head>
16 |   <body>
17 |     <div class="preloader">
18 |       <img src="./Bounce-Bar-Preloader-1.gif" width="400"/>
19 |     </div>
20 |     <nav>
21 |       <div class="nav-main">
22 |         <div class="nav-header">
23 |          <h1>codewithay.</h1>
24 |           <i class="fa fa-bars" aria-hidden="true"></i>
25 |         </div>
26 |         <ul class="menu">
27 |           <li>
28 |             <a href="#">Home</a>
29 |           </li>
30 |           <li>
31 |             <a href="#">About</a>
32 |           </li>
33 |           <li>
34 |             <a href="#">Contact</a>
35 |           </li>
36 |         </ul>
37 |       </div>
38 |     </nav>
39 |     <script src="index.js"></script>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/07-Navbar-project assignment- 1/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | const navbar =document.querySelector(".fa-bars");
 3 | const menu = document.querySelector(".menu");
 4 | const preloader = document.querySelector(".preloader")
 5 | 
 6 | navbar.addEventListener("click", function(){
 7 |     menu.classList.toggle("show-menu")
 8 | })
 9 | 
10 | window.addEventListener("load", function(){
11 |     preloader.classList.add("fade-out")
12 | })
13 | 


--------------------------------------------------------------------------------
/07-Navbar-project assignment- 1/load.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/07-Navbar-project assignment- 1/load.gif


--------------------------------------------------------------------------------
/07-Navbar-project assignment- 1/styles.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Sacramento&display=swap");
  2 | body {
  3 |   margin: 0;
  4 |   padding: 0;
  5 |   font-family: sans-serif;
  6 |   background: #f1f5f8;
  7 |   line-height: 2.2;
  8 |   font-size: 0.875rem;
  9 | }
 10 | h1 {
 11 |   font-family: "Sacramento", cursive;
 12 |   font-size: 2rem;
 13 |   margin: 0;
 14 |   padding: 0;
 15 | }
 16 | ul {
 17 |   list-style-type: none;
 18 | }
 19 | 
 20 | a {
 21 |   text-decoration: none;
 22 | }
 23 | 
 24 | nav {
 25 |   background: white;
 26 |   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 27 | }
 28 | 
 29 | .fa-bars {
 30 |   font-size: 1.5rem;
 31 |   color: #e94949;
 32 |   cursor: pointer;
 33 | }
 34 | 
 35 | .fa-bars:hover {
 36 |   color: black;
 37 | }
 38 | 
 39 | .menu a {
 40 |   color: grey;
 41 |   letter-spacing: 0.1rem;
 42 |   display: block;
 43 |   padding: 0.5rem 1rem;
 44 |   transition: all 0.3s linear;
 45 | }
 46 | 
 47 | .menu a:hover {
 48 |   background: #f8a5a5;
 49 |   color: #e94949;
 50 |   padding-left: 1.5rem;
 51 | }
 52 | 
 53 | .menu {
 54 |   height: 0;
 55 |   overflow: hidden;
 56 |   transition: all 0.3s linear;
 57 | }
 58 | 
 59 | .show-menu {
 60 |   height: 10rem;
 61 | }
 62 | 
 63 | .nav-header {
 64 |   display: flex;
 65 |   align-items: center;
 66 |   justify-content: space-between;
 67 |   padding: 1rem;
 68 | }
 69 | .preloader {
 70 |   position: fixed;
 71 |   top: 0;
 72 |   left: 0;
 73 |   background-color: white;
 74 |   width: 100%;
 75 |   height: 100%;
 76 |   display: flex;
 77 |   justify-content: center;
 78 |   align-items: center;
 79 | }
 80 | .fade-out{
 81 |   animation: fade-out 5s forwards;
 82 | }
 83 | @keyframes fade-out {
 84 |   100%{
 85 |     opacity: 0;
 86 |     visibility: hidden;
 87 |   }
 88 | }
 89 | @media (min-width: 800px) {
 90 |   .nav-main {
 91 |     max-width: 1170px;
 92 |     margin: 0 auto;
 93 |     display: flex;
 94 |     align-items: center;
 95 |     justify-content: space-between;
 96 |     padding: 1rem;
 97 |   }
 98 | 
 99 |   .nav-header {
100 |     padding: 0;
101 |   }
102 |   .fa-bars {
103 |     display: none;
104 |   }
105 | 
106 |   .menu {
107 |     height: auto;
108 |     display: flex;
109 |   }
110 | 
111 |   .menu a {
112 |     padding: 0;
113 |     margin: 0 0.5rem;
114 |   }
115 |   .menu a:hover {
116 |     padding: 0;
117 |     background: transparent;
118 |   }
119 | }
120 | 


--------------------------------------------------------------------------------
/08-Sidebar-project - assignment-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Ayo</title>
 8 |     <link
 9 |       rel="stylesheet"
10 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
11 |       integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
12 |       crossorigin="anonymous"
13 |     />
14 |     <link rel="stylesheet" href="styles.css" />
15 |   </head>
16 |   <body>
17 |     <i class="fa fa-bars" aria-hidden="true"></i>
18 | 
19 |     <div class="sidebar">
20 |       <div class="sidebar-header">
21 |         <h1>codewithay</h1>
22 |         <i class="fa fa-times" aria-hidden="true"></i>
23 |       </div>
24 |       <ul class="menu">
25 |         <li><a href="#">Home</a></li>
26 |         <li><a href="#">About</a></li>
27 |         <li><a href="#">Contact</a></li>
28 |       </ul>
29 |     </div>
30 |     <script src="index.js"></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/08-Sidebar-project - assignment-2/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | const navbar = document.querySelector(".fa-bars");
 3 | const side = document.querySelector(".sidebar");
 4 | const closeSidebar = document.querySelector(".fa-times");
 5 | navbar.addEventListener("click", function(){
 6 |     side.classList.toggle("show-sidebar")
 7 | })
 8 | closeSidebar.addEventListener("click", function(){
 9 |     side.classList.remove("show-sidebar")
10 | })


--------------------------------------------------------------------------------
/08-Sidebar-project - assignment-2/styles.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 | }
 5 | 
 6 | body {
 7 |   font-family: sans-serif;
 8 |   background: #ebebeb;
 9 | }
10 | 
11 | .menu a {
12 |   display: block;
13 |   font-size: 1.5rem;
14 |   padding: 1rem 1.5rem;
15 |   color: grey;
16 |   transition: all 0.3s linear;
17 |   text-decoration: none;
18 | }
19 | 
20 | .sidebar {
21 |   position: fixed;
22 |   top: 0;
23 |   left: 0;
24 |   background: white;
25 |   width: 100%;
26 |   height: 100%;
27 |   transition: all 0.3s linear;
28 |   transform: translate(-100%);
29 | }
30 | 
31 | .show-sidebar {
32 |   transform: translate(0);
33 | }
34 | 
35 | .fa-bars {
36 |   position: fixed;
37 |   top: 2rem;
38 |   right: 3rem;
39 |   color: #e94949;
40 |   font-size: 1.5rem;
41 |   cursor: pointer;
42 | }
43 | 
44 | .fa-bars:hover {
45 |   color: black;
46 | }
47 | 
48 | .fa-times {
49 |   font-size: 1.5rem;
50 |   color: #e94949;
51 |   cursor: pointer;
52 | }
53 | 
54 | .fa-times:hover {
55 |   color: black;
56 | }
57 | 
58 | .sidebar-header {
59 |   display: flex;
60 |   justify-content: space-between;
61 |   align-items: center;
62 |   padding: 1rem 1.5rem;
63 | }
64 | 
65 | .logo {
66 |   margin-left: -15px;
67 | }
68 | 
69 | @media (min-width: 676px) {
70 |   .sidebar {
71 |     width: 500px;
72 |   }
73 | }
74 | 
75 | .menu a:hover {
76 |   background: #f8a5a5;
77 |   padding-left: 1.7rem;
78 | }
79 | 


--------------------------------------------------------------------------------
/09-Behind the Scene/final/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>JavaScript Fundamentals – Part 1</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #2a2e80, #212aca);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |     </style>
25 |   </head>
26 |   <body>
27 |     <h1>Behind the scene</h1>
28 |     <script src="index.js"></script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/09-Behind the Scene/final/index.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | // const firstName = "Ciroma";
  3 | 
  4 | // function first() {
  5 | //   let a = 1;
  6 | //   console.log(a);
  7 | // }
  8 | // first()
  9 | 
 10 | // const second = function () {
 11 | //   let b = 2;
 12 | //   console.log(b);
 13 | // };
 14 | // second();
 15 | // console.log(b)
 16 | 
 17 | // function calcAge(birthYear) {
 18 | //   let currentYear = 2022;
 19 | //   let age = currentYear - birthYear;
 20 | //   return age;
 21 | // }
 22 | // console.log(calcAge(2002))
 23 | // console.log(currentYear)
 24 | 
 25 | // function outerFunction(){
 26 | //     let outerFunctionVar = "I am Outside";
 27 | //     function innerFunction(){
 28 | //         let innerFunctionVar = "I am Inside"
 29 | //         console.log(outerFunctionVar)
 30 | //     }
 31 | //     innerFunction()
 32 | // }
 33 | // outerFunction()
 34 | 
 35 | //Block scope
 36 | // let age = 20
 37 | // if(age >= 20){
 38 | //    const sentence = "I am old enough"
 39 | //     // console.log(sentence)
 40 | // }
 41 | // console.log(sentence)
 42 | 
 43 | // const firstName = "Ciroma";
 44 | // first();
 45 | // function first() {
 46 | //   const b = "Hello";
 47 | //   second();
 48 | // }
 49 | 
 50 | // function second() {
 51 | //   const c = "Hi";
 52 | //   third();
 53 | // }
 54 | // function third() {
 55 | //   const d = "bye";
 56 | //   console.log(b + c + d);
 57 | // }
 58 | 
 59 | // function calcAge(birthYear) {
 60 | //   let currentYear = 2022;
 61 | //   let age = currentYear - birthYear;
 62 | //  function printAge(){
 63 | //     const output = `you are ${age}, and born in ${birthYear}`
 64 | //    //  console.log(output)
 65 | //     if(age >= 18){
 66 | //        var adult = true;
 67 | //        let firstName = "Dumebi"
 68 | //         let str = `Oh ${firstName}, you are an adult`
 69 | //       //   console.log(str)
 70 | //     }
 71 | //  }
 72 | //  printAge()
 73 | //  console.log(adult)
 74 | // }
 75 | // const firstName = "Ciroma";
 76 | // calcAge(2002)
 77 | 
 78 | // var myName = "Ciroma";
 79 | 
 80 | // function addNum() {
 81 | 
 82 | //   let x = 4;
 83 | //   if (x == 5) {
 84 | //     alert("Hello");
 85 | //   }
 86 | //   let y = 5;
 87 | // }
 88 | 
 89 | // const myName = "Dumebi";
 90 | 
 91 | // if (myName === "Dumebi") {
 92 | //   console.log(`Dumebi is a ${job}`);
 93 | //   const age = 2022 - 2000;
 94 | //   // console.log(age);
 95 | //   let job = "Teacher";
 96 | //   console.log(x);
 97 | // }
 98 | 
 99 | //Variable declarations
100 | // var me = "Ciroma";
101 | // let age = "20";
102 | // const job = "Teacher"
103 | 
104 | //function declarations
105 | // console.log(addNumArrow(2, 3));
106 | 
107 | // function addNumDecl(a, b) {
108 | //   return a + b;
109 | // }
110 | 
111 | // // const addNumExp = function (a, b) {
112 | // //   return a + b;
113 | // // };
114 | 
115 | // const addNumArrow = (a, b) => a + b;
116 | // if(!shoppingItems){
117 | //   deleteShoppingItems()
118 | // }
119 | // var shoppingItems = 10;
120 | // function deleteShoppingItems() {
121 | //   console.log(`All products have been deleted`);
122 | // }
123 | // function anon(){
124 | //   let d = 5
125 | // }
126 | // var x = 1;
127 | // let y = 2;
128 | // const z = 3;
129 | // console.log(window)
130 | 
131 | // const person1 = {
132 | //     firstName : "Ciroma",
133 | //     year : 2000,
134 | //     calcAge : function(){
135 | //         console.log(this)
136 | //         return 2022 - this.year
137 | //     }
138 | // }
139 | // console.log(person1.calcAge())
140 | 
141 | //This keyword in practice
142 | // console.log(this)
143 | 
144 | // const calcAge = function(birthYear){
145 | // console.log(2022 - birthYear)
146 | // console.log(this)
147 | // }
148 | // calcAge(2000)
149 | 
150 | // const calcAgeArrow = (birthYear) => {
151 | // console.log(2022 - birthYear)
152 | // console.log(this)
153 | // }
154 | // calcAgeArrow(2000)
155 | 
156 | // const person1 = {
157 | //   firstName: "Ciroma",
158 | //   year: 2000,
159 | //   calcAge: function () {
160 | //     console.log(this);
161 | //     console.log(2022 - this.year);
162 | //   }
163 | // };
164 | // // person1.calcAge();
165 | // // person1.greet()
166 | // const f = person1.calcAge
167 | // f()
168 | 
169 | // const person1 = {
170 | //   firstName: "Ciroma",
171 | //   birthYear: 2000,
172 | //   calcAge: function () {
173 | //     console.log(this);
174 | //     //before the advent of arrow functions//2015
175 | //     // const self  = this
176 | //     // const isAdult = function(){
177 | //     //   console.log(self)
178 | //     //   console.log(self.birthYear <= 2004)
179 | //     // }
180 | //     // isAdult()
181 | //     const isAdult = () => {
182 | //       console.log(this);
183 | //       console.log(this.birthYear <= 2004);
184 | 
185 | //       const hasDriversLicense = () => {
186 | //         console.log(`hey ${this.firstName}, come get your license`);
187 | //       };
188 | //       hasDriversLicense();
189 | //     };
190 | //     isAdult();
191 | //   },
192 | // };
193 | // person1.calcAge();
194 | 
195 | // function addNumDecl(a, b) {
196 | //   console.log(arguments);
197 | //   return a + b;
198 | // }
199 | // addNumDecl(2, 5);
200 | // const addNumExp = function (a, b) {
201 | //   console.log(arguments);
202 | //   return a + b;
203 | // };
204 | // addNumExp(2, 5, 6);
205 | // const addNumArrow = () => {
206 | //   console.log(arguments);
207 | //   return a + b;
208 | // };
209 | // addNumArrow(2, 5, 6);
210 | 
211 | //Primitives and Objects
212 | // let age = 20;
213 | // age = 21;
214 | // let oldAge = age;
215 | 
216 | // console.log("age==>", age);
217 | // console.log("oldAge==>", oldAge);
218 | 
219 | // let person1 = {
220 | //   firstName : "Ciroma",
221 | //   age : 20
222 | // }
223 | // let person2 = person1;
224 | // person2.age = 23;
225 | // person2.job = "Prog"
226 | // console.log(person1)
227 | // console.log(person2)
228 | //Primitive Types
229 | // let lastName = "Ciroma"
230 | // let oldLastName = lastName;
231 | // lastName = "Adekunle"
232 | // console.log(lastName)
233 | //Reference Types
234 | // const jessica = {
235 | //   firstName: "Jessica",
236 | //   lastName: "Ciroma",
237 | //   age: 27,
238 | // };
239 | 
240 | // const marriedJessica = jessica;
241 | // marriedJessica.lastName = "Adekunle";
242 | // console.log("before marriage =>", jessica);
243 | // console.log("after marriage =>", marriedJessica);
244 | 
245 | //Copying objects
246 | const dumebi = {
247 |   firstName: "Kate",
248 |   lastName: "Dumebi",
249 |   age: 20,
250 | };
251 | let dumebiCopy = Object.assign({gender: "male"}, dumebi);
252 | dumebiCopy.age = 30
253 | console.log(dumebiCopy)
254 | 


--------------------------------------------------------------------------------
/09-Behind the Scene/start/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>JavaScript Fundamentals – Part 1</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #2a2e80, #212aca);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |     </style>
25 |   </head>
26 |   <body>
27 |     <h1>Behind the scene</h1>
28 |     <script src="index.js"></script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/09-Behind the Scene/start/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/09-Behind the Scene/start/index.js


--------------------------------------------------------------------------------
/10-Data-Structures-Operators/10-Data-Structures-Operators/end/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/10-Data-Structures-Operators/10-Data-Structures-Operators/end/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Data Structures and Modern Operators</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #c53505, #dbab9b);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |       button {
25 |         width: 50px;
26 |         height: 20px;
27 |         margin: 10px;
28 |       }
29 |       textarea {
30 |         width: 300px;
31 |         height: 100px;
32 |       }
33 |     </style>
34 |   </head>
35 |   <body>
36 |     <h1>Data Structures and Modern Operators</h1>
37 |     <script src="script.js"></script>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/10-Data-Structures-Operators/10-Data-Structures-Operators/starter/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/10-Data-Structures-Operators/10-Data-Structures-Operators/starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Data Structures and Modern Operators</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #c53505, #dbab9b);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |       button {
25 |         width: 50px;
26 |         height: 20px;
27 |         margin: 10px;
28 |       }
29 |       textarea {
30 |         width: 300px;
31 |         height: 100px;
32 |       }
33 |     </style>
34 |   </head>
35 |   <body>
36 |     <h1>Data Structures and Modern Operators</h1>
37 |     <script src="script.js"></script>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/10-Data-Structures-Operators/10-Data-Structures-Operators/starter/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | 
 4 | // Data needed for first part of the section
 5 | const restaurant = {
 6 |   name: 'Thrills Restaurant',
 7 |   location: 'Broad Street, Lagos Island, Lagos State',
 8 |   categories: ['Swallow', 'Vegetarian', 'Organic'],
 9 |   starterMenu: ['Cassava', 'Garri', 'Beans'],
10 |   mainMenu: ['Maize', 'Plantain'],
11 | 
12 |   openingHours: {
13 |     thu: {
14 |       open: 12,
15 |       close: 22,
16 |     },
17 |     fri: {
18 |       open: 11,
19 |       close: 23,
20 |     },
21 |     sat: {
22 |       open: 0, // Open 24 hours
23 |       close: 24,
24 |     },
25 |   },
26 | };
27 | 


--------------------------------------------------------------------------------
/10-Data-Structures-Operators/end/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/10-Data-Structures-Operators/end/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Data Structures and Modern Operators</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #c53505, #dbab9b);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |       button {
25 |         width: 50px;
26 |         height: 20px;
27 |         margin: 10px;
28 |       }
29 |       textarea {
30 |         width: 300px;
31 |         height: 100px;
32 |       }
33 |     </style>
34 |   </head>
35 |   <body>
36 |     <h1>Data Structures and Modern Operators</h1>
37 |     <script src="script.js"></script>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/10-Data-Structures-Operators/starter/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/10-Data-Structures-Operators/starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Data Structures and Modern Operators</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #c53505, #dbab9b);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |       button {
25 |         width: 50px;
26 |         height: 20px;
27 |         margin: 10px;
28 |       }
29 |       textarea {
30 |         width: 300px;
31 |         height: 100px;
32 |       }
33 |     </style>
34 |   </head>
35 |   <body>
36 |     <h1>Data Structures and Modern Operators</h1>
37 |     <script src="script.js"></script>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/10-Data-Structures-Operators/starter/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | 
 4 | // Data needed for first part of the section
 5 | const restaurant = {
 6 |   name: 'Thrills Restaurant',
 7 |   location: 'Broad Street, Lagos Island, Lagos State',
 8 |   categories: ['Swallow', 'Vegetarian', 'Organic'],
 9 |   starterMenu: ['Cassava', 'Garri', 'Beans'],
10 |   mainMenu: ['Maize', 'Plantain'],
11 | 
12 |   openingHours: {
13 |     thu: {
14 |       open: 12,
15 |       close: 22,
16 |     },
17 |     fri: {
18 |       open: 11,
19 |       close: 23,
20 |     },
21 |     sat: {
22 |       open: 0, // Open 24 hours
23 |       close: 24,
24 |     },
25 |   },
26 | };
27 | 


--------------------------------------------------------------------------------
/11-WEEK16-ASSIGNMENT-STARTER FILES/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <link rel="stylesheet" href="style.css" />
 7 |     <title>Image Carousel</title>
 8 |   </head>
 9 |   <body>
10 |     <div class="carousel">
11 |       <div class="image-container" id="imgs">
12 |         <img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80"
13 |        alt="first-image"
14 |        />
15 |     <img
16 |        src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
17 |        alt="second-image"
18 |        />
19 |     <img
20 |        src="https://images.unsplash.com/photo-1599423300746-b62533397364?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
21 |        alt="third-image"
22 |        />
23 |     <img
24 |        src="https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80"
25 |        alt="fourth-image"
26 |        />
27 |       </div>
28 | 
29 |       <div class="buttons-container">
30 |         <button id="left" class="btn">Prev</button>
31 |         <button id="right" class="btn">Next</button>
32 |       </div>
33 |     </div>
34 | 
35 |     <script src="script.js"></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/11-WEEK16-ASSIGNMENT-STARTER FILES/script.js:
--------------------------------------------------------------------------------
 1 | //Hint
 2 | //Critically Examine the mark up and the CSS
 3 | //Select the left and right buttons
 4 | //Select element with id of imgs
 5 | //select all the images
 6 | //crate a function to change image on button click
 7 | //you may need to learn about about the setInterval method
 8 | //you will need to transform the images offscreen to implement sliding effect
 9 | //Goodluck😎
10 | 
11 | "use strict";
12 | const leftBtn = document.querySelector("#left");
13 | const rightBtn = document.querySelector("#right");
14 | const imageContainer = document.querySelector("#imgs");
15 | const images = document.querySelectorAll("img");
16 | 
17 | let counter = 0;
18 | const changeImage = function () {
19 |   if (counter > images.length - 1) {
20 |     counter = 0;
21 |   } else if (counter < 0) {
22 |     counter = images.length - 1;
23 |   }
24 |   imageContainer.style.transform = `translateX(${-counter * 500}px)`;
25 | };
26 | 
27 | rightBtn.addEventListener("click", function () {
28 |   counter++;
29 |   changeImage();
30 | });
31 | leftBtn.addEventListener("click", function () {
32 |   counter--;
33 |   changeImage();
34 | });
35 | 


--------------------------------------------------------------------------------
/11-WEEK16-ASSIGNMENT-STARTER FILES/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 2 | 
 3 | * {
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |   font-family: 'Roboto', sans-serif;
 9 |   display: flex;
10 |   align-items: center;
11 |   justify-content: center;
12 |   height: 100vh;
13 |   margin: 0;
14 | }
15 | 
16 | img {
17 |   width: 500px;
18 |   height: 500px;
19 |   object-fit: cover;
20 | }
21 | 
22 | .carousel {
23 |   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
24 |   height: auto;
25 |   width: 500px;
26 |   overflow: hidden;
27 | 
28 | }
29 | 
30 | .image-container {
31 |   display: flex;
32 |   transform: translateX(0);
33 |   transition: transform 0.5s ease-in-out;
34 | }
35 | 
36 | .buttons-container {
37 |   display: flex;
38 |   justify-content: space-between;
39 | }
40 | 
41 | .btn {
42 |   background-color: rebeccapurple;
43 |   color: #fff;
44 |   border: none;
45 |   padding: 0.5rem;
46 |   cursor: pointer;
47 |   width: 49.5%;
48 | }
49 | 
50 | .btn:hover {
51 |   opacity: 0.9;
52 | }
53 | 
54 | .btn:focus {
55 |   outline: none;
56 | }
57 | 


--------------------------------------------------------------------------------
/12-Closer Look at Functions/end/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>JavaScript Fundamentals – Part 1</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #4abb28, #0fe93a);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |       button{
25 |         position: absolute;
26 |         top: 60%;
27 |         left: 50%;
28 |         background-color: crimson;
29 |         color: white;
30 |         padding: 7px 15px;
31 |         border: none;
32 |         border-radius: 5px;
33 |       }
34 |     </style>
35 |   </head>
36 |   <body>
37 |     <h1>Taking a closer Look at Functions</h1>
38 |     <button>Buy Data</button>
39 |     <script src="script.js"></script>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/12-Closer Look at Functions/end/script.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | //FIRST CLASS FUNCTIONS AND HIGHER ORDER FUNCTIONS
  3 | 
  4 | // const add = function(){
  5 | 
  6 | // }
  7 | // const obj = {
  8 | //     orderWine : function(){
  9 | 
 10 | //     }
 11 | // }
 12 | // const h1 = document.querySelector("h1")
 13 | // h1.addEventListener("click", function(){
 14 | //     console.log("hello")
 15 | // })
 16 | 
 17 | // function addNumber(){
 18 | //     return function(){
 19 | 
 20 | //     }
 21 | // }
 22 | 
 23 | //functions accepting callbacks as an argument
 24 | // const x = function () {
 25 | //   console.log("I am called inside of a function");
 26 | // };
 27 | 
 28 | // const y = function (callback) {
 29 | //   console.log("say something");
 30 | //   callback();
 31 | // };
 32 | // y(x);
 33 | 
 34 | // const calc = function (num1, num2, calcType) {
 35 | //   if (calcType === "add") {
 36 | //     return num1 + num2;
 37 | //   }
 38 | //   else if (calcType === "multiply") {
 39 | //     return num1 * num2;
 40 | //   }
 41 | //   else if (calcType === "subtract") {
 42 | //     return num1 - num2;
 43 | //   }
 44 | // };
 45 | // console.log(calc(5, 10, "add"));
 46 | // calc(5, 10, "multiply");
 47 | // calc(5, 10, "subtract");
 48 | /*
 49 | const add = function (a, b) {
 50 |   return a + b;
 51 | };
 52 | const multiply = function (a, b) {
 53 |   return a * b;
 54 | };
 55 | const subtract = function (a, b) {
 56 |   return a - b;
 57 | };
 58 | const doWhatever = function (a, b) {
 59 |   console.log(`here are  your numbers ${a}, ${b}`);
 60 |   return "clown"
 61 | };
 62 | 
 63 | const calc = function (num1, num2, callback) {
 64 |     if(typeof callback === "function"){
 65 |         return callback(num1,num2);
 66 |     }
 67 |     else{
 68 |         console.log(`${callback} is not a function`)
 69 |     }
 70 | };
 71 | 
 72 | console.log(calc(2,5,"add"))
 73 | 
 74 | // const sayHi = function(){
 75 | //     console.log("Hi")
 76 | // }
 77 | // ["Ayo","Dumebi", "Ciroma"].forEach(sayHi)
 78 | // h1.addEventListener("click", sayHi)
 79 | */
 80 | 
 81 | //FUNCTIONS RETURNING FUNCTIONS
 82 | // function one(){
 83 | //     return function(){
 84 | //         console.log("yaay")
 85 | //     }
 86 | // }
 87 | // one();
 88 | 
 89 | // const greet = function (greeting) {
 90 | //   return function (name) {
 91 | //     console.log(`${greeting} ${name}`);
 92 | //   };
 93 | // };
 94 | // greet("Hello")("Dumebi");
 95 | 
 96 | // const greet3 = greeting => name => console.log(`${greeting} ${name}`);
 97 | // greet3("Hello")("Dumebi")
 98 | 
 99 | // const greet2 = (greeting) => {
100 | //    const mtn =  (name) => {
101 | //     console.log(`${greeting} ${name}`);
102 | //   };
103 | //   return mtn
104 | // };
105 | // greet2("hello")("Dumebi");
106 | 
107 | //DEFAULT PARAMETERS
108 | // function greeter(greeting = "Hey", nameOfUser = "User") {
109 | //   //before es6
110 | //   // greeting = greeting || "Hey";
111 | //   console.log(`${greeting} ${nameOfUser}`);
112 | //   return nameOfUser
113 | // }
114 | // greeter("Hello", "Ciroma");
115 | 
116 | // function sayHello (greet, fn = "User" ){
117 | // console.log(`${greet} ${fn()}`)
118 | // }
119 | // sayHello("Hi", greeter )
120 | //HOW PASSING ARGUMENTS WRT PRIMITVES AND REFERENCE TYPES
121 | /*
122 | const network = "MTN";
123 | const user = {
124 |   firstName : "Ciroma",
125 |   tariff : "MTN Pulse"
126 | }
127 | const checkTariff = function(userNetwork, userDetails){
128 | userNetwork = `${userNetwork} NIGERIA`
129 | userDetails.firstName = `Mr ${userDetails.firstName}`
130 | console.log(`${userNetwork} `, userDetails);
131 | }
132 | 
133 | checkTariff(network,user )
134 | */
135 | // const userNetwork = network
136 | // const userDetails = user
137 | 
138 | // console.log(network);
139 | // console.log(user);
140 | 
141 | //Call and apply method
142 | const mtn = {
143 |   tariff: "MTN Pulse",
144 |   details: [],
145 |   sub(datasize = 0, nameOfUser = "User") {
146 |     console.log(
147 |       `Dear ${nameOfUser}, you have subscribed for ${datasize} MB.Your tariff plan is ${this.tariff}`
148 |     );
149 |     this.details.push({ nameOfUser, datasize });
150 |   },
151 | };
152 | 
153 | // console.log(mtn)
154 | 
155 | const glo = {
156 |   tariff: "Glo Yafun Yafun",
157 |   details: [],
158 | };
159 | const airtel = {
160 |   tariff: "Plenti Data",
161 |   details: [],
162 |   data: 400,
163 | };
164 | const smile = {
165 |   tariff: "Smiling",
166 |   details: [],
167 | };
168 | const subscribe = mtn.sub;
169 | // subscribe.call(glo)
170 | // console.log(glo)
171 | 
172 | // subscribe.call(airtel, "adekunle", 20000)
173 | // const subInfo = ["Kate", 700]
174 | // subscribe.call(smile, ...subInfo)
175 | // const arr = []
176 | // arr.push({a: 1,b:2})
177 | // console.log(arr)
178 | //BIND METHOD
179 | // subscribe("Ayo", 2000)
180 | const subAirtel = subscribe.bind(airtel);
181 | const subMtn = subscribe.bind(mtn);
182 | // subAirtel("Ayo", 2000)
183 | // subAirtel("Ciroma", 5000)
184 | // subMtn("Ade", 200)
185 | // const subSmile500 = subscribe.bind(smile, 500);
186 | // subSmile500("Ayo")
187 | // subSmile500("Tope")
188 | // mtn.data = 500;
189 | // mtn.buyData = function(){
190 | //   this.data *= 2;
191 | //   console.log(this.data)
192 | // }
193 | // document.querySelector("button").addEventListener("click",mtn.buyData.bind(airtel))
194 | 
195 | //IMMEDIATELY INVOKED FUNCTION EXPRESSIONS
196 | // const runOnce = function(){
197 | //   console.log("This will only run once")
198 | // }
199 | // runOnce()
200 | // runOnce()
201 | // runOnce()
202 | // (function () {
203 | //   const isPrivate = "Hi"
204 | //   console.log("This will only run once");
205 | // })();
206 | // (() => {
207 | //   console.log("This will only run once");
208 | // })();
209 | 
210 | //MYSTICAL CLOSURE
211 | // let dataSize = 200
212 | // const getData = function () {
213 | //   let dataSize = 500;
214 | //   let q =5
215 | //   return function(){
216 | //     dataSize++;
217 | 
218 | //     console.log(`${dataSize} MB`);
219 | //   };
220 | // };
221 | // getData()
222 | 
223 | // const subscriber = getData();
224 | // subscriber()
225 | // subscriber()
226 | // subscriber()
227 | 
228 | // console.dir(subscriber)
229 | /*
230 | let f;
231 | 
232 | const g = function () {
233 |   const a = 20;
234 |   f = function () {
235 |     console.log(a * 2);
236 |   };
237 | };
238 | 
239 | const h = function () {
240 |   const b = 100;
241 |   f = function () {
242 |     console.log(b * 2);
243 |   };
244 | };
245 | g();
246 | f();
247 | console.dir(f);
248 | h();
249 | f();
250 | console.dir(f);
251 | */
252 | 
253 | const capitalizeWords = function(str){
254 | const arrayOfWords = str.split(" ")
255 | for(let i = 0; i < arrayOfWords.length; i++){
256 | arrayOfWords[i] = arrayOfWords[i][0].toUpperCase() + arrayOfWords[i].slice(1).toLowerCase()
257 | }
258 | const str2 = arrayOfWords.join(" ")
259 | console.log(str2)
260 | }
261 | capitalizeWords("HELLO EVERYONE HOW ARE YOU DOING")
262 | 
263 | 
264 | function capitalized(sentence) {
265 |   let stringWord = [];
266 |   let words = sentence.split(" ");
267 |   for (const word of words) {
268 |     let completeWords = [word[0].toUpperCase(), word.slice(1).toLowerCase()].join("");
269 |     stringWord.push(completeWords);
270 |   }
271 |   const finalWord = stringWord.toString().replaceAll(",", " ");
272 |   console.log(finalWord);
273 | }
274 | capitalized("HELLO EVERYONE HOW ARE YOU DOING");
275 | 


--------------------------------------------------------------------------------
/12-Closer Look at Functions/start/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>JavaScript Fundamentals – Part 1</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #4abb28, #0fe93a);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |     </style>
25 |   </head>
26 |   <body>
27 |     <h1>Taking a closer Look at Functions</h1>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/13-Arrays-Mobile Banking Website/final/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/13-Arrays-Mobile Banking Website/final/Bankist-flowchart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/13-Arrays-Mobile Banking Website/final/Bankist-flowchart.png


--------------------------------------------------------------------------------
/13-Arrays-Mobile Banking Website/final/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/13-Arrays-Mobile Banking Website/final/icon.png


--------------------------------------------------------------------------------
/13-Arrays-Mobile Banking Website/final/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <link rel="shortcut icon" type="image/png" href="/icon.png" />
  8 | 
  9 |     <link
 10 |       href="https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap"
 11 |       rel="stylesheet"
 12 |     />
 13 | 
 14 |     <link rel="stylesheet" href="style.css" />
 15 |     <title>MOBILE BANKING WEBSITE</title>
 16 |   </head>
 17 |   <body>
 18 |     <!-- TOP NAVIGATION -->
 19 |     <nav>
 20 |       <p class="welcome">Log in to get started</p>
 21 |       <img src="logo.png" alt="Logo" class="logo" />
 22 |       <form class="login">
 23 |         <input
 24 |           type="text"
 25 |           placeholder="user"
 26 |           class="login__input login__input--user"
 27 |         />
 28 |         <!-- In practice, use type="password" -->
 29 |         <input
 30 |           type="text"
 31 |           placeholder="PIN"
 32 |           maxlength="4"
 33 |           class="login__input login__input--pin"
 34 |         />
 35 |         <button class="login__btn">&rarr;</button>
 36 |       </form>
 37 |     </nav>
 38 | 
 39 |     <main class="app">
 40 |       <!-- BALANCE -->
 41 |       <div class="balance">
 42 |         <div>
 43 |           <p class="balance__label">Current balance</p>
 44 |           <p class="balance__date">
 45 |             As of <span class="date">11/11/2030</span>
 46 |           </p>
 47 |         </div>
 48 |         <p class="balance__value">0000 &#8358</p>
 49 |       </div>
 50 | 
 51 |       <!-- MOVEMENTS -->
 52 |       <div class="movements">
 53 |         <div class="movements__row">
 54 |           <div class="movements__type movements__type--deposit">2 deposit</div>
 55 |           <div class="movements__date">3 days ago</div>
 56 |           <div class="movements__value">4 000 &#8358</div>
 57 |         </div>
 58 |         <div class="movements__row">
 59 |           <div class="movements__type movements__type--withdrawal">
 60 |             1 withdrawal
 61 |           </div>
 62 |           <div class="movements__date">24/01/2037</div>
 63 |           <div class="movements__value">-378 &#8358</div>
 64 |         </div>
 65 |       </div>
 66 | 
 67 |       <!-- SUMMARY -->
 68 |       <div class="summary">
 69 |         <p class="summary__label">In</p>
 70 |         <p class="summary__value summary__value--in">0000 &#8358</p>
 71 |         <p class="summary__label">Out</p>
 72 |         <p class="summary__value summary__value--out">0000 &#8358</p>
 73 |         <p class="summary__label">Interest</p>
 74 |         <p class="summary__value summary__value--interest">0000 &#8358</p>
 75 |         <button class="btn--sort">&downarrow; SORT</button>
 76 |       </div>
 77 | 
 78 |       <!-- OPERATION: TRANSFERS -->
 79 |       <div class="operation operation--transfer">
 80 |         <h2>Transfer money</h2>
 81 |         <form class="form form--transfer">
 82 |           <input type="text" class="form__input form__input--to" />
 83 |           <input type="number" class="form__input form__input--amount" />
 84 |           <button class="form__btn form__btn--transfer">&rarr;</button>
 85 |           <label class="form__label">Transfer to</label>
 86 |           <label clasos="form__label">Amount</label>
 87 |         </form>
 88 |       </div>
 89 | 
 90 |       <!-- OPERATION: LOAN -->
 91 |       <div class="operation operation--loan">
 92 |         <h2>Request loan</h2>
 93 |         <form class="form form--loan">
 94 |           <input type="number" class="form__input form__input--loan-amount" />
 95 |           <button class="form__btn form__btn--loan">&rarr;</button>
 96 |           <label class="form__label form__label--loan">Amount</label>
 97 |         </form>
 98 |       </div>
 99 | 
100 |       <!-- OPERATION: CLOSE -->
101 |       <div class="operation operation--close">
102 |         <h2>Close account</h2>
103 |         <form class="form form--close">
104 |           <input type="text" class="form__input form__input--user" />
105 |           <input
106 |             type="password"
107 |             maxlength="6"
108 |             class="form__input form__input--pin"
109 |           />
110 |           <button class="form__btn form__btn--close">&rarr;</button>
111 |           <label class="form__label">Confirm user</label>
112 |           <label class="form__label">Confirm PIN</label>
113 |         </form>
114 |       </div>
115 | 
116 |       <!-- LOGOUT TIMER -->
117 |       <p class="logout-timer">
118 |         You will be logged out in <span class="timer">05:00</span>
119 |       </p>
120 |     </main>
121 | 
122 |     <script src="script.js"></script>
123 |   </body>
124 | </html>
125 | 


--------------------------------------------------------------------------------
/13-Arrays-Mobile Banking Website/final/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/13-Arrays-Mobile Banking Website/final/logo.png


--------------------------------------------------------------------------------
/13-Arrays-Mobile Banking Website/final/style.css:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: inherit;
  7 | }
  8 | 
  9 | html {
 10 |   font-size: 62.5%;
 11 |   box-sizing: border-box;
 12 | }
 13 | 
 14 | body {
 15 |   font-family: "Poppins", sans-serif;
 16 |   color: #444;
 17 |   background-color: #f3f3f3;
 18 |   height: 100vh;
 19 |   padding: 2rem;
 20 | }
 21 | 
 22 | nav {
 23 |   display: flex;
 24 |   justify-content: space-between;
 25 |   align-items: center;
 26 |   padding: 0 2rem;
 27 | 
 28 | }
 29 | 
 30 | .welcome {
 31 |   font-size: 1.9rem;
 32 |   font-weight: 500;
 33 | }
 34 | 
 35 | .logo {
 36 |   height: 5.25rem;
 37 | }
 38 | 
 39 | .login {
 40 |   display: flex;
 41 | }
 42 | 
 43 | .login__input {
 44 |   border: none;
 45 |   padding: 0.5rem 2rem;
 46 |   font-size: 1.6rem;
 47 |   font-family: inherit;
 48 |   text-align: center;
 49 |   width: 12rem;
 50 |   border-radius: 10rem;
 51 |   margin-right: 1rem;
 52 |   color: inherit;
 53 |   border: 1px solid #fff;
 54 |   transition: all 0.3s;
 55 | }
 56 | 
 57 | .login__input:focus {
 58 |   outline: none;
 59 |   border: 1px solid #ccc;
 60 | }
 61 | 
 62 | .login__input::placeholder {
 63 |   color: #bbb;
 64 | }
 65 | 
 66 | .login__btn {
 67 |   border: none;
 68 |   background: none;
 69 |   font-size: 2.2rem;
 70 |   color: inherit;
 71 |   cursor: pointer;
 72 |   transition: all 0.3s;
 73 | }
 74 | 
 75 | .login__btn:hover,
 76 | .login__btn:focus,
 77 | .btn--sort:hover,
 78 | .btn--sort:focus {
 79 |   outline: none;
 80 |   color: #777;
 81 | }
 82 | 
 83 | /* MAIN */
 84 | .app {
 85 |   position: relative;
 86 |   max-width: 100rem;
 87 |   margin: 4rem auto;
 88 |   display: grid;
 89 |   grid-template-columns: 4fr 3fr;
 90 |   grid-template-rows: auto repeat(3, 15rem) auto;
 91 |   gap: 2rem;
 92 |  
 93 | 
 94 |   /* NOTE This creates the fade in/out anumation */
 95 |   opacity: 0;
 96 |   transition: all 1s;
 97 | }
 98 | 
 99 | .balance {
100 |   grid-column: 1 / span 2;
101 |   display: flex;
102 |   align-items: flex-end;
103 |   justify-content: space-between;
104 |   margin-bottom: 2rem;
105 | 
106 | }
107 | 
108 | .balance__label {
109 |   font-size: 2.2rem;
110 |   font-weight: 500;
111 |   margin-bottom: -0.2rem;
112 | }
113 | 
114 | .balance__date {
115 |   font-size: 1.4rem;
116 |   color: #888;
117 | }
118 | 
119 | .balance__value {
120 |   font-size: 4.5rem;
121 |   font-weight: 400;
122 |   /* border: 2px solid red; */
123 | }
124 | 
125 | /* MOVEMENTS */
126 | .movements {
127 |   grid-row: 2 / span 3;
128 |   background-color: #fff;
129 |   border-radius: 1rem;
130 |   overflow: scroll;
131 | 
132 | }
133 | 
134 | .movements__row {
135 |   padding: 2.25rem 4rem;
136 |   display: flex;
137 |   align-items: center;
138 |   border-bottom: 1px solid #eee;
139 | 
140 | }
141 | 
142 | .movements__type {
143 |   font-size: 1.1rem;
144 |   text-transform: uppercase;
145 |   font-weight: 500;
146 |   color: #fff;
147 |   padding: 0.1rem 1rem;
148 |   border-radius: 10rem;
149 |   margin-right: 2rem;
150 | }
151 | 
152 | .movements__date {
153 |   font-size: 1.1rem;
154 |   text-transform: uppercase;
155 |   font-weight: 500;
156 |   color: #666;
157 | }
158 | 
159 | .movements__type--deposit {
160 |   background-image: linear-gradient(to top left, #39b385, #9be15d);
161 | }
162 | 
163 | .movements__type--withdrawal {
164 |   background-image: linear-gradient(to top left, #e52a5a, #ff585f);
165 | }
166 | 
167 | .movements__value {
168 |   font-size: 1.7rem;
169 |   margin-left: auto;
170 | }
171 | 
172 | /* SUMMARY */
173 | .summary {
174 |   grid-row: 5 / 6;
175 |   display: flex;
176 |   align-items: baseline;
177 |   padding: 0 0.3rem;
178 |   margin-top: 1rem;
179 | }
180 | 
181 | .summary__label {
182 |   font-size: 1.2rem;
183 |   font-weight: 500;
184 |   text-transform: uppercase;
185 |   margin-right: 0.8rem;
186 | }
187 | 
188 | .summary__value {
189 |   font-size: 2.2rem;
190 |   margin-right: 2.5rem;
191 | }
192 | 
193 | .summary__value--in,
194 | .summary__value--interest {
195 |   color: #66c873;
196 | }
197 | 
198 | .summary__value--out {
199 |   color: #f5465d;
200 | }
201 | 
202 | .btn--sort {
203 |   margin-left: auto;
204 |   border: none;
205 |   background: none;
206 |   font-size: 1.3rem;
207 |   font-weight: 500;
208 |   cursor: pointer;
209 | }
210 | 
211 | /* OPERATIONS */
212 | .operation {
213 |   border-radius: 1rem;
214 |   padding: 3rem 4rem;
215 |   color: #333;
216 | }
217 | 
218 | .operation--transfer {
219 |   background-image: linear-gradient(to top left, #ffb003, #ffcb03);
220 | }
221 | 
222 | .operation--loan {
223 |   background-image: linear-gradient(to top left, #39b385, #9be15d);
224 | }
225 | 
226 | .operation--close {
227 |   background-image: linear-gradient(to top left, #e52a5a, #ff585f);
228 | }
229 | 
230 | h2 {
231 |   margin-bottom: 1.5rem;
232 |   font-size: 1.7rem;
233 |   font-weight: 600;
234 |   color: #333;
235 | }
236 | 
237 | .form {
238 |   display: grid;
239 |   grid-template-columns: 2.5fr 2.5fr 1fr;
240 |   grid-template-rows: auto auto;
241 |   gap: 0.4rem 1rem;
242 | }
243 | 
244 | /* Exceptions for interst */
245 | .form.form--loan {
246 |   grid-template-columns: 2.5fr 1fr 2.5fr;
247 | }
248 | .form__label--loan {
249 |   grid-row: 2;
250 | }
251 | /* End exceptions */
252 | 
253 | .form__input {
254 |   width: 100%;
255 |   border: none;
256 |   background-color: rgba(255, 255, 255, 0.4);
257 |   font-family: inherit;
258 |   font-size: 1.5rem;
259 |   text-align: center;
260 |   color: #333;
261 |   padding: 0.3rem 1rem;
262 |   border-radius: 0.7rem;
263 |   transition: all 0.3s;
264 | }
265 | 
266 | .form__input:focus {
267 |   outline: none;
268 |   background-color: rgba(255, 255, 255, 0.6);
269 | }
270 | 
271 | .form__label {
272 |   font-size: 1.3rem;
273 |   text-align: center;
274 | }
275 | 
276 | .form__btn {
277 |   border: none;
278 |   border-radius: 0.7rem;
279 |   font-size: 1.8rem;
280 |   background-color: #fff;
281 |   cursor: pointer;
282 |   transition: all 0.3s;
283 | }
284 | 
285 | .form__btn:focus {
286 |   outline: none;
287 |   background-color: rgba(255, 255, 255, 0.8);
288 | }
289 | 
290 | .logout-timer {
291 |   padding: 0 0.3rem;
292 |   margin-top: 1.9rem;
293 |   text-align: right;
294 |   font-size: 1.25rem;
295 | }
296 | 
297 | .timer {
298 |   font-weight: 600;
299 | }
300 | 


--------------------------------------------------------------------------------
/13-Arrays-Mobile Banking Website/starter/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/13-Arrays-Mobile Banking Website/starter/Bankist-flowchart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/13-Arrays-Mobile Banking Website/starter/Bankist-flowchart.png


--------------------------------------------------------------------------------
/13-Arrays-Mobile Banking Website/starter/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/13-Arrays-Mobile Banking Website/starter/icon.png


--------------------------------------------------------------------------------
/13-Arrays-Mobile Banking Website/starter/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <link rel="shortcut icon" type="image/png" href="/icon.png" />
  8 | 
  9 |     <link
 10 |       href="https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap"
 11 |       rel="stylesheet"
 12 |     />
 13 | 
 14 |     <link rel="stylesheet" href="style.css" />
 15 |     <title>MOBILE BANKING WEBSITE</title>
 16 |   </head>
 17 |   <body>
 18 |     <!-- TOP NAVIGATION -->
 19 |     <nav>
 20 |       <p class="welcome">Log in to get started</p>
 21 |       <img src="logo.png" alt="Logo" class="logo" />
 22 |       <form class="login">
 23 |         <input
 24 |           type="text"
 25 |           placeholder="user"
 26 |           class="login__input login__input--user"
 27 |         />
 28 |         <!-- In practice, use type="password" -->
 29 |         <input
 30 |           type="text"
 31 |           placeholder="PIN"
 32 |           maxlength="4"
 33 |           class="login__input login__input--pin"
 34 |         />
 35 |         <button class="login__btn">&rarr;</button>
 36 |       </form>
 37 |     </nav>
 38 | 
 39 |     <main class="app">
 40 |       <!-- BALANCE -->
 41 |       <div class="balance">
 42 |         <div>
 43 |           <p class="balance__label">Current balance</p>
 44 |           <p class="balance__date">
 45 |             As of <span class="date">11/11/2030</span>
 46 |           </p>
 47 |         </div>
 48 |         <p class="balance__value">0000 &#8358</p>
 49 |       </div>
 50 | 
 51 |       <!-- MOVEMENTS -->
 52 |       <div class="movements">
 53 |         <div class="movements__row">
 54 |           <div class="movements__type movements__type--deposit">2 deposit</div>
 55 |           <div class="movements__date">3 days ago</div>
 56 |           <div class="movements__value">4 000 &#8358</div>
 57 |         </div>
 58 |         <div class="movements__row">
 59 |           <div class="movements__type movements__type--withdrawal">
 60 |             1 withdrawal
 61 |           </div>
 62 |           <div class="movements__date">24/01/2037</div>
 63 |           <div class="movements__value">-378 &#8358</div>
 64 |         </div>
 65 |       </div>
 66 | 
 67 |       <!-- SUMMARY -->
 68 |       <div class="summary">
 69 |         <p class="summary__label">In</p>
 70 |         <p class="summary__value summary__value--in">0000 &#8358</p>
 71 |         <p class="summary__label">Out</p>
 72 |         <p class="summary__value summary__value--out">0000 &#8358</p>
 73 |         <p class="summary__label">Interest</p>
 74 |         <p class="summary__value summary__value--interest">0000 &#8358</p>
 75 |         <button class="btn--sort">&downarrow; SORT</button>
 76 |       </div>
 77 | 
 78 |       <!-- OPERATION: TRANSFERS -->
 79 |       <div class="operation operation--transfer">
 80 |         <h2>Transfer money</h2>
 81 |         <form class="form form--transfer">
 82 |           <input type="text" class="form__input form__input--to" />
 83 |           <input type="number" class="form__input form__input--amount" />
 84 |           <button class="form__btn form__btn--transfer">&rarr;</button>
 85 |           <label class="form__label">Transfer to</label>
 86 |           <label class="form__label">Amount</label>
 87 |         </form>
 88 |       </div>
 89 | 
 90 |       <!-- OPERATION: LOAN -->
 91 |       <div class="operation operation--loan">
 92 |         <h2>Request loan</h2>
 93 |         <form class="form form--loan">
 94 |           <input type="number" class="form__input form__input--loan-amount" />
 95 |           <button class="form__btn form__btn--loan">&rarr;</button>
 96 |           <label class="form__label form__label--loan">Amount</label>
 97 |         </form>
 98 |       </div>
 99 | 
100 |       <!-- OPERATION: CLOSE -->
101 |       <div class="operation operation--close">
102 |         <h2>Close account</h2>
103 |         <form class="form form--close">
104 |           <input type="text" class="form__input form__input--user" />
105 |           <input
106 |             type="password"
107 |             maxlength="6"
108 |             class="form__input form__input--pin"
109 |           />
110 |           <button class="form__btn form__btn--close">&rarr;</button>
111 |           <label class="form__label">Confirm user</label>
112 |           <label class="form__label">Confirm PIN</label>
113 |         </form>
114 |       </div>
115 | 
116 |       <!-- LOGOUT TIMER -->
117 |       <p class="logout-timer">
118 |         You will be logged out in <span class="timer">05:00</span>
119 |       </p>
120 |     </main>
121 | 
122 |     <script src="script.js"></script>
123 |   </body>
124 | </html>
125 | 


--------------------------------------------------------------------------------
/13-Arrays-Mobile Banking Website/starter/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/13-Arrays-Mobile Banking Website/starter/logo.png


--------------------------------------------------------------------------------
/13-Arrays-Mobile Banking Website/starter/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | /////////////////////////////////////////////////
 4 | /////////////////////////////////////////////////
 5 | // MOBILE BANKING WEBSITE
 6 | 
 7 | // Data
 8 | const account1 = {
 9 |   owner: 'Ayobami Owoeye',
10 |   movements: [200, 450, -400, 3000, -650, -130, 70, 1300],
11 |   interestRate: 1.2, // %
12 |   pin: 1111,
13 | };
14 | 
15 | const account2 = {
16 |   owner: 'Chima Francis',
17 |   movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],
18 |   interestRate: 1.5,
19 |   pin: 2222,
20 | };
21 | 
22 | const account3 = {
23 |   owner: 'Esther Ojile',
24 |   movements: [200, -200, 340, -300, -20, 50, 400, -460],
25 |   interestRate: 0.7,
26 |   pin: 3333,
27 | };
28 | 
29 | const account4 = {
30 |   owner: 'Helen Nneka',
31 |   movements: [430, 1000, 700, 50, 90],
32 |   interestRate: 1,
33 |   pin: 4444,
34 | };
35 | 
36 | const accounts = [account1, account2, account3, account4];
37 | 
38 | // Elements
39 | const labelWelcome = document.querySelector('.welcome');
40 | const labelDate = document.querySelector('.date');
41 | const labelBalance = document.querySelector('.balance__value');
42 | const labelSumIn = document.querySelector('.summary__value--in');
43 | const labelSumOut = document.querySelector('.summary__value--out');
44 | const labelSumInterest = document.querySelector('.summary__value--interest');
45 | const labelTimer = document.querySelector('.timer');
46 | 
47 | const containerApp = document.querySelector('.app');
48 | const containerMovements = document.querySelector('.movements');
49 | 
50 | const btnLogin = document.querySelector('.login__btn');
51 | const btnTransfer = document.querySelector('.form__btn--transfer');
52 | const btnLoan = document.querySelector('.form__btn--loan');
53 | const btnClose = document.querySelector('.form__btn--close');
54 | const btnSort = document.querySelector('.btn--sort');
55 | 
56 | const inputLoginUsername = document.querySelector('.login__input--user');
57 | const inputLoginPin = document.querySelector('.login__input--pin');
58 | const inputTransferTo = document.querySelector('.form__input--to');
59 | const inputTransferAmount = document.querySelector('.form__input--amount');
60 | const inputLoanAmount = document.querySelector('.form__input--loan-amount');
61 | const inputCloseUsername = document.querySelector('.form__input--user');
62 | const inputClosePin = document.querySelector('.form__input--pin');
63 | 
64 | /////////////////////////////////////////////////
65 | /////////////////////////////////////////////////
66 | // LECTURES
67 | 
68 | const currencies = new Map([
69 |   ['USD', 'United States dollar'],
70 |   ['NGN', 'Nigerian Naira'],
71 |   ['GBP', 'Pound sterling'],
72 | ]);
73 | 
74 | const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
75 | 
76 | /////////////////////////////////////////////////
77 | 


--------------------------------------------------------------------------------
/13-Arrays-Mobile Banking Website/starter/style.css:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: inherit;
  7 | }
  8 | 
  9 | html {
 10 |   font-size: 62.5%;
 11 |   box-sizing: border-box;
 12 | }
 13 | 
 14 | body {
 15 |   font-family: "Poppins", sans-serif;
 16 |   color: #444;
 17 |   background-color: #f3f3f3;
 18 |   height: 100vh;
 19 |   padding: 2rem;
 20 | }
 21 | 
 22 | nav {
 23 |   display: flex;
 24 |   justify-content: space-between;
 25 |   align-items: center;
 26 |   padding: 0 2rem;
 27 | }
 28 | 
 29 | .welcome {
 30 |   font-size: 1.9rem;
 31 |   font-weight: 500;
 32 | }
 33 | 
 34 | .logo {
 35 |   height: 5.25rem;
 36 | }
 37 | 
 38 | .login {
 39 |   display: flex;
 40 | }
 41 | 
 42 | .login__input {
 43 |   border: none;
 44 |   padding: 0.5rem 2rem;
 45 |   font-size: 1.6rem;
 46 |   font-family: inherit;
 47 |   text-align: center;
 48 |   width: 12rem;
 49 |   border-radius: 10rem;
 50 |   margin-right: 1rem;
 51 |   color: inherit;
 52 |   border: 1px solid #fff;
 53 |   transition: all 0.3s;
 54 | }
 55 | 
 56 | .login__input:focus {
 57 |   outline: none;
 58 |   border: 1px solid #ccc;
 59 | }
 60 | 
 61 | .login__input::placeholder {
 62 |   color: #bbb;
 63 | }
 64 | 
 65 | .login__btn {
 66 |   border: none;
 67 |   background: none;
 68 |   font-size: 2.2rem;
 69 |   color: inherit;
 70 |   cursor: pointer;
 71 |   transition: all 0.3s;
 72 | }
 73 | 
 74 | .login__btn:hover,
 75 | .login__btn:focus,
 76 | .btn--sort:hover,
 77 | .btn--sort:focus {
 78 |   outline: none;
 79 |   color: #777;
 80 | }
 81 | 
 82 | /* MAIN */
 83 | .app {
 84 |   position: relative;
 85 |   max-width: 100rem;
 86 |   margin: 4rem auto;
 87 |   display: grid;
 88 |   grid-template-columns: 4fr 3fr;
 89 |   grid-template-rows: auto repeat(3, 15rem) auto;
 90 |   gap: 2rem;
 91 | 
 92 |   /* NOTE This creates the fade in/out anumation */
 93 |   opacity: 0;
 94 |   transition: all 1s;
 95 | }
 96 | 
 97 | .balance {
 98 |   grid-column: 1 / span 2;
 99 |   display: flex;
100 |   align-items: flex-end;
101 |   justify-content: space-between;
102 |   margin-bottom: 2rem;
103 | }
104 | 
105 | .balance__label {
106 |   font-size: 2.2rem;
107 |   font-weight: 500;
108 |   margin-bottom: -0.2rem;
109 | }
110 | 
111 | .balance__date {
112 |   font-size: 1.4rem;
113 |   color: #888;
114 | }
115 | 
116 | .balance__value {
117 |   font-size: 4.5rem;
118 |   font-weight: 400;
119 | }
120 | 
121 | /* MOVEMENTS */
122 | .movements {
123 |   grid-row: 2 / span 3;
124 |   background-color: #fff;
125 |   border-radius: 1rem;
126 |   overflow: scroll;
127 | }
128 | 
129 | .movements__row {
130 |   padding: 2.25rem 4rem;
131 |   display: flex;
132 |   align-items: center;
133 |   border-bottom: 1px solid #eee;
134 | }
135 | 
136 | .movements__type {
137 |   font-size: 1.1rem;
138 |   text-transform: uppercase;
139 |   font-weight: 500;
140 |   color: #fff;
141 |   padding: 0.1rem 1rem;
142 |   border-radius: 10rem;
143 |   margin-right: 2rem;
144 | }
145 | 
146 | .movements__date {
147 |   font-size: 1.1rem;
148 |   text-transform: uppercase;
149 |   font-weight: 500;
150 |   color: #666;
151 | }
152 | 
153 | .movements__type--deposit {
154 |   background-image: linear-gradient(to top left, #39b385, #9be15d);
155 | }
156 | 
157 | .movements__type--withdrawal {
158 |   background-image: linear-gradient(to top left, #e52a5a, #ff585f);
159 | }
160 | 
161 | .movements__value {
162 |   font-size: 1.7rem;
163 |   margin-left: auto;
164 | }
165 | 
166 | /* SUMMARY */
167 | .summary {
168 |   grid-row: 5 / 6;
169 |   display: flex;
170 |   align-items: baseline;
171 |   padding: 0 0.3rem;
172 |   margin-top: 1rem;
173 | }
174 | 
175 | .summary__label {
176 |   font-size: 1.2rem;
177 |   font-weight: 500;
178 |   text-transform: uppercase;
179 |   margin-right: 0.8rem;
180 | }
181 | 
182 | .summary__value {
183 |   font-size: 2.2rem;
184 |   margin-right: 2.5rem;
185 | }
186 | 
187 | .summary__value--in,
188 | .summary__value--interest {
189 |   color: #66c873;
190 | }
191 | 
192 | .summary__value--out {
193 |   color: #f5465d;
194 | }
195 | 
196 | .btn--sort {
197 |   margin-left: auto;
198 |   border: none;
199 |   background: none;
200 |   font-size: 1.3rem;
201 |   font-weight: 500;
202 |   cursor: pointer;
203 | }
204 | 
205 | /* OPERATIONS */
206 | .operation {
207 |   border-radius: 1rem;
208 |   padding: 3rem 4rem;
209 |   color: #333;
210 | }
211 | 
212 | .operation--transfer {
213 |   background-image: linear-gradient(to top left, #ffb003, #ffcb03);
214 | }
215 | 
216 | .operation--loan {
217 |   background-image: linear-gradient(to top left, #39b385, #9be15d);
218 | }
219 | 
220 | .operation--close {
221 |   background-image: linear-gradient(to top left, #e52a5a, #ff585f);
222 | }
223 | 
224 | h2 {
225 |   margin-bottom: 1.5rem;
226 |   font-size: 1.7rem;
227 |   font-weight: 600;
228 |   color: #333;
229 | }
230 | 
231 | .form {
232 |   display: grid;
233 |   grid-template-columns: 2.5fr 2.5fr 1fr;
234 |   grid-template-rows: auto auto;
235 |   gap: 0.4rem 1rem;
236 | }
237 | 
238 | /* Exceptions for interst */
239 | .form.form--loan {
240 |   grid-template-columns: 2.5fr 1fr 2.5fr;
241 | }
242 | .form__label--loan {
243 |   grid-row: 2;
244 | }
245 | /* End exceptions */
246 | 
247 | .form__input {
248 |   width: 100%;
249 |   border: none;
250 |   background-color: rgba(255, 255, 255, 0.4);
251 |   font-family: inherit;
252 |   font-size: 1.5rem;
253 |   text-align: center;
254 |   color: #333;
255 |   padding: 0.3rem 1rem;
256 |   border-radius: 0.7rem;
257 |   transition: all 0.3s;
258 | }
259 | 
260 | .form__input:focus {
261 |   outline: none;
262 |   background-color: rgba(255, 255, 255, 0.6);
263 | }
264 | 
265 | .form__label {
266 |   font-size: 1.3rem;
267 |   text-align: center;
268 | }
269 | 
270 | .form__btn {
271 |   border: none;
272 |   border-radius: 0.7rem;
273 |   font-size: 1.8rem;
274 |   background-color: #fff;
275 |   cursor: pointer;
276 |   transition: all 0.3s;
277 | }
278 | 
279 | .form__btn:focus {
280 |   outline: none;
281 |   background-color: rgba(255, 255, 255, 0.8);
282 | }
283 | 
284 | .logout-timer {
285 |   padding: 0 0.3rem;
286 |   margin-top: 1.9rem;
287 |   text-align: right;
288 |   font-size: 1.25rem;
289 | }
290 | 
291 | .timer {
292 |   font-weight: 600;
293 | }
294 | 


--------------------------------------------------------------------------------
/14-Numbers-Dates-Timers-Mobile Banking Website/final/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/14-Numbers-Dates-Timers-Mobile Banking Website/final/Bankist-flowchart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/14-Numbers-Dates-Timers-Mobile Banking Website/final/Bankist-flowchart.png


--------------------------------------------------------------------------------
/14-Numbers-Dates-Timers-Mobile Banking Website/final/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/14-Numbers-Dates-Timers-Mobile Banking Website/final/icon.png


--------------------------------------------------------------------------------
/14-Numbers-Dates-Timers-Mobile Banking Website/final/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <link rel="shortcut icon" type="image/png" href="/icon.png" />
  8 | 
  9 |     <link
 10 |       href="https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap"
 11 |       rel="stylesheet"
 12 |     />
 13 | 
 14 |     <link rel="stylesheet" href="style.css" />
 15 |     <title>MOBILE BANKING WEBSITE</title>
 16 |   </head>
 17 |   <body>
 18 |     <!-- TOP NAVIGATION -->
 19 |     <nav>
 20 |       <p class="welcome">Log in to get started</p>
 21 |       <img src="logo.png" alt="Logo" class="logo" />
 22 |       <form class="login">
 23 |         <input
 24 |           type="text"
 25 |           placeholder="user"
 26 |           class="login__input login__input--user"
 27 |         />
 28 |         <!-- In practice, use type="password" -->
 29 |         <input
 30 |           type="text"
 31 |           placeholder="PIN"
 32 |           maxlength="4"
 33 |           class="login__input login__input--pin"
 34 |         />
 35 |         <button class="login__btn">&rarr;</button>
 36 |       </form>
 37 |     </nav>
 38 | 
 39 |     <main class="app">
 40 |       <!-- BALANCE -->
 41 |       <div class="balance">
 42 |         <div>
 43 |           <p class="balance__label">Current balance</p>
 44 |           <p class="balance__date">
 45 |             As of <span class="date">11/11/2030</span>
 46 |           </p>
 47 |         </div>
 48 |         <p class="balance__value">0000 &#8358</p>
 49 |       </div>
 50 | 
 51 |       <!-- MOVEMENTS -->
 52 |       <div class="movements">
 53 |         <div class="movements__row">
 54 |           <div class="movements__type movements__type--deposit">2 deposit</div>
 55 |           <div class="movements__date">3 days ago</div>
 56 |           <div class="movements__value">4 000 &#8358</div>
 57 |         </div>
 58 |         <div class="movements__row">
 59 |           <div class="movements__type movements__type--withdrawal">
 60 |             1 withdrawal
 61 |           </div>
 62 |           <div class="movements__date">24/01/2037</div>
 63 |           <div class="movements__value">-378 &#8358</div>
 64 |         </div>
 65 |       </div>
 66 | 
 67 |       <!-- SUMMARY -->
 68 |       <div class="summary">
 69 |         <p class="summary__label">In</p>
 70 |         <p class="summary__value summary__value--in">0000 &#8358</p>
 71 |         <p class="summary__label">Out</p>
 72 |         <p class="summary__value summary__value--out">0000 &#8358</p>
 73 |         <p class="summary__label">Interest</p>
 74 |         <p class="summary__value summary__value--interest">0000 &#8358</p>
 75 |         <button class="btn--sort">&downarrow; SORT</button>
 76 |       </div>
 77 | 
 78 |       <!-- OPERATION: TRANSFERS -->
 79 |       <div class="operation operation--transfer">
 80 |         <h2>Transfer money</h2>
 81 |         <form class="form form--transfer">
 82 |           <input type="text" class="form__input form__input--to" />
 83 |           <input type="number" class="form__input form__input--amount" />
 84 |           <button class="form__btn form__btn--transfer">&rarr;</button>
 85 |           <label class="form__label">Transfer to</label>
 86 |           <label clasos="form__label">Amount</label>
 87 |         </form>
 88 |       </div>
 89 | 
 90 |       <!-- OPERATION: LOAN -->
 91 |       <div class="operation operation--loan">
 92 |         <h2>Request loan</h2>
 93 |         <form class="form form--loan">
 94 |           <input type="number" class="form__input form__input--loan-amount" />
 95 |           <button class="form__btn form__btn--loan">&rarr;</button>
 96 |           <label class="form__label form__label--loan">Amount</label>
 97 |         </form>
 98 |       </div>
 99 | 
100 |       <!-- OPERATION: CLOSE -->
101 |       <div class="operation operation--close">
102 |         <h2>Close account</h2>
103 |         <form class="form form--close">
104 |           <input type="text" class="form__input form__input--user" />
105 |           <input
106 |             type="password"
107 |             maxlength="6"
108 |             class="form__input form__input--pin"
109 |           />
110 |           <button class="form__btn form__btn--close">&rarr;</button>
111 |           <label class="form__label">Confirm user</label>
112 |           <label class="form__label">Confirm PIN</label>
113 |         </form>
114 |       </div>
115 | 
116 |       <!-- LOGOUT TIMER -->
117 |       <p class="logout-timer">
118 |         You will be logged out in <span class="timer">05:00</span>
119 |       </p>
120 |     </main>
121 | 
122 |     <script src="script.js"></script>
123 |   </body>
124 | </html>
125 | 


--------------------------------------------------------------------------------
/14-Numbers-Dates-Timers-Mobile Banking Website/final/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/14-Numbers-Dates-Timers-Mobile Banking Website/final/logo.png


--------------------------------------------------------------------------------
/14-Numbers-Dates-Timers-Mobile Banking Website/final/style.css:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: inherit;
  7 | }
  8 | 
  9 | html {
 10 |   font-size: 62.5%;
 11 |   box-sizing: border-box;
 12 | }
 13 | 
 14 | body {
 15 |   font-family: "Poppins", sans-serif;
 16 |   color: #444;
 17 |   background-color: #f3f3f3;
 18 |   height: 100vh;
 19 |   padding: 2rem;
 20 | }
 21 | 
 22 | nav {
 23 |   display: flex;
 24 |   justify-content: space-between;
 25 |   align-items: center;
 26 |   padding: 0 2rem;
 27 | 
 28 | }
 29 | 
 30 | .welcome {
 31 |   font-size: 1.9rem;
 32 |   font-weight: 500;
 33 | }
 34 | 
 35 | .logo {
 36 |   height: 5.25rem;
 37 | }
 38 | 
 39 | .login {
 40 |   display: flex;
 41 | }
 42 | 
 43 | .login__input {
 44 |   border: none;
 45 |   padding: 0.5rem 2rem;
 46 |   font-size: 1.6rem;
 47 |   font-family: inherit;
 48 |   text-align: center;
 49 |   width: 12rem;
 50 |   border-radius: 10rem;
 51 |   margin-right: 1rem;
 52 |   color: inherit;
 53 |   border: 1px solid #fff;
 54 |   transition: all 0.3s;
 55 | }
 56 | 
 57 | .login__input:focus {
 58 |   outline: none;
 59 |   border: 1px solid #ccc;
 60 | }
 61 | 
 62 | .login__input::placeholder {
 63 |   color: #bbb;
 64 | }
 65 | 
 66 | .login__btn {
 67 |   border: none;
 68 |   background: none;
 69 |   font-size: 2.2rem;
 70 |   color: inherit;
 71 |   cursor: pointer;
 72 |   transition: all 0.3s;
 73 | }
 74 | 
 75 | .login__btn:hover,
 76 | .login__btn:focus,
 77 | .btn--sort:hover,
 78 | .btn--sort:focus {
 79 |   outline: none;
 80 |   color: #777;
 81 | }
 82 | 
 83 | /* MAIN */
 84 | .app {
 85 |   position: relative;
 86 |   max-width: 100rem;
 87 |   margin: 4rem auto;
 88 |   display: grid;
 89 |   grid-template-columns: 4fr 3fr;
 90 |   grid-template-rows: auto repeat(3, 15rem) auto;
 91 |   gap: 2rem;
 92 |  
 93 | 
 94 |   /* NOTE This creates the fade in/out anumation */
 95 |   opacity: 0;
 96 |   transition: all 1s;
 97 | }
 98 | 
 99 | .balance {
100 |   grid-column: 1 / span 2;
101 |   display: flex;
102 |   align-items: flex-end;
103 |   justify-content: space-between;
104 |   margin-bottom: 2rem;
105 | 
106 | }
107 | 
108 | .balance__label {
109 |   font-size: 2.2rem;
110 |   font-weight: 500;
111 |   margin-bottom: -0.2rem;
112 | }
113 | 
114 | .balance__date {
115 |   font-size: 1.4rem;
116 |   color: #888;
117 | }
118 | 
119 | .balance__value {
120 |   font-size: 4.5rem;
121 |   font-weight: 400;
122 |   /* border: 2px solid red; */
123 | }
124 | 
125 | /* MOVEMENTS */
126 | .movements {
127 |   grid-row: 2 / span 3;
128 |   background-color: #fff;
129 |   border-radius: 1rem;
130 |   overflow: scroll;
131 | 
132 | }
133 | 
134 | .movements__row {
135 |   padding: 2.25rem 4rem;
136 |   display: flex;
137 |   align-items: center;
138 |   border-bottom: 1px solid #eee;
139 | 
140 | }
141 | 
142 | .movements__type {
143 |   font-size: 1.1rem;
144 |   text-transform: uppercase;
145 |   font-weight: 500;
146 |   color: #fff;
147 |   padding: 0.1rem 1rem;
148 |   border-radius: 10rem;
149 |   margin-right: 2rem;
150 | }
151 | 
152 | .movements__date {
153 |   font-size: 1.1rem;
154 |   text-transform: uppercase;
155 |   font-weight: 500;
156 |   color: #666;
157 | }
158 | 
159 | .movements__type--deposit {
160 |   background-image: linear-gradient(to top left, #39b385, #9be15d);
161 | }
162 | 
163 | .movements__type--withdrawal {
164 |   background-image: linear-gradient(to top left, #e52a5a, #ff585f);
165 | }
166 | 
167 | .movements__value {
168 |   font-size: 1.7rem;
169 |   margin-left: auto;
170 | }
171 | 
172 | /* SUMMARY */
173 | .summary {
174 |   grid-row: 5 / 6;
175 |   display: flex;
176 |   align-items: baseline;
177 |   padding: 0 0.3rem;
178 |   margin-top: 1rem;
179 | }
180 | 
181 | .summary__label {
182 |   font-size: 1.2rem;
183 |   font-weight: 500;
184 |   text-transform: uppercase;
185 |   margin-right: 0.8rem;
186 | }
187 | 
188 | .summary__value {
189 |   font-size: 2.2rem;
190 |   margin-right: 2.5rem;
191 | }
192 | 
193 | .summary__value--in,
194 | .summary__value--interest {
195 |   color: #66c873;
196 | }
197 | 
198 | .summary__value--out {
199 |   color: #f5465d;
200 | }
201 | 
202 | .btn--sort {
203 |   margin-left: auto;
204 |   border: none;
205 |   background: none;
206 |   font-size: 1.3rem;
207 |   font-weight: 500;
208 |   cursor: pointer;
209 | }
210 | 
211 | /* OPERATIONS */
212 | .operation {
213 |   border-radius: 1rem;
214 |   padding: 3rem 4rem;
215 |   color: #333;
216 | }
217 | 
218 | .operation--transfer {
219 |   background-image: linear-gradient(to top left, #ffb003, #ffcb03);
220 | }
221 | 
222 | .operation--loan {
223 |   background-image: linear-gradient(to top left, #39b385, #9be15d);
224 | }
225 | 
226 | .operation--close {
227 |   background-image: linear-gradient(to top left, #e52a5a, #ff585f);
228 | }
229 | 
230 | h2 {
231 |   margin-bottom: 1.5rem;
232 |   font-size: 1.7rem;
233 |   font-weight: 600;
234 |   color: #333;
235 | }
236 | 
237 | .form {
238 |   display: grid;
239 |   grid-template-columns: 2.5fr 2.5fr 1fr;
240 |   grid-template-rows: auto auto;
241 |   gap: 0.4rem 1rem;
242 | }
243 | 
244 | /* Exceptions for interst */
245 | .form.form--loan {
246 |   grid-template-columns: 2.5fr 1fr 2.5fr;
247 | }
248 | .form__label--loan {
249 |   grid-row: 2;
250 | }
251 | /* End exceptions */
252 | 
253 | .form__input {
254 |   width: 100%;
255 |   border: none;
256 |   background-color: rgba(255, 255, 255, 0.4);
257 |   font-family: inherit;
258 |   font-size: 1.5rem;
259 |   text-align: center;
260 |   color: #333;
261 |   padding: 0.3rem 1rem;
262 |   border-radius: 0.7rem;
263 |   transition: all 0.3s;
264 | }
265 | 
266 | .form__input:focus {
267 |   outline: none;
268 |   background-color: rgba(255, 255, 255, 0.6);
269 | }
270 | 
271 | .form__label {
272 |   font-size: 1.3rem;
273 |   text-align: center;
274 | }
275 | 
276 | .form__btn {
277 |   border: none;
278 |   border-radius: 0.7rem;
279 |   font-size: 1.8rem;
280 |   background-color: #fff;
281 |   cursor: pointer;
282 |   transition: all 0.3s;
283 | }
284 | 
285 | .form__btn:focus {
286 |   outline: none;
287 |   background-color: rgba(255, 255, 255, 0.8);
288 | }
289 | 
290 | .logout-timer {
291 |   padding: 0 0.3rem;
292 |   margin-top: 1.9rem;
293 |   text-align: right;
294 |   font-size: 1.25rem;
295 | }
296 | 
297 | .timer {
298 |   font-weight: 600;
299 | }
300 | 


--------------------------------------------------------------------------------
/14-Numbers-Dates-Timers-Mobile Banking Website/starter/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/14-Numbers-Dates-Timers-Mobile Banking Website/starter/Bankist-flowchart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/14-Numbers-Dates-Timers-Mobile Banking Website/starter/Bankist-flowchart.png


--------------------------------------------------------------------------------
/14-Numbers-Dates-Timers-Mobile Banking Website/starter/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/14-Numbers-Dates-Timers-Mobile Banking Website/starter/icon.png


--------------------------------------------------------------------------------
/14-Numbers-Dates-Timers-Mobile Banking Website/starter/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <link rel="shortcut icon" type="image/png" href="/icon.png" />
  8 | 
  9 |     <link
 10 |       href="https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap"
 11 |       rel="stylesheet"
 12 |     />
 13 | 
 14 |     <link rel="stylesheet" href="style.css" />
 15 |     <title>MOBILE BANKING WEBSITE</title>
 16 |   </head>
 17 |   <body>
 18 |     <!-- TOP NAVIGATION -->
 19 |     <nav>
 20 |       <p class="welcome">Log in to get started</p>
 21 |       <img src="logo.png" alt="Logo" class="logo" />
 22 |       <form class="login">
 23 |         <input
 24 |           type="text"
 25 |           placeholder="user"
 26 |           class="login__input login__input--user"
 27 |         />
 28 |         <!-- In practice, use type="password" -->
 29 |         <input
 30 |           type="text"
 31 |           placeholder="PIN"
 32 |           maxlength="4"
 33 |           class="login__input login__input--pin"
 34 |         />
 35 |         <button class="login__btn">&rarr;</button>
 36 |       </form>
 37 |     </nav>
 38 | 
 39 |     <main class="app">
 40 |       <!-- BALANCE -->
 41 |       <div class="balance">
 42 |         <div>
 43 |           <p class="balance__label">Current balance</p>
 44 |           <p class="balance__date">
 45 |             As of <span class="date">11/11/2030</span>
 46 |           </p>
 47 |         </div>
 48 |         <p class="balance__value">0000 &#8358</p>
 49 |       </div>
 50 | 
 51 |       <!-- MOVEMENTS -->
 52 |       <div class="movements">
 53 |         <div class="movements__row">
 54 |           <div class="movements__type movements__type--deposit">2 deposit</div>
 55 |           <div class="movements__date">3 days ago</div>
 56 |           <div class="movements__value">4 000 &#8358</div>
 57 |         </div>
 58 |         <div class="movements__row">
 59 |           <div class="movements__type movements__type--withdrawal">
 60 |             1 withdrawal
 61 |           </div>
 62 |           <div class="movements__date">24/01/2037</div>
 63 |           <div class="movements__value">-378 &#8358</div>
 64 |         </div>
 65 |       </div>
 66 | 
 67 |       <!-- SUMMARY -->
 68 |       <div class="summary">
 69 |         <p class="summary__label">In</p>
 70 |         <p class="summary__value summary__value--in">0000 &#8358</p>
 71 |         <p class="summary__label">Out</p>
 72 |         <p class="summary__value summary__value--out">0000 &#8358</p>
 73 |         <p class="summary__label">Interest</p>
 74 |         <p class="summary__value summary__value--interest">0000 &#8358</p>
 75 |         <button class="btn--sort">&downarrow; SORT</button>
 76 |       </div>
 77 | 
 78 |       <!-- OPERATION: TRANSFERS -->
 79 |       <div class="operation operation--transfer">
 80 |         <h2>Transfer money</h2>
 81 |         <form class="form form--transfer">
 82 |           <input type="text" class="form__input form__input--to" />
 83 |           <input type="number" class="form__input form__input--amount" />
 84 |           <button class="form__btn form__btn--transfer">&rarr;</button>
 85 |           <label class="form__label">Transfer to</label>
 86 |           <label class="form__label">Amount</label>
 87 |         </form>
 88 |       </div>
 89 | 
 90 |       <!-- OPERATION: LOAN -->
 91 |       <div class="operation operation--loan">
 92 |         <h2>Request loan</h2>
 93 |         <form class="form form--loan">
 94 |           <input type="number" class="form__input form__input--loan-amount" />
 95 |           <button class="form__btn form__btn--loan">&rarr;</button>
 96 |           <label class="form__label form__label--loan">Amount</label>
 97 |         </form>
 98 |       </div>
 99 | 
100 |       <!-- OPERATION: CLOSE -->
101 |       <div class="operation operation--close">
102 |         <h2>Close account</h2>
103 |         <form class="form form--close">
104 |           <input type="text" class="form__input form__input--user" />
105 |           <input
106 |             type="password"
107 |             maxlength="6"
108 |             class="form__input form__input--pin"
109 |           />
110 |           <button class="form__btn form__btn--close">&rarr;</button>
111 |           <label class="form__label">Confirm user</label>
112 |           <label class="form__label">Confirm PIN</label>
113 |         </form>
114 |       </div>
115 | 
116 |       <!-- LOGOUT TIMER -->
117 |       <p class="logout-timer">
118 |         You will be logged out in <span class="timer">05:00</span>
119 |       </p>
120 |     </main>
121 | 
122 |     <script src="script.js"></script>
123 |   </body>
124 | </html>
125 | 


--------------------------------------------------------------------------------
/14-Numbers-Dates-Timers-Mobile Banking Website/starter/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/14-Numbers-Dates-Timers-Mobile Banking Website/starter/logo.png


--------------------------------------------------------------------------------
/14-Numbers-Dates-Timers-Mobile Banking Website/starter/script.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | /////////////////////////////////////////////////
  3 | /////////////////////////////////////////////////
  4 | // MOBILE BANKING WEBSITE
  5 | 
  6 | // Data
  7 | const account1 = {
  8 |   owner: 'Ayobami Owoeye',
  9 |   movements: [200, 450, -400, 3000, -650, -130, 70, 1300],
 10 |   interestRate: 1.2, // %
 11 |   pin: 1111,
 12 | };
 13 | 
 14 | const account2 = {
 15 |   owner: 'Chima Francis',
 16 |   movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],
 17 |   interestRate: 1.5,
 18 |   pin: 2222,
 19 | };
 20 | 
 21 | const account3 = {
 22 |   owner: 'Esther Ojile',
 23 |   movements: [200, -200, 340, -300, -20, 50, 400, -460],
 24 |   interestRate: 0.7,
 25 |   pin: 3333,
 26 | };
 27 | 
 28 | const account4 = {
 29 |   owner: 'Helen Nneka',
 30 |   movements: [430, 1000, 700, 50, 90],
 31 |   interestRate: 1,
 32 |   pin: 4444,
 33 | };
 34 | const account5 = {
 35 |   owner: 'Afo Charles',
 36 |   movements: [100, 1000, 900, 50, 90],
 37 |   interestRate: 1,
 38 |   pin: 5555,
 39 | };
 40 | 
 41 | const accounts = [account1, account2, account3, account4, account5];
 42 | 
 43 | // Elements
 44 | const labelWelcome = document.querySelector('.welcome');
 45 | const labelDate = document.querySelector('.date');
 46 | const labelBalance = document.querySelector('.balance__value');
 47 | const labelSumIn = document.querySelector('.summary__value--in');
 48 | const labelSumOut = document.querySelector('.summary__value--out');
 49 | const labelSumInterest = document.querySelector('.summary__value--interest');
 50 | const labelTimer = document.querySelector('.timer');
 51 | 
 52 | const containerApp = document.querySelector('.app');
 53 | const containerMovements = document.querySelector('.movements');
 54 | 
 55 | const btnLogin = document.querySelector('.login__btn');
 56 | const btnTransfer = document.querySelector('.form__btn--transfer');
 57 | const btnLoan = document.querySelector('.form__btn--loan');
 58 | const btnClose = document.querySelector('.form__btn--close');
 59 | const btnSort = document.querySelector('.btn--sort');
 60 | 
 61 | const inputLoginUsername = document.querySelector('.login__input--user');
 62 | const inputLoginPin = document.querySelector('.login__input--pin');
 63 | const inputTransferTo = document.querySelector('.form__input--to');
 64 | const inputTransferAmount = document.querySelector('.form__input--amount');
 65 | const inputLoanAmount = document.querySelector('.form__input--loan-amount');
 66 | const inputCloseUsername = document.querySelector('.form__input--user');
 67 | const inputClosePin = document.querySelector('.form__input--pin');
 68 | 
 69 | //DISPLAYING MOVEMENT
 70 | const displayMovement = function (movements, sort = false) {
 71 |   containerMovements.innerHTML = '';
 72 |   const sortedMovements = sort
 73 |     ? movements.slice().sort((a, b) => b - a)
 74 |     : movements;
 75 | 
 76 |   sortedMovements.forEach(function (movement, index) {
 77 |     const typeofMov = movement < 0 ? 'withdrawal' : 'deposit';
 78 |     const htmlElement = `<div class="movements__row">
 79 |      <div class="movements__type movements__type--${typeofMov}">${
 80 |       index + 1
 81 |     } ${typeofMov}</div>
 82 |      <div class="movements__value">${movement} &#8358</div>
 83 |        </div>`;
 84 | 
 85 |     containerMovements.insertAdjacentHTML('afterbegin', htmlElement);
 86 |   });
 87 | };
 88 | 
 89 | //COMPUTING USERNAME
 90 | const createUserName = function (userAccounts) {
 91 |   userAccounts.forEach(function (userAccount) {
 92 |     userAccount.userName = userAccount.owner
 93 |       .toLowerCase()
 94 |       .split(' ')
 95 |       .map(name => name[0])
 96 |       .join('');
 97 |   });
 98 | };
 99 | createUserName(accounts);
100 | //DISPLAYING BALANCE
101 | const displayBalance = function (account) {
102 |   account.balance = account.movements.reduce(
103 |     (acc, move, index, arr) => acc + move,
104 |     0
105 |   );
106 |   labelBalance.textContent = `${account.balance} NGN`;
107 | };
108 | //COMPUTING TRANSACTION SUMMARY
109 | const computeSummary = function (account) {
110 |   const income = account.movements
111 |     .filter(move => move > 0)
112 |     .reduce((acc, move) => acc + move, 0);
113 |   labelSumIn.textContent = `${income} NGN`;
114 |   const withdrawals = account.movements
115 |     .filter(move => move < 0)
116 |     .reduce((acc, move) => acc + move, 0);
117 |   labelSumOut.textContent = `${Math.abs(withdrawals)} NGN`;
118 |   const interest = account.movements
119 |     .filter(move => move > 0)
120 |     .map(deposit => (deposit * account.interestRate) / 100)
121 |     .filter(move => move >= 1)
122 |     .reduce((acc, mov, i, arr) => {
123 |       return acc + mov;
124 |     }, 0);
125 |   labelSumInterest.textContent = `${interest} NGN`;
126 | };
127 | //UPDATING UI
128 | const updateUI = function () {
129 |   displayMovement(currentAccount.movements);
130 |   displayBalance(currentAccount);
131 |   computeSummary(currentAccount);
132 | };
133 | 
134 | //IMPLEMENTING LOGIN
135 | let currentAccount;
136 | btnLogin.addEventListener('click', function (e) {
137 |   e.preventDefault();
138 |   currentAccount = accounts.find(
139 |     account => inputLoginUsername.value === account.userName
140 |   );
141 |   if (currentAccount?.pin === Number(inputLoginPin.value)) {
142 |     //DISPLAY UI AND WELCOME MESSAGE
143 |     labelWelcome.textContent = `Welcome ${currentAccount.owner.split(' ')[0]}`;
144 |     containerApp.style.opacity = 1;
145 |   }
146 |   inputLoginPin.value = '';
147 |   inputLoginUsername.value = '';
148 |   updateUI();
149 | });
150 | 
151 | //IMPLEMENTING TRANSFER
152 | btnTransfer.addEventListener('click', function (e) {
153 |   e.preventDefault();
154 |   const amount = Number(inputTransferAmount.value);
155 |   const recepientAcc = accounts.find(
156 |     account => inputTransferTo.value === account.userName
157 |   );
158 |   if (
159 |     amount > 0 &&
160 |     recepientAcc &&
161 |     currentAccount.balance >= amount &&
162 |     currentAccount.userName !== recepientAcc.userName
163 |   ) {
164 |     currentAccount.movements.push(-amount);
165 |     recepientAcc.movements.push(amount);
166 |   }
167 |   inputTransferAmount.value = '';
168 |   inputTransferTo.value = '';
169 |   updateUI();
170 | });
171 | 
172 | btnLoan.addEventListener('click', function (e) {
173 |   e.preventDefault();
174 |   const amount = Number(inputLoanAmount.value);
175 |   if (amount > 0 && currentAccount.movements.some(mov => mov >= amount * 0.1)) {
176 |     currentAccount.movements.push(amount);
177 |     updateUI();
178 |     inputLoanAmount.value = '';
179 |   }
180 | });
181 | 
182 | btnClose.addEventListener('click', function (e) {
183 |   e.preventDefault();
184 |   if (
185 |     currentAccount.userName === inputCloseUsername.value &&
186 |     currentAccount.pin === Number(inputClosePin.value)
187 |   ) {
188 |     const index = accounts.findIndex(
189 |       account => account.userName === currentAccount.userName
190 |     );
191 |     accounts.splice(index, 1);
192 |     containerApp.style.opacity = 0;
193 |     inputCloseUsername.value = '';
194 |     inputClosePin.value = '';
195 |   }
196 | });
197 | let sorted = false;
198 | btnSort.addEventListener('click', function (e) {
199 |   e.preventDefault();
200 |   displayMovement(currentAccount.movements, !sorted);
201 |   sorted = !sorted;
202 | });
203 | 
204 | /////////////////////////////////////////////////
205 | /////////////////////////////////////////////////
206 | // LECTURES
207 | 


--------------------------------------------------------------------------------
/14-Numbers-Dates-Timers-Mobile Banking Website/starter/style.css:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: inherit;
  7 | }
  8 | 
  9 | html {
 10 |   font-size: 62.5%;
 11 |   box-sizing: border-box;
 12 | }
 13 | 
 14 | body {
 15 |   font-family: "Poppins", sans-serif;
 16 |   color: #444;
 17 |   background-color: #f3f3f3;
 18 |   height: 100vh;
 19 |   padding: 2rem;
 20 | }
 21 | 
 22 | nav {
 23 |   display: flex;
 24 |   justify-content: space-between;
 25 |   align-items: center;
 26 |   padding: 0 2rem;
 27 | }
 28 | 
 29 | .welcome {
 30 |   font-size: 1.9rem;
 31 |   font-weight: 500;
 32 | }
 33 | 
 34 | .logo {
 35 |   height: 5.25rem;
 36 | }
 37 | 
 38 | .login {
 39 |   display: flex;
 40 | }
 41 | 
 42 | .login__input {
 43 |   border: none;
 44 |   padding: 0.5rem 2rem;
 45 |   font-size: 1.6rem;
 46 |   font-family: inherit;
 47 |   text-align: center;
 48 |   width: 12rem;
 49 |   border-radius: 10rem;
 50 |   margin-right: 1rem;
 51 |   color: inherit;
 52 |   border: 1px solid #fff;
 53 |   transition: all 0.3s;
 54 | }
 55 | 
 56 | .login__input:focus {
 57 |   outline: none;
 58 |   border: 1px solid #ccc;
 59 | }
 60 | 
 61 | .login__input::placeholder {
 62 |   color: #bbb;
 63 | }
 64 | 
 65 | .login__btn {
 66 |   border: none;
 67 |   background: none;
 68 |   font-size: 2.2rem;
 69 |   color: inherit;
 70 |   cursor: pointer;
 71 |   transition: all 0.3s;
 72 | }
 73 | 
 74 | .login__btn:hover,
 75 | .login__btn:focus,
 76 | .btn--sort:hover,
 77 | .btn--sort:focus {
 78 |   outline: none;
 79 |   color: #777;
 80 | }
 81 | 
 82 | /* MAIN */
 83 | .app {
 84 |   position: relative;
 85 |   max-width: 100rem;
 86 |   margin: 4rem auto;
 87 |   display: grid;
 88 |   grid-template-columns: 4fr 3fr;
 89 |   grid-template-rows: auto repeat(3, 15rem) auto;
 90 |   gap: 2rem;
 91 | 
 92 |   /* NOTE This creates the fade in/out anumation */
 93 |   opacity: 0;
 94 |   transition: all 1s;
 95 | }
 96 | 
 97 | .balance {
 98 |   grid-column: 1 / span 2;
 99 |   display: flex;
100 |   align-items: flex-end;
101 |   justify-content: space-between;
102 |   margin-bottom: 2rem;
103 | }
104 | 
105 | .balance__label {
106 |   font-size: 2.2rem;
107 |   font-weight: 500;
108 |   margin-bottom: -0.2rem;
109 | }
110 | 
111 | .balance__date {
112 |   font-size: 1.4rem;
113 |   color: #888;
114 | }
115 | 
116 | .balance__value {
117 |   font-size: 4.5rem;
118 |   font-weight: 400;
119 | }
120 | 
121 | /* MOVEMENTS */
122 | .movements {
123 |   grid-row: 2 / span 3;
124 |   background-color: #fff;
125 |   border-radius: 1rem;
126 |   overflow: scroll;
127 | }
128 | 
129 | .movements__row {
130 |   padding: 2.25rem 4rem;
131 |   display: flex;
132 |   align-items: center;
133 |   border-bottom: 1px solid #eee;
134 | }
135 | 
136 | .movements__type {
137 |   font-size: 1.1rem;
138 |   text-transform: uppercase;
139 |   font-weight: 500;
140 |   color: #fff;
141 |   padding: 0.1rem 1rem;
142 |   border-radius: 10rem;
143 |   margin-right: 2rem;
144 | }
145 | 
146 | .movements__date {
147 |   font-size: 1.1rem;
148 |   text-transform: uppercase;
149 |   font-weight: 500;
150 |   color: #666;
151 | }
152 | 
153 | .movements__type--deposit {
154 |   background-image: linear-gradient(to top left, #39b385, #9be15d);
155 | }
156 | 
157 | .movements__type--withdrawal {
158 |   background-image: linear-gradient(to top left, #e52a5a, #ff585f);
159 | }
160 | 
161 | .movements__value {
162 |   font-size: 1.7rem;
163 |   margin-left: auto;
164 | }
165 | 
166 | /* SUMMARY */
167 | .summary {
168 |   grid-row: 5 / 6;
169 |   display: flex;
170 |   align-items: baseline;
171 |   padding: 0 0.3rem;
172 |   margin-top: 1rem;
173 | }
174 | 
175 | .summary__label {
176 |   font-size: 1.2rem;
177 |   font-weight: 500;
178 |   text-transform: uppercase;
179 |   margin-right: 0.8rem;
180 | }
181 | 
182 | .summary__value {
183 |   font-size: 2.2rem;
184 |   margin-right: 2.5rem;
185 | }
186 | 
187 | .summary__value--in,
188 | .summary__value--interest {
189 |   color: #66c873;
190 | }
191 | 
192 | .summary__value--out {
193 |   color: #f5465d;
194 | }
195 | 
196 | .btn--sort {
197 |   margin-left: auto;
198 |   border: none;
199 |   background: none;
200 |   font-size: 1.3rem;
201 |   font-weight: 500;
202 |   cursor: pointer;
203 | }
204 | 
205 | /* OPERATIONS */
206 | .operation {
207 |   border-radius: 1rem;
208 |   padding: 3rem 4rem;
209 |   color: #333;
210 | }
211 | 
212 | .operation--transfer {
213 |   background-image: linear-gradient(to top left, #ffb003, #ffcb03);
214 | }
215 | 
216 | .operation--loan {
217 |   background-image: linear-gradient(to top left, #39b385, #9be15d);
218 | }
219 | 
220 | .operation--close {
221 |   background-image: linear-gradient(to top left, #e52a5a, #ff585f);
222 | }
223 | 
224 | h2 {
225 |   margin-bottom: 1.5rem;
226 |   font-size: 1.7rem;
227 |   font-weight: 600;
228 |   color: #333;
229 | }
230 | 
231 | .form {
232 |   display: grid;
233 |   grid-template-columns: 2.5fr 2.5fr 1fr;
234 |   grid-template-rows: auto auto;
235 |   gap: 0.4rem 1rem;
236 | }
237 | 
238 | /* Exceptions for interst */
239 | .form.form--loan {
240 |   grid-template-columns: 2.5fr 1fr 2.5fr;
241 | }
242 | .form__label--loan {
243 |   grid-row: 2;
244 | }
245 | /* End exceptions */
246 | 
247 | .form__input {
248 |   width: 100%;
249 |   border: none;
250 |   background-color: rgba(255, 255, 255, 0.4);
251 |   font-family: inherit;
252 |   font-size: 1.5rem;
253 |   text-align: center;
254 |   color: #333;
255 |   padding: 0.3rem 1rem;
256 |   border-radius: 0.7rem;
257 |   transition: all 0.3s;
258 | }
259 | 
260 | .form__input:focus {
261 |   outline: none;
262 |   background-color: rgba(255, 255, 255, 0.6);
263 | }
264 | 
265 | .form__label {
266 |   font-size: 1.3rem;
267 |   text-align: center;
268 | }
269 | 
270 | .form__btn {
271 |   border: none;
272 |   border-radius: 0.7rem;
273 |   font-size: 1.8rem;
274 |   background-color: #fff;
275 |   cursor: pointer;
276 |   transition: all 0.3s;
277 | }
278 | 
279 | .form__btn:focus {
280 |   outline: none;
281 |   background-color: rgba(255, 255, 255, 0.8);
282 | }
283 | 
284 | .logout-timer {
285 |   padding: 0 0.3rem;
286 |   margin-top: 1.9rem;
287 |   text-align: right;
288 |   font-size: 1.25rem;
289 | }
290 | 
291 | .timer {
292 |   font-weight: 600;
293 | }
294 | 


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/Thumbs.db


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/card-lazy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/card-lazy.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/card.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/card.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/digital-lazy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/digital-lazy.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/digital.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/digital.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/grow-lazy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/grow-lazy.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/grow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/grow.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/hero.png


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/icon.png


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/img-1.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/img-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/img-2.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/img-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/img-3.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/img-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/img-4.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/logo.png


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/user-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/user-1.png


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/user-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/user-2.png


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/img/user-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/final/img/user-3.png


--------------------------------------------------------------------------------
/15-Advanced-DOM/final/script.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | const btnScrollTo = document.querySelector('.btn--scroll-to');
  3 | const modal = document.querySelector('.modal');
  4 | const overlay = document.querySelector('.overlay');
  5 | const btnCloseModal = document.querySelector('.btn--close-modal');
  6 | const btnsOpenModal = document.querySelectorAll('.btn--show-modal');
  7 | const nav = document.querySelector('nav');
  8 | const header = document.querySelector('.header');
  9 | const allSections = document.querySelectorAll('.section');
 10 | const imageTargets = document.querySelectorAll('img[data-src]');
 11 | const slider = document.querySelector('.slider');
 12 | const slides = document.querySelectorAll('.slide');
 13 | const btnRight = document.querySelector('.slider__btn--right');
 14 | const btnLeft = document.querySelector('.slider__btn--left');
 15 | ///////////////////////////////////////
 16 | // Modal window
 17 | const openModal = function () {
 18 |   modal.classList.remove('hidden');
 19 |   overlay.classList.remove('hidden');
 20 | };
 21 | 
 22 | const closeModal = function () {
 23 |   modal.classList.add('hidden');
 24 |   overlay.classList.add('hidden');
 25 | };
 26 | 
 27 | btnsOpenModal.forEach(btns => {
 28 |   btns.addEventListener('click', openModal);
 29 |   btnCloseModal.addEventListener('click', closeModal);
 30 |   overlay.addEventListener('click', closeModal);
 31 | 
 32 |   document.addEventListener('keydown', function (e) {
 33 |     if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
 34 |       closeModal();
 35 |     }
 36 |   });
 37 | });
 38 | //IMPLEMENTING SMOOTH SCROLL
 39 | const section1 = document.querySelector('#section--1');
 40 | btnScrollTo.addEventListener('click', function () {
 41 |   section1.scrollIntoView({ behavior: 'smooth' });
 42 | });
 43 | //IMPLEMENTING PAGE NAVIGATION
 44 | // document.querySelectorAll('.nav__link').forEach(function (anchorEl) {
 45 | //   anchorEl.addEventListener('click', function (e) {
 46 | //     e.preventDefault()
 47 | //     const id = this.getAttribute("href")
 48 | //     console.log(id);
 49 | //     document.querySelector(id).scrollIntoView({behavior : "smooth"})
 50 | //   });
 51 | // });
 52 | document.querySelector('.nav__links').addEventListener('click', function (e) {
 53 |   e.preventDefault();
 54 |   if (e.target.classList.contains('nav__link')) {
 55 |     const id = e.target.getAttribute('href');
 56 |     document.querySelector(id).scrollIntoView({ behavior: 'smooth' });
 57 |   }
 58 | });
 59 | //IMPLEMENTING TABBED COMPONENT
 60 | const tabs = document.querySelectorAll('.operations__tab');
 61 | const tabsContainer = document.querySelector('.operations__tab-container');
 62 | const tabsContent = document.querySelectorAll('.operations__content');
 63 | tabsContainer.addEventListener('click', function (e) {
 64 |   if (e.target.classList.contains('operations__tab')) {
 65 |     tabs.forEach(el => {
 66 |       el.classList.remove('operations__tab--active');
 67 |     });
 68 |     tabsContent.forEach(el => {
 69 |       console.log(el);
 70 |       el.classList.remove('operations__content--active');
 71 |     });
 72 |     e.target.classList.add('operations__tab--active');
 73 |     // console.log(e.target.dataset.tab);
 74 |     document
 75 |       .querySelector(`.operations__content--${e.target.dataset.tab}`)
 76 |       .classList.add('operations__content--active');
 77 |     //
 78 |   }
 79 | });
 80 | 
 81 | //IMPLEMENTING THE FADE OUT FEATURE
 82 | const handleHover = function (e, opacity) {
 83 |   if (e.target.classList.contains('nav__link')) {
 84 |     console.log(e.target);
 85 |     const link = e.target;
 86 |     const siblings = link.closest('.nav').querySelectorAll('.nav__link');
 87 |     const logo = link.closest('.nav').querySelector('img');
 88 |     siblings.forEach(el => {
 89 |       if (link !== el) {
 90 |         el.style.opacity = opacity;
 91 |       }
 92 |       logo.style.opacity = opacity;
 93 |     });
 94 |   }
 95 | };
 96 | 
 97 | nav.addEventListener('mouseover', function (e) {
 98 |   handleHover(e, 0.5);
 99 | });
100 | nav.addEventListener('mouseout', function (e) {
101 |   handleHover(e, 1);
102 | });
103 | //IMPLEMENTING STICKY NAVIGATION
104 | const callBackFn = function (entries, observer) {
105 |   const [entry] = entries;
106 |   console.log(entry);
107 | };
108 | const observerOptions = {
109 |   root: null,
110 |   threshold: 0.2,
111 | };
112 | const observer = new IntersectionObserver(callBackFn, observerOptions);
113 | observer.observe(section1);
114 | const ObserverFn = function (entries, headerObserver) {
115 |   const [entry] = entries;
116 |   if (entry.isIntersecting === false) {
117 |     nav.classList.add('sticky');
118 |   } else {
119 |     nav.classList.remove('sticky');
120 |   }
121 | };
122 | const observerObj = {
123 |   root: null,
124 |   threshold: 0,
125 |   rootMargin: '-90px',
126 | };
127 | const headerObserver = new IntersectionObserver(ObserverFn, observerObj);
128 | headerObserver.observe(header);
129 | //IMPLEMENTING REVEALING SECTIONS
130 | const obsFn = function (entries, obsOpt) {
131 |   const [entry] = entries;
132 |   if (entry.isIntersecting) {
133 |     entry.target.classList.remove('section--hidden');
134 |   }
135 | };
136 | const obsOpt = {
137 |   root: null,
138 |   threshold: 0.15,
139 | };
140 | const observerSection = new IntersectionObserver(obsFn, obsOpt);
141 | allSections.forEach(section => {
142 |   section.classList.add('section--hidden');
143 |   observerSection.observe(section);
144 | });
145 | 
146 | //IMPLEMENTING LAZY LOADING IMAGES
147 | const loadingImg = function (entries, imgObserver) {
148 |   const [entry] = entries;
149 |   entry.target.src = entry.target.dataset.src;
150 |   entry.target.addEventListener('load', function () {
151 |     entry.target.classList.remove('lazy-img');
152 |   });
153 | };
154 | const imgObserver = new IntersectionObserver(loadingImg, {
155 |   root: null,
156 |   threshold: 0,
157 |   rootMargin: '200px',
158 | });
159 | imageTargets.forEach(img => {
160 |   imgObserver.observe(img);
161 | });
162 | //SLIDER
163 | let currentSlide = 0;
164 | const maxSlides = slides.length;
165 | 
166 | slides.forEach((slide, i) => {
167 |   slide.style.transform = `translateX(${100 * i}%)`;
168 | });
169 | slider.style.overflow = 'hidden';
170 | btnRight.addEventListener('click', function () {
171 |   if (currentSlide === maxSlides - 1) {
172 |     currentSlide = 0;
173 |   } else {
174 |     currentSlide++;
175 |   }
176 |   slides.forEach((slide, i) => {
177 |     slide.style.transform = `translateX(${100 * (i - currentSlide)}%)`;
178 |   });
179 | });
180 | btnLeft.addEventListener("click", function(){
181 |   if (currentSlide === 0) {
182 |     currentSlide = maxSlides - 1;
183 |   } else {
184 |     currentSlide--;
185 |   }
186 |   slides.forEach((slide, i) => {
187 |     slide.style.transform = `translateX(${100 * (i - currentSlide)}%)`;
188 |   });
189 | })
190 | 
191 | //SELECTING ELEMENTS
192 | // const section = document.querySelector('.section');
193 | // // const allSections = document.querySelectorAll(".section")
194 | // // console.log(section);
195 | // // console.log(allSections);
196 | // // const section1 = document.getElementById("section--1")
197 | // // console.log(section1);
198 | // // const navItems = document.getElementsByClassName("nav__item")
199 | // // console.log(navItems);
200 | // // const allButtons = document.getElementsByTagName("button");
201 | // // console.log(allButtons);
202 | // const header = document.querySelector('.header');
203 | 
204 | // //CREATING AND INSERTING ELEMENTS
205 | // //insertAdjacentHTML
206 | // const myDiv = document.createElement('div');
207 | // // header.append(myDiv.cloneNode(true))
208 | // myDiv.classList.add('cookie-message');
209 | // myDiv.innerHTML = `We use cookies for improved accessibility and functionality <button class="btn--close-cookie">Got it</button>`;
210 | // console.log(myDiv);
211 | // header.append(myDiv);
212 | 
213 | // //Deleting elements
214 | // document
215 | //   .querySelector('.btn--close-cookie')
216 | //   .addEventListener('click', function () {
217 | //     myDiv.remove();
218 | //   });
219 | 
220 | //STYLES, ATTRIBUTES AND CLASSES
221 | // myDiv.style.backgroundColor = 'slateblue';
222 | // myDiv.style.width = '100%';
223 | // console.log(myDiv.style.height);
224 | // console.log(myDiv.style.backgroundColor);
225 | // console.log(myDiv.style.width);
226 | // console.log(getComputedStyle(myDiv).height);
227 | // myDiv.style.height = parseFloat(getComputedStyle(myDiv).height) + 20 + 'px';
228 | 
229 | // const logo = document.querySelector('.nav__logo');
230 | // console.log(logo.src);
231 | // console.log(logo.id);
232 | // console.log(logo.className);
233 | 
234 | // console.log(logo.getAttribute("src"));
235 | // console.log(logo.getAttribute("id"));
236 | // console.log(logo.getAttribute("class"));
237 | 
238 | // logo.setAttribute("id", "Enaira");
239 | 
240 | //classes
241 | 
242 | //  console.log(logo.classList);
243 | // logo.classList.add("j");
244 | // logo.classList.remove("j");
245 | // logo.classList.toggle("k");
246 | // logo.classList.contains("n");
247 | 
248 | //TYPES OF EVENT AND EVENT HANDLER
249 | // const h1 = document.querySelector('h1');
250 | // const x = function () {
251 | //   alert('You just moved over the H1 element');
252 | //   h1.removeEventListener('mouseenter', x);
253 | // };
254 | // h1.addEventListener('mouseenter', x);
255 | 
256 | // h1.onclick = function(){
257 | //   alert("You just moved over the H1 element")
258 | // }
259 | 
260 | //EVENT PROPAGATION IN PRACTICE
261 | // document.querySelector('.nav__link').addEventListener('click', function (e) {
262 | //   e.preventDefault();
263 | //   this.style.backgroundColor = 'seagreen';
264 | //   console.log(e.target);
265 | //   console.log(this===e.currentTarget);
266 | // });
267 | 
268 | // document.querySelector('.nav__links').addEventListener('click', function (e) {
269 | //   e.preventDefault();
270 | //   this.style.backgroundColor = 'sandybrown';
271 | //   console.log(e.target);
272 | // });
273 | // document.querySelector('.nav').addEventListener('click', function (e) {
274 | //   e.preventDefault();
275 | //   this.style.backgroundColor = 'tomato';
276 | //   console.log(e.target);
277 | // });
278 | 


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/Thumbs.db


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/card-lazy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/card-lazy.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/card.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/card.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/digital-lazy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/digital-lazy.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/digital.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/digital.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/grow-lazy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/grow-lazy.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/grow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/grow.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/hero.png


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/icon.png


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/img-1.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/img-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/img-2.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/img-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/img-3.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/img-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/img-4.jpg


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/logo.png


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/user-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/user-1.png


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/user-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/user-2.png


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/img/user-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/15-Advanced-DOM/starter/img/user-3.png


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <link rel="shortcut icon" type="image/png" href="img/icon.png" />
  8 | 
  9 |     <link
 10 |       href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap"
 11 |       rel="stylesheet"
 12 |     />
 13 |     <link rel="stylesheet" href="style.css" />
 14 |     <title>Mobile Bank Website</title>
 15 |   </head>
 16 |   <body>
 17 |     <header class="header">
 18 |       <nav class="nav">
 19 |         <img
 20 |           src="img/logo.png"
 21 |           class="nav__logo"
 22 |           id="logo"
 23 |         />
 24 |         <ul class="nav__links">
 25 |           <li class="nav__item">
 26 |             <a class="nav__link" href="#section--1">Features</a>
 27 |           </li>
 28 |           <li class="nav__item">
 29 |             <a class="nav__link" href="#section--2">Operations</a>
 30 |           </li>
 31 |           <li class="nav__item">
 32 |             <a class="nav__link" href="#section--3">Testimonials</a>
 33 |           </li>
 34 |           <li class="nav__item">
 35 |             <a class="nav__link nav__link--btn btn--show-modal" href="#"
 36 |               >Open account</a
 37 |             >
 38 |           </li>
 39 |         </ul>
 40 |       </nav>
 41 | 
 42 |       <div class="header__title">
 43 |         <h1>
 44 | 
 45 |           <!-- Green highlight effect -->
 46 |           <span class="highlight">banking</span>
 47 |           just made<br />
 48 |           <span class="highlight">easy</span>
 49 |         </h1>
 50 |         <h4>A simpler banking experience for a simpler life.</h4>
 51 |         <button class="btn--text btn--scroll-to">Learn more &DownArrow;</button>
 52 |         <img
 53 |           src="img/hero.png"
 54 |           class="header__img"
 55 |         />
 56 |       </div>
 57 |     </header>
 58 | 
 59 |     <section class="section" id="section--1">
 60 |       <div class="section__title">
 61 |         <h2 class="section__description">Features</h2>
 62 |         <h3 class="section__header">
 63 |           Everything you need in a modern bank and more.
 64 |         </h3>
 65 |       </div>
 66 | 
 67 |       <div class="features">
 68 |         <img
 69 |           src="img/digital-lazy.jpg"
 70 |           data-src="img/digital.jpg"
 71 |           alt="Computer"
 72 |           class="features__img lazy-img"
 73 |         />
 74 |         <div class="features__feature">
 75 |           <div class="features__icon">
 76 |             <svg>
 77 |               <use xlink:href="img/icons.svg#icon-monitor"></use>
 78 |             </svg>
 79 |           </div>
 80 |           <h5 class="features__header">100% digital bank</h5>
 81 |           <p>
 82 |             Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde alias
 83 |             sint quos? Accusantium a fugiat porro reiciendis saepe quibusdam
 84 |             debitis ducimus.
 85 |           </p>
 86 |         </div>
 87 | 
 88 |         <div class="features__feature">
 89 |           <div class="features__icon">
 90 |             <svg>
 91 |               <use xlink:href="img/icons.svg#icon-trending-up"></use>
 92 |             </svg>
 93 |           </div>
 94 |           <h5 class="features__header">Watch your money grow</h5>
 95 |           <p>
 96 |             Nesciunt quos autem dolorum voluptates cum dolores dicta fuga
 97 |             inventore ab? Nulla incidunt eius numquam sequi iste pariatur
 98 |             quibusdam!
 99 |           </p>
100 |         </div>
101 |         <img
102 |           src="img/grow-lazy.jpg"
103 |           data-src="img/grow.jpg"
104 |           alt="Plant"
105 |           class="features__img lazy-img"
106 |         />
107 | 
108 |         <img
109 |           src="img/card-lazy.jpg"
110 |           data-src="img/card.jpg"
111 |           alt="Credit card"
112 |           class="features__img lazy-img"
113 |         />
114 |         <div class="features__feature">
115 |           <div class="features__icon">
116 |             <svg>
117 |               <use xlink:href="img/icons.svg#icon-credit-card"></use>
118 |             </svg>
119 |           </div>
120 |           <h5 class="features__header">Free debit card included</h5>
121 |           <p>
122 |             Quasi, fugit in cumque cupiditate reprehenderit debitis animi enim
123 |             eveniet consequatur odit quam quos possimus assumenda dicta fuga
124 |             inventore ab.
125 |           </p>
126 |         </div>
127 |       </div>
128 |     </section>
129 | 
130 |     <section class="section" id="section--2">
131 |       <div class="section__title">
132 |         <h2 class="section__description">Operations</h2>
133 |         <h3 class="section__header">
134 |           Everything as simple as possible, but no simpler.
135 |         </h3>
136 |       </div>
137 | 
138 |       <div class="operations">
139 |         <div class="operations__tab-container">
140 |           <button
141 |             class="btn operations__tab operations__tab--1 operations__tab--active"
142 |             data-tab="1"
143 |           >
144 |             <span>01</span>Instant Transfers
145 |           </button>
146 |           <button class="btn operations__tab operations__tab--2" data-tab="2">
147 |             <span>02</span>Instant Loans
148 |           </button>
149 |           <button class="btn operations__tab operations__tab--3" data-tab="3">
150 |             <span>03</span>Instant Closing
151 |           </button>
152 |         </div>
153 |         <div
154 |           class="operations__content operations__content--1 operations__content--active"
155 |         >
156 |           <div class="operations__icon operations__icon--1">
157 |             <svg>
158 |               <use xlink:href="img/icons.svg#icon-upload"></use>
159 |             </svg>
160 |           </div>
161 |           <h5 class="operations__header">
162 |             Transfer money to anyone, instantly! No fees, no BS.
163 |           </h5>
164 |           <p>
165 |             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
166 |             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
167 |             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
168 |             aliquip ex ea commodo consequat.
169 |           </p>
170 |         </div>
171 | 
172 |         <div class="operations__content operations__content--2">
173 |           <div class="operations__icon operations__icon--2">
174 |             <svg>
175 |               <use xlink:href="img/icons.svg#icon-home"></use>
176 |             </svg>
177 |           </div>
178 |           <h5 class="operations__header">
179 |             Buy a home or make your dreams come true, with instant loans.
180 |           </h5>
181 |           <p>
182 |             Duis aute irure dolor in reprehenderit in voluptate velit esse
183 |             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
184 |             cupidatat non proident, sunt in culpa qui officia deserunt mollit
185 |             anim id est laborum.
186 |           </p>
187 |         </div>
188 |         <div class="operations__content operations__content--3">
189 |           <div class="operations__icon operations__icon--3">
190 |             <svg>
191 |               <use xlink:href="img/icons.svg#icon-user-x"></use>
192 |             </svg>
193 |           </div>
194 |           <h5 class="operations__header">
195 |             No longer need your account? No problem! Close it instantly.
196 |           </h5>
197 |           <p>
198 |             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
199 |             officia deserunt mollit anim id est laborum. Ut enim ad minim
200 |             veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
201 |             ea commodo consequat.
202 |           </p>
203 |         </div>
204 |       </div>
205 |     </section>
206 | 
207 |     <section class="section" id="section--3">
208 |       <div class="section__title section__title--testimonials">
209 |         <h2 class="section__description">Not sure yet?</h2>
210 |         <h3 class="section__header">
211 |           Millions of users are already making their lives simpler.
212 |         </h3>
213 |       </div>
214 | 
215 |       <div class="slider">
216 |         <div class="slide slide--1">
217 |           <div class="testimonial">
218 |             <h5 class="testimonial__header">Best financial decision ever!</h5>
219 |             <blockquote class="testimonial__text">
220 |               Lorem ipsum dolor sit, amet consectetur adipisicing elit.
221 |               Accusantium quas quisquam non? Quas voluptate nulla minima
222 |               deleniti optio ullam nesciunt, numquam corporis et asperiores
223 |               laboriosam sunt, praesentium suscipit blanditiis. Necessitatibus
224 |               id alias reiciendis, perferendis facere pariatur dolore veniam
225 |               autem esse non voluptatem saepe provident nihil molestiae.
226 |             </blockquote>
227 |             <address class="testimonial__author">
228 |               <img src="img/user-1.png" alt="" class="testimonial__photo" />
229 |               <h6 class="testimonial__name">Oyekunmi Oyediji</h6>
230 |               <p class="testimonial__location">Ibadan, Nigeria</p>
231 |             </address>
232 |           </div>
233 |         </div>
234 | 
235 |         <div class="slide slide--2">
236 |           <div class="testimonial">
237 |             <h5 class="testimonial__header">
238 |               The last step to becoming a complete minimalist
239 |             </h5>
240 |             <blockquote class="testimonial__text">
241 |               Quisquam itaque deserunt ullam, quia ea repellendus provident,
242 |               ducimus neque ipsam modi voluptatibus doloremque, corrupti
243 |               laborum. Incidunt numquam perferendis veritatis neque repellendus.
244 |               Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo
245 |               deserunt exercitationem deleniti.
246 |             </blockquote>
247 |             <address class="testimonial__author">
248 |               <img src="img/user-2.png" alt="" class="testimonial__photo" />
249 |               <h6 class="testimonial__name">Deborah Atagher</h6>
250 |               <p class="testimonial__location">Abuja, Nigeria</p>
251 |             </address>
252 |           </div>
253 |         </div>
254 | 
255 |         <div class="slide slide--3">
256 |           <div class="testimonial">
257 |             <h5 class="testimonial__header">
258 |               Finally free from old-school banks
259 |             </h5>
260 |             <blockquote class="testimonial__text">
261 |               Debitis, nihil sit minus suscipit magni aperiam vel tenetur
262 |               incidunt commodi architecto numquam omnis nulla autem,
263 |               necessitatibus blanditiis modi similique quidem. Odio aliquam
264 |               culpa dicta beatae quod maiores ipsa minus consequatur error sunt,
265 |               deleniti saepe aliquid quos inventore sequi. Necessitatibus id
266 |               alias reiciendis, perferendis facere.
267 |             </blockquote>
268 |             <address class="testimonial__author">
269 |               <img src="img/user-3.png" alt="" class="testimonial__photo" />
270 |               <h6 class="testimonial__name">Isaac Wanger</h6>
271 |               <p class="testimonial__location">Lagos, Nigeria</p>
272 |             </address>
273 |           </div>
274 |         </div>
275 | 
276 |         <!-- <div class="slide"><img src="img/img-1.jpg" alt="Photo 1" /></div>
277 |         <div class="slide"><img src="img/img-2.jpg" alt="Photo 2" /></div>
278 |         <div class="slide"><img src="img/img-3.jpg" alt="Photo 3" /></div>
279 |         <div class="slide"><img src="img/img-4.jpg" alt="Photo 4" /></div> -->
280 |         <button class="slider__btn slider__btn--left">&larr;</button>
281 |         <button class="slider__btn slider__btn--right">&rarr;</button>
282 |         <div class="dots"></div>
283 |       </div>
284 |     </section>
285 | 
286 |     <section class="section section--sign-up">
287 |       <div class="section__title">
288 |         <h3 class="section__header">
289 |           The best day to join ENaira was one year ago. The second best is
290 |           today!
291 |         </h3>
292 |       </div>
293 |       <button class="btn btn--show-modal">Open your free account today!</button>
294 |     </section>
295 | 
296 |     <footer class="footer">
297 |       <ul class="footer__nav">
298 |         <li class="footer__item">
299 |           <a class="footer__link" href="#">About</a>
300 |         </li>
301 |         <li class="footer__item">
302 |           <a class="footer__link" href="#">Pricing</a>
303 |         </li>
304 |         <li class="footer__item">
305 |           <a class="footer__link" href="#">Terms of Use</a>
306 |         </li>
307 |         <li class="footer__item">
308 |           <a class="footer__link" href="#">Privacy Policy</a>
309 |         </li>
310 |         <li class="footer__item">
311 |           <a class="footer__link" href="#">Careers</a>
312 |         </li>
313 |         <li class="footer__item">
314 |           <a class="footer__link" href="#">Blog</a>
315 |         </li>
316 |         <li class="footer__item">
317 |           <a class="footer__link" href="#">Contact Us</a>
318 |         </li>
319 |       </ul>
320 |    
321 |     </footer>
322 | 
323 |     <div class="modal hidden">
324 |       <button class="btn--close-modal">&times;</button>
325 |       <h2 class="modal__header">
326 |         Open your bank account <br />
327 |         in just <span class="highlight">5 minutes</span>
328 |       </h2>
329 |       <form class="modal__form">
330 |         <label>First Name</label>
331 |         <input type="text" />
332 |         <label>Last Name</label>
333 |         <input type="text" />
334 |         <label>Email Address</label>
335 |         <input type="email" />
336 |         <button class="btn">Next step &rarr;</button>
337 |       </form>
338 |     </div>
339 |     <div class="overlay hidden"></div>
340 | 
341 |     <script src="script.js"></script>
342 |   </body>
343 | </html>
344 | 


--------------------------------------------------------------------------------
/15-Advanced-DOM/starter/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | ///////////////////////////////////////
 4 | // Modal window
 5 | 
 6 | const modal = document.querySelector('.modal');
 7 | const overlay = document.querySelector('.overlay');
 8 | const btnCloseModal = document.querySelector('.btn--close-modal');
 9 | const btnsOpenModal = document.querySelectorAll('.btn--show-modal');
10 | 
11 | const openModal = function () {
12 |   modal.classList.remove('hidden');
13 |   overlay.classList.remove('hidden');
14 | };
15 | 
16 | const closeModal = function () {
17 |   modal.classList.add('hidden');
18 |   overlay.classList.add('hidden');
19 | };
20 | 
21 | for (let i = 0; i < btnsOpenModal.length; i++)
22 |   btnsOpenModal[i].addEventListener('click', openModal);
23 | 
24 | btnCloseModal.addEventListener('click', closeModal);
25 | overlay.addEventListener('click', closeModal);
26 | 
27 | document.addEventListener('keydown', function (e) {
28 |   if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
29 |     closeModal();
30 |   }
31 | });
32 | 


--------------------------------------------------------------------------------
/16-OOP/final/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/16-OOP/final/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Object Oriented Programming (OOP) With JavaScript</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #28b487, #7dd56f);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         /* line-height: 1.3; */
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |     </style>
25 |     <script defer src="script.js"></script>
26 |   </head>
27 |   <body>
28 |     <h1>Object Oriented Programming (OOP) With JavaScript</h1>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/16-OOP/final/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const Person = function (firstName, birthYear) {
 3 |   this.firstName = firstName;
 4 |   this.birthYear = birthYear;
 5 |   //never do this
 6 | //   this.calcAge = function () {
 7 | //     console.log(2022 - this.birthYear);
 8 | //   };
 9 | };
10 | 
11 | // console.log(ciroma);
12 | // console.log(dumebi);
13 | // console.log(adekunle);
14 | Person.prototype.calcAge = function () {
15 |   console.log(2022 - this.birthYear);
16 | };
17 | // console.log(Person.prototype);
18 | // console.log(Person.prototype.isPrototypeOf())
19 | const ciroma = new Person('Ciroma', 2002);
20 | const dumebi = new Person('dumebi', 1995);
21 | const adekunle = new Person('Adekunle', 2005);
22 | // console.log(Person.prototype.constructor)
23 | /*
24 | const Car = function(make, speed){
25 | this.speed = speed
26 | this.make = make
27 | }
28 | Car.prototype.accelerate = function(){
29 |   this.speed += 10
30 |   console.log(this.speed)
31 | }
32 | Car.prototype.brake = function(){
33 |   this.speed -= 5
34 |   console.log(this.speed)
35 | }
36 | const bmw = new Car("BMW", 120)
37 | const mercedes = new Car("Mercedes", 95)
38 | 
39 | bmw.accelerate()
40 | bmw.brake()
41 | */
42 | class PersonCl {
43 | constructor(firstName, birthYear){
44 | this.firstName = firstName
45 | this.birthYear = birthYear
46 | }
47 | //method will be added to the prototype property of the class
48 | calcAge(){
49 | console.log(2022 - this.birthYear)
50 | }
51 | greet (){
52 |   console.log(`Hey ${this.firstName}`)
53 | }
54 | }
55 | // PersonCl.prototype.greet = function(){
56 | //   console.log("Hello my people")
57 | // }
58 | 
59 | const bolanle = new PersonCl("bolanle", 1996)
60 | 
61 | bolanle.calcAge()
62 | bolanle.greet()
63 | 
64 | 
65 | 
66 | // Setters and getters
67 | const account = {
68 |   owner : "Ayo", 
69 |   movements : [200, 500, 6000],
70 | 
71 |   get latest(){
72 |     return this.movements.at(-1)
73 |   },
74 |   set latest(mov){
75 |     this.movements.push(mov)
76 |   }
77 | 
78 | }
79 | console.log(account.latest)
80 | account.latest = 50
81 | console.log(account.movements)


--------------------------------------------------------------------------------
/16-OOP/starter/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/16-OOP/starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Object Oriented Programming (OOP) With JavaScript</title>
 8 |     <style>
 9 |       body {
10 |         height: 100vh;
11 |         display: flex;
12 |         align-items: center;
13 |         background: linear-gradient(to top left, #28b487, #7dd56f);
14 |       }
15 |       h1 {
16 |         font-family: sans-serif;
17 |         font-size: 50px;
18 |         line-height: 1.3;
19 |         width: 100%;
20 |         padding: 30px;
21 |         text-align: center;
22 |         color: white;
23 |       }
24 |     </style>
25 |     <script defer src="script.js"></script>
26 |   </head>
27 |   <body>
28 |     <h1>Object Oriented Programming (OOP) With JavaScript</h1>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/16-OOP/starter/script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 


--------------------------------------------------------------------------------
/17-Asynchronous/final/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/17-Asynchronous/final/img/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/17-Asynchronous/final/img/Thumbs.db


--------------------------------------------------------------------------------
/17-Asynchronous/final/img/img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/17-Asynchronous/final/img/img-1.jpg


--------------------------------------------------------------------------------
/17-Asynchronous/final/img/img-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/17-Asynchronous/final/img/img-2.jpg


--------------------------------------------------------------------------------
/17-Asynchronous/final/img/img-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/17-Asynchronous/final/img/img-3.jpg


--------------------------------------------------------------------------------
/17-Asynchronous/final/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <script defer src="script.js"></script>
 9 |     <title>Asynchronous JavaScript</title>
10 |   </head>
11 |   <body>
12 |     <main class="container">
13 |       <div class="countries">
14 |         <!--
15 |         <article class="country">
16 |           <img class="country__img" src="" />
17 |           <div class="country__data">
18 |             <h3 class="country__name">COUNTRY</h3>
19 |             <h4 class="country__region">REGION</h4>
20 |             <p class="country__row"><span>👫</span>POP people</p>
21 |             <p class="country__row"><span>🗣️</span>LANG</p>
22 |             <p class="country__row"><span>💰</span>CUR</p>
23 |           </div>
24 |         </article>
25 |         -->
26 |       </div>
27 |       <!-- <button class="btn-country">Where am I?</button> -->
28 |       <div class="images"></div>
29 |     </main>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/17-Asynchronous/final/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const btn = document.querySelector('.btn-country');
 4 | const countriesContainer = document.querySelector('.countries');
 5 | 
 6 | // setTimeout(()=>{
 7 | // console.log("Hello")
 8 | // }, 5000)
 9 | 
10 | // btn.addEventListener("click", function(){
11 | 
12 | // })
13 | const renderCountry = function (info, className = '') {
14 |   const htmlText = `<article class="country, ${className}">
15 |   <img class="country__img" src="${info.flag}" />
16 |   <div class="country__data">
17 |     <h3 class="country__name">${info.name}</h3>
18 |     <h4 class="country__region">${info.region}</h4>
19 |     <p class="country__row"><span>👫</span>${(
20 |       +info.population / 1000000
21 |     ).toFixed(1)}M people</p>
22 |     <p class="country__row"><span>🗣️</span>${info.languages[0].name}</p>
23 |     <p class="country__row"><span>💰</span>${info.currencies[0].name}</p>
24 |   </div>
25 | </article>`;
26 |   countriesContainer.insertAdjacentHTML('beforeend', htmlText);
27 |   countriesContainer.style.opacity = 1;
28 | };
29 | const getCountry = function (country) {
30 |   const request = new XMLHttpRequest();
31 |   request.open(
32 |     'GET',
33 |     `https://restcountries.com/v2/name/${country}?fullText=true`
34 |   );
35 |   request.send();
36 |   request.addEventListener('load', function () {
37 |     const [info] = JSON.parse(this.responseText);
38 |     console.log(info);
39 |     renderCountry(info);
40 | 
41 |     //NEIGHBOURING COUNTRY
42 |     const [neighbor] = info.borders;
43 |     console.log(neighbor);
44 |     const request2 = new XMLHttpRequest();
45 |     request2.open(
46 |       'GET',
47 |       `https://restcountries.com/v2/alpha?codes=${neighbor}`
48 |     );
49 |     request2.send();
50 |     request2.addEventListener('load', function () {
51 |       const [info2] = JSON.parse(this.responseText);
52 |       console.log(info2.borders);
53 |       renderCountry(info2, 'neighbour');
54 |       const [neighbour3] = info2.borders;
55 |       //NEIGHBOURING COUNTRY 3
56 |       const request3 = new XMLHttpRequest();
57 |       request3.open(
58 |         'GET',
59 |         `https://restcountries.com/v2/alpha?codes=${neighbour3}`
60 |       );
61 |       request3.send();
62 |       request3.addEventListener('load', function () {
63 |         const [info3] = JSON.parse(this.responseText);
64 |         console.log(info3);
65 |         renderCountry(info3, 'neighbour');
66 |       });
67 |     });
68 |   });
69 | };
70 | getCountry('Togo');
71 | 
72 | 


--------------------------------------------------------------------------------
/17-Asynchronous/final/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: inherit;
  5 | }
  6 | 
  7 | html {
  8 |   font-size: 62.5%;
  9 |   box-sizing: border-box;
 10 | }
 11 | 
 12 | body {
 13 |   font-family: system-ui;
 14 |   color: #555;
 15 |   background-color: #f7f7f7;
 16 |   min-height: 100vh;
 17 | 
 18 |   display: flex;
 19 |   align-items: center;
 20 |   justify-content: center;
 21 | }
 22 | 
 23 | .container {
 24 |   display: flex;
 25 |   flex-flow: column;
 26 |   align-items: center;
 27 | }
 28 | 
 29 | .countries {
 30 |   /* margin-bottom: 8rem; */
 31 |   display: flex;
 32 | 
 33 |   font-size: 2rem;
 34 |   opacity: 0;
 35 |   transition: opacity 1s;
 36 | }
 37 | 
 38 | .country {
 39 |   background-color: #fff;
 40 |   box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
 41 |   font-size: 1.8rem;
 42 |   width: 30rem;
 43 |   border-radius: 0.7rem;
 44 |   margin: 0 3rem;
 45 |   /* overflow: hidden; */
 46 | }
 47 | 
 48 | .neighbour::before {
 49 |   content: 'Neighbour country';
 50 |   width: 100%;
 51 |   position: absolute;
 52 |   top: -4rem;
 53 | 
 54 |   text-align: center;
 55 |   font-size: 1.8rem;
 56 |   font-weight: 600;
 57 |   text-transform: uppercase;
 58 |   color: #888;
 59 | }
 60 | 
 61 | .neighbour {
 62 |   transform: scale(0.8) translateY(1rem);
 63 |   margin-left: 0;
 64 | }
 65 | 
 66 | .country__img {
 67 |   width: 30rem;
 68 |   height: 17rem;
 69 |   object-fit: cover;
 70 |   background-color: #eee;
 71 |   border-top-left-radius: 0.7rem;
 72 |   border-top-right-radius: 0.7rem;
 73 | }
 74 | 
 75 | .country__data {
 76 |   padding: 2.5rem 3.75rem 3rem 3.75rem;
 77 | }
 78 | 
 79 | .country__name {
 80 |   font-size: 2.7rem;
 81 |   margin-bottom: 0.7rem;
 82 | }
 83 | 
 84 | .country__region {
 85 |   font-size: 1.4rem;
 86 |   margin-bottom: 2.5rem;
 87 |   text-transform: uppercase;
 88 |   color: #888;
 89 | }
 90 | 
 91 | .country__row:not(:last-child) {
 92 |   margin-bottom: 1rem;
 93 | }
 94 | 
 95 | .country__row span {
 96 |   display: inline-block;
 97 |   margin-right: 2rem;
 98 |   font-size: 2.4rem;
 99 | }
100 | 
101 | .btn-country {
102 |   border: none;
103 |   font-size: 2rem;
104 |   padding: 2rem 5rem;
105 |   border-radius: 0.7rem;
106 |   color: white;
107 |   background-color: orangered;
108 |   cursor: pointer;
109 | }
110 | 
111 | .images {
112 |   display: flex;
113 | }
114 | 
115 | .images img {
116 |   display: block;
117 |   width: 80rem;
118 |   margin: 4rem;
119 | }
120 | 
121 | .images img.parallel {
122 |   width: 40rem;
123 |   margin: 2rem;
124 |   border: 3rem solid white;
125 |   box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
126 | }
127 | 


--------------------------------------------------------------------------------
/17-Asynchronous/starter/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/17-Asynchronous/starter/img/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/17-Asynchronous/starter/img/Thumbs.db


--------------------------------------------------------------------------------
/17-Asynchronous/starter/img/img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/17-Asynchronous/starter/img/img-1.jpg


--------------------------------------------------------------------------------
/17-Asynchronous/starter/img/img-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/17-Asynchronous/starter/img/img-2.jpg


--------------------------------------------------------------------------------
/17-Asynchronous/starter/img/img-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/17-Asynchronous/starter/img/img-3.jpg


--------------------------------------------------------------------------------
/17-Asynchronous/starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <script defer src="script.js"></script>
 9 |     <title>Asynchronous JavaScript</title>
10 |   </head>
11 |   <body>
12 |     <main class="container">
13 |       <div class="countries">
14 |         <!--
15 |         <article class="country">
16 |           <img class="country__img" src="" />
17 |           <div class="country__data">
18 |             <h3 class="country__name">COUNTRY</h3>
19 |             <h4 class="country__region">REGION</h4>
20 |             <p class="country__row"><span>👫</span>POP people</p>
21 |             <p class="country__row"><span>🗣️</span>LANG</p>
22 |             <p class="country__row"><span>💰</span>CUR</p>
23 |           </div>
24 |         </article>
25 |         -->
26 |       </div>
27 |       <!-- <button class="btn-country">Where am I?</button> -->
28 |       <div class="images"></div>
29 |     </main>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/17-Asynchronous/starter/script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | const btn = document.querySelector('.btn-country');
4 | const countriesContainer = document.querySelector('.countries');
5 | 
6 | ///////////////////////////////////////
7 | 


--------------------------------------------------------------------------------
/17-Asynchronous/starter/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: inherit;
  5 | }
  6 | 
  7 | html {
  8 |   font-size: 62.5%;
  9 |   box-sizing: border-box;
 10 | }
 11 | 
 12 | body {
 13 |   font-family: system-ui;
 14 |   color: #555;
 15 |   background-color: #f7f7f7;
 16 |   min-height: 100vh;
 17 | 
 18 |   display: flex;
 19 |   align-items: center;
 20 |   justify-content: center;
 21 | }
 22 | 
 23 | .container {
 24 |   display: flex;
 25 |   flex-flow: column;
 26 |   align-items: center;
 27 | }
 28 | 
 29 | .countries {
 30 |   /* margin-bottom: 8rem; */
 31 |   display: flex;
 32 | 
 33 |   font-size: 2rem;
 34 |   opacity: 0;
 35 |   transition: opacity 1s;
 36 | }
 37 | 
 38 | .country {
 39 |   background-color: #fff;
 40 |   box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
 41 |   font-size: 1.8rem;
 42 |   width: 30rem;
 43 |   border-radius: 0.7rem;
 44 |   margin: 0 3rem;
 45 |   /* overflow: hidden; */
 46 | }
 47 | 
 48 | .neighbour::before {
 49 |   content: 'Neighbour country';
 50 |   width: 100%;
 51 |   position: absolute;
 52 |   top: -4rem;
 53 | 
 54 |   text-align: center;
 55 |   font-size: 1.8rem;
 56 |   font-weight: 600;
 57 |   text-transform: uppercase;
 58 |   color: #888;
 59 | }
 60 | 
 61 | .neighbour {
 62 |   transform: scale(0.8) translateY(1rem);
 63 |   margin-left: 0;
 64 | }
 65 | 
 66 | .country__img {
 67 |   width: 30rem;
 68 |   height: 17rem;
 69 |   object-fit: cover;
 70 |   background-color: #eee;
 71 |   border-top-left-radius: 0.7rem;
 72 |   border-top-right-radius: 0.7rem;
 73 | }
 74 | 
 75 | .country__data {
 76 |   padding: 2.5rem 3.75rem 3rem 3.75rem;
 77 | }
 78 | 
 79 | .country__name {
 80 |   font-size: 2.7rem;
 81 |   margin-bottom: 0.7rem;
 82 | }
 83 | 
 84 | .country__region {
 85 |   font-size: 1.4rem;
 86 |   margin-bottom: 2.5rem;
 87 |   text-transform: uppercase;
 88 |   color: #888;
 89 | }
 90 | 
 91 | .country__row:not(:last-child) {
 92 |   margin-bottom: 1rem;
 93 | }
 94 | 
 95 | .country__row span {
 96 |   display: inline-block;
 97 |   margin-right: 2rem;
 98 |   font-size: 2.4rem;
 99 | }
100 | 
101 | .btn-country {
102 |   border: none;
103 |   font-size: 2rem;
104 |   padding: 2rem 5rem;
105 |   border-radius: 0.7rem;
106 |   color: white;
107 |   background-color: orangered;
108 |   cursor: pointer;
109 | }
110 | 
111 | .images {
112 |   display: flex;
113 | }
114 | 
115 | .images img {
116 |   display: block;
117 |   width: 80rem;
118 |   margin: 4rem;
119 | }
120 | 
121 | .images img.parallel {
122 |   width: 40rem;
123 |   margin: 2rem;
124 |   border: 3rem solid white;
125 |   box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
126 | }
127 | 


--------------------------------------------------------------------------------
/CODING CHALLENGE 1 -  SECTION 7.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aydotjs/js-mastery-codewithay/0c58e6ed21d5a43b8fedaab38e978eaf6587d724/CODING CHALLENGE 1 -  SECTION 7.pdf


--------------------------------------------------------------------------------