├── README.md ├── bankist ├── Bankist-flowchart.png ├── README.md ├── icon.png ├── index.html ├── logo.png ├── script.js └── style.css ├── blackJack ├── backgroundImage │ └── casino table.jpg ├── index.css ├── index.html └── index.js ├── calculator ├── .prettierrc ├── index.html ├── script.js └── style.css ├── carousel ├── index.html ├── index.js └── styles.css ├── clock ├── index.html ├── script.js └── style.css ├── diceChallenge ├── dicee.html ├── index.js └── styles.css ├── diceGame ├── index.css ├── index.html └── index.js ├── dragDrop ├── index.html ├── index.js └── styles.css ├── dynamicTweetBox ├── index.html ├── script.js └── style.css ├── expandingCards ├── .prettierrc ├── index.html ├── script.js └── style.css ├── foodMenuItems ├── app.js ├── images │ ├── item1.jpg │ ├── item10.jpg │ ├── item2.jpg │ ├── item3.jpg │ ├── item4.jpg │ ├── item5.jpg │ ├── item6.jpg │ ├── item7.jpg │ ├── item8.jpg │ └── item9.jpg ├── index.html └── style.css ├── grocify ├── grocery.png ├── index.html ├── script.js └── style.css ├── guessingGame ├── index.html ├── script.js └── style.css ├── hoverBoard ├── app.js ├── index.html └── styles.css ├── ipTracker ├── .gitignore ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ └── mobile-design.jpg ├── images │ ├── favicon-32x32.png │ ├── icon-arrow.svg │ ├── icon-location.svg │ ├── logo.jpg │ └── pattern-bg.png ├── index.html ├── main.js ├── package-lock.json ├── package.json └── style.css ├── javascriptQuiz ├── index.html ├── script.js └── style.css ├── leadGenerator-ChromeExtension ├── index.html ├── logo.png ├── manifest.json ├── script.js └── style.css ├── modalWindow ├── index.html ├── script.js └── style.css ├── myTravelBucketList ├── images │ └── plane.png ├── index.html ├── script.js └── styles.css ├── newYearCountdown ├── index.html ├── newyear.jpg ├── script.js └── style.css ├── picture-in-picture ├── index.html ├── script.js └── style.css ├── pigGame ├── dice-1.png ├── dice-2.png ├── dice-3.png ├── dice-4.png ├── dice-5.png ├── dice-6.png ├── index.html ├── script.js └── style.css ├── progressSteps ├── .prettierrc ├── index.html ├── script.js └── style.css ├── randomColorGenerator ├── index.css ├── index.html └── index.js ├── randomPasswordGenerator ├── index.html ├── script.js └── styles.css ├── rockpaperscissors ├── app.js ├── index.html └── styles.css ├── rotatingNavigation ├── .prettierrc ├── index.html ├── script.js └── style.css ├── searchBar ├── index.html ├── index.js └── styles.css └── weatherly ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Beginner to Advanced JavaScript Projects🔥 2 | 3 | Sharpen your JavaScript skills by building these awesome projects using HTML, CSS & JS. 4 |
5 |
6 | 7 | # How to contribute?
8 | 9 | ## 👉 Fork this repository
10 | 11 | Click on the `fork` button
12 | 13 | ## 👉 Clone this repository
14 | 15 | ``` 16 | git clone https://github.com/namyakhan/javascriptProjects.git 17 | ``` 18 | 19 | ## 👉 Create a branch 20 | 21 | ``` 22 | git checkout -b projectname-username 23 | ``` 24 | 25 | ## 👉 Add a project and commit 26 | 27 | ``` 28 | git add . 29 | ``` 30 | 31 | ``` 32 | git commit -m "description of project" 33 | ``` 34 | 35 | ## 👉 Push changes to GitHub 36 | 37 | ``` 38 | git push -u origin your-branch-name 39 | ``` 40 | 41 | ## 👉 Submit your changes for review 42 | 43 | Click on `Create a Pull Request` button on GitHub
44 | 45 | ## Submit the PR🤩 46 | 47 | You will get a notification̦ once the changes have been merged. You're now part of the Open Source Community!🎉 48 | 49 | ### Don't forget to show some ❤️ by hitting ⭐️ 50 | 51 | ## Contributors✨ 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /bankist/Bankist-flowchart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/bankist/Bankist-flowchart.png -------------------------------------------------------------------------------- /bankist/README.md: -------------------------------------------------------------------------------- 1 | username: nk 2 | pin: 2222 3 | -------------------------------------------------------------------------------- /bankist/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/bankist/icon.png -------------------------------------------------------------------------------- /bankist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | Bankist 16 | 17 | 18 | 19 | 38 | 39 |
40 | 41 |
42 |
43 |

Current balance

44 |

45 | As of 05/03/2037 46 |

47 |
48 |

0000€

49 |
50 | 51 | 52 |
53 |
54 |
2 deposit
55 |
3 days ago
56 |
4 000€
57 |
58 |
59 |
60 | 1 withdrawal 61 |
62 |
24/01/2037
63 |
-378€
64 |
65 |
66 | 67 | 68 |
69 |

In

70 |

0000€

71 |

Out

72 |

0000€

73 |

Interest

74 |

0000€

75 | 76 |
77 | 78 | 79 |
80 |

Transfer money

81 |
82 | 83 | 84 | 85 | 86 | 87 |
88 |
89 | 90 | 91 |
92 |

Request loan

93 |
94 | 95 | 96 | 97 |
98 |
99 | 100 | 101 |
102 |

Close account

103 |
104 | 105 | 110 | 111 | 112 | 113 |
114 |
115 | 116 | 117 |

118 | You will be logged out in 05:00 119 |

120 |
121 | 122 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /bankist/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/bankist/logo.png -------------------------------------------------------------------------------- /bankist/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | ///////////////////////////////////////////////// 4 | ///////////////////////////////////////////////// 5 | // BANKIST APP 6 | 7 | // Data 8 | const account1 = { 9 | owner: 'Jonas Schmedtmann', 10 | movements: [200, 450, -400, 3000, -650, -130, 70, 1300], 11 | interestRate: 1.2, // % 12 | pin: 1111, 13 | }; 14 | 15 | const account2 = { 16 | owner: 'Namya Khan', 17 | movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30], 18 | interestRate: 1.5, 19 | pin: 2222, 20 | }; 21 | 22 | const account3 = { 23 | owner: 'Steven Thomas Williams', 24 | movements: [200, -200, 340, -300, -20, 50, 400, -460], 25 | interestRate: 0.7, 26 | pin: 3333, 27 | }; 28 | 29 | const account4 = { 30 | owner: 'Sarah Smith', 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 | const displayMovements = function (movements, sort = false) { 65 | containerMovements.innerHTML = ''; 66 | //.textContent = 0 67 | 68 | //we are creating a copy using slice as we don't want to mutate the original movements array 69 | const movs = sort ? movements.slice().sort((a, b) => a - b) : movements; 70 | 71 | movs.forEach(function (mov, i) { 72 | const type = mov > 0 ? 'deposit' : 'withdrawal'; 73 | 74 | const html = ` 75 |
76 |
${ 77 | i + 1 78 | } ${type}
79 |
${mov}💲
80 |
`; 81 | 82 | containerMovements.insertAdjacentHTML('afterbegin', html); 83 | }); 84 | }; 85 | 86 | const calcDisplayBalance = function (acc) { 87 | acc.balance = acc.movements.reduce((acc, mov) => acc + mov, 0); 88 | labelBalance.textContent = `${acc.balance}💲`; 89 | }; 90 | 91 | const calcDisplaySummary = function (acc) { 92 | const incomes = acc.movements 93 | .filter(mov => mov > 0) 94 | .reduce((acc, mov) => acc + mov, 0); 95 | labelSumIn.textContent = `${incomes}💲`; 96 | 97 | const out = acc.movements 98 | .filter(mov => mov < 0) 99 | .reduce((acc, mov) => acc + mov, 0); 100 | labelSumOut.textContent = `${Math.abs(out)}💲`; 101 | 102 | const interest = acc.movements 103 | .filter(mov => mov > 0) 104 | .map(deposit => (deposit * acc.interestRate) / 100) 105 | .filter(int => int > 1) 106 | .reduce((acc, int) => acc + int, 0); 107 | labelSumInterest.textContent = `${interest}💲`; 108 | }; 109 | 110 | const createUsernames = function (accs) { 111 | accs.forEach(function (acc) { 112 | acc.username = acc.owner 113 | .toLowerCase() 114 | .split(' ') 115 | .map(name => name[0]) 116 | .join(''); 117 | }); 118 | }; 119 | createUsernames(accounts); 120 | 121 | const updateUI = function (acc) { 122 | //display movements 123 | displayMovements(acc.movements); 124 | 125 | //display balance 126 | calcDisplayBalance(acc); 127 | 128 | //display summary 129 | calcDisplaySummary(acc); 130 | }; 131 | 132 | //event handler 133 | let currentAccount; 134 | btnLogin.addEventListener('click', function (e) { 135 | //prevent form from submitting 136 | e.preventDefault(); 137 | 138 | currentAccount = accounts.find( 139 | acc => acc.username === inputLoginUsername.value 140 | ); 141 | console.log(currentAccount); 142 | 143 | if (currentAccount?.pin === Number(inputLoginPin.value)) { 144 | //Display UI and message 145 | labelWelcome.textContent = `Welcome back, ${ 146 | currentAccount.owner.split(' ')[0] 147 | }`; 148 | containerApp.style.opacity = 100; 149 | 150 | //clear inpur fields 151 | inputLoginUsername.value = inputLoginPin.value = ''; 152 | //removing cursor 153 | inputLoginPin.blur(); 154 | 155 | //UPDATE UI 156 | updateUI(currentAccount); 157 | } 158 | }); 159 | 160 | btnTransfer.addEventListener('click', function (e) { 161 | e.preventDefault(); 162 | const amount = Number(inputTransferAmount.value); 163 | const receiverAcc = accounts.find( 164 | acc => acc.username === inputTransferTo.value 165 | ); 166 | inputTransferAmount.value = inputTransferTo.value = ''; 167 | 168 | if ( 169 | amount > 0 && 170 | receiverAcc && 171 | currentAccount.balance >= amount && 172 | receiverAcc.username !== currentAccount.username 173 | ) { 174 | //doing the transfer 175 | currentAccount.movements.push(-amount); 176 | receiverAcc.movements.push(amount); 177 | 178 | //update UI 179 | updateUI(currentAccount); 180 | } 181 | }); 182 | 183 | btnLoan.addEventListener('click', function (e) { 184 | e.preventDefault(); 185 | 186 | const amount = Number(inputLoanAmount.value); 187 | 188 | if (amount > 0 && currentAccount.movements.some(mov => mov >= amount * 0.1)) { 189 | //add movement 190 | currentAccount.movements.push(amount); 191 | 192 | //Update UI 193 | updateUI(currentAccount); 194 | } 195 | inputLoanAmount.value = ''; 196 | }); 197 | 198 | btnClose.addEventListener('click', function (e) { 199 | e.preventDefault(); 200 | 201 | if ( 202 | inputCloseUsername.value === currentAccount.username && 203 | Number(inputClosePin.value) === currentAccount.pin 204 | ) { 205 | const index = accounts.findIndex( 206 | acc => acc.username === currentAccount.username 207 | ); 208 | console.log(index); 209 | 210 | //delete account 211 | 212 | //hide UI 213 | 214 | inputCloseUsername.value = inputClosePin.value = ''; 215 | } 216 | }); 217 | 218 | let sorted = false; 219 | btnSort.addEventListener('click', function (e) { 220 | e.preventDefault(); 221 | displayMovements(currentAccount.movements, !sorted); 222 | sorted = !sorted; 223 | }); 224 | 225 | ///////////////////////////////////////////////// 226 | ///////////////////////////////////////////////// 227 | // LECTURES 228 | 229 | const movements = [200, 450, -400, 3000, -650, -130, 70, 1300]; 230 | 231 | ///////////////////////////////////////////////// 232 | // let arr = ['a', 'b', 'c', 'd', 'e']; 233 | 234 | // console.log(arr.slice(2)); //starting at position 2 //['c', 'd', 'e'] 235 | 236 | // console.log(arr.slice(2, 4)); //starting at 2 not including 4 // ['c', 'd'] 237 | // //length = end parameter - begining one 238 | 239 | // console.log(arr.slice(-2)); //starting at -2 //['d', 'e'] 240 | 241 | // //negative index as end parameter 242 | // console.log(arr.slice(1, -2)); // ['b', 'c'] 243 | 244 | // //creating shallow copies of array using slice 245 | // console.log(arr.slice()); 246 | 247 | // //same as 248 | // console.log([...arr]); 249 | 250 | // //splice 251 | 252 | // console.log(arr.splice(-1)); //['c', 'd', 'e'] 253 | // console.log(arr); //['a', 'b'] 254 | 255 | // //REVERSE 256 | // arr = ['a', 'b', 'c', 'd', 'e']; 257 | 258 | // const arr2 = ['j', 'i', 'h', 'g', 'f']; 259 | // console.log(arr2.reverse()); 260 | // console.log(arr2); 261 | 262 | // //concat 263 | // const letters = arr.concat(arr2); 264 | // console.log(letters); 265 | 266 | // //same as 267 | // console.log([...arr, ...arr2]); 268 | 269 | // //join 270 | // console.log(letters.join('-')); 271 | 272 | //at method 273 | // const arr = [23, 11, 64]; 274 | // console.log(arr[0]); //23 275 | // console.log(arr.at(0)); //23 276 | 277 | // //getthing the last array element 278 | // console.log(arr[arr.length - 1]); //64 279 | // console.log(arr.slice(-1)[0]); //64 280 | // console.log(arr.at(-1)); //64 281 | 282 | // //at method also works in strings 283 | // console.log('jonas'.at(0)); //j 284 | // console.log('jonas'.at(-1)); //s 285 | 286 | // const movements = [200, 450, -400, 3000, -650, -130, 70, 1300]; 287 | 288 | // //for of method 289 | // for (const [i, movement] of movements.entries()) { 290 | // if (movement > 0) { 291 | // console.log(`Movement ${i + 1}: You deposited ${movement}`); 292 | // } else { 293 | // console.log(`Movement ${i + 1}: You withdrew ${Math.abs(movement)}`); 294 | // } 295 | // } 296 | 297 | // //for each method 298 | // movements.forEach(function (mov, i, arr) { 299 | // if (mov > 0) { 300 | // console.log(`Movement ${i + 1}: You deposited ${mov}`); 301 | // } else { 302 | // console.log(`Movement ${i + 1}: You withdrew ${Math.abs(mov)}`); 303 | // } 304 | // }); 305 | 306 | //with maps 307 | // const currencies = new Map([ 308 | // ['USD', 'United States dollar'], 309 | // ['EUR', 'Euro'], 310 | // ['GBP', 'Pound sterling'], 311 | // ]); 312 | 313 | // currencies.forEach(function (value, key, map) { 314 | // console.log(`${key}: ${value}`); 315 | // }); 316 | 317 | // //set 318 | // const currenciesUnique = new Set(['USD', 'GBP', 'USD', 'EUR', 'EUR']); 319 | // console.log(currenciesUnique); 320 | // currenciesUnique.forEach(function (value, key, map) { 321 | // console.log(`${key}: ${value}`); 322 | // }); 323 | 324 | //>=3 adult 325 | //<3 pupppy 326 | 327 | // const dogsJulia = [3, 5, 2, 12, 7]; 328 | // const dogsKate = [4, 1, 15, 8, 3]; 329 | // const correctJulia = dogsJulia.slice(1, 4); 330 | 331 | // const arr = [...correctJulia, ...dogsKate]; 332 | 333 | // arr.forEach(function (dogs, i) { 334 | // if (dogs >= 3) { 335 | // console.log(`Dog number ${i + 1}: is an adult, and is ${i} years old `); 336 | // } else { 337 | // console.log(`Dog number ${i + 1}: is puppy, and is ${i} years old `); 338 | // } 339 | // }); 340 | 341 | // const eurToUsd = 1.1; 342 | 343 | // const movementsUSD = movements.map(mov => mov * eurToUsd); 344 | // console.log(movementsUSD); 345 | 346 | // const movementsDescriptions = movements.map( 347 | // (mov, i) => 348 | // `Movement ${i + 1}: You ${mov > 0 ? 'deposited' : 'withdrew'} ${Math.abs( 349 | // mov 350 | // )}` 351 | // ); 352 | // 353 | 354 | // const deposits = movements.filter(function (mov) { 355 | // return mov > 0; 356 | // }); 357 | 358 | // console.log(deposits); //[200, 450, 3000, 70, 1300] 359 | 360 | // const withdrawals = movements.filter(mov => mov < 0); 361 | // console.log(withdrawals); //[-400, -650, -130] 362 | 363 | // console.log(movements); 364 | 365 | // const balance = movements.reduce(function (acc, cur, i, arr) { 366 | // console.log(`Iteration ${i}: ${acc}`); 367 | // return acc + cur; 368 | // }, 0); 369 | // console.log(balance); 370 | 371 | // const balance = movements.reduce((acc, cur) => acc + cur, 0); 372 | // console.log(balance); 373 | 374 | //maximum value 375 | // const max = movements.reduce((acc, mov) => { 376 | // if (acc > mov) return acc; 377 | // else return mov; 378 | // }, movements[0]); 379 | // console.log(max); 380 | 381 | // const ages = [5, 2, 4, 1, 15, 8, 3]; 382 | // function calcAverageHumanAge() { 383 | // if (ages <= 2) { 384 | // return `humanAge = 2*${ages}`; 385 | // } 386 | // if (ages > 2) { 387 | // return `humanAge = 16 + ${ages}*4`; 388 | // } 389 | // } 390 | // calcAverageHumanAge(ages); 391 | 392 | // const calcAverageHumanAge = function (ages) { 393 | // const humanAges = ages.map(age => (age <= 2 ? 2 * age : 16 + age * 4)); 394 | // const adultDogs = humanAges.filter(dog => dog >= 18); 395 | 396 | // const average = 397 | // adultDogs.reduce((acc, age) => acc + age, 0) / adultDogs.length; 398 | // }; 399 | 400 | // const calcAverageHumanAge = ages => 401 | // ages 402 | // .map(age => (age <= 2 ? 2 * age : 16 + age * 4)) 403 | // .filter(age => age >= 18) 404 | // .reduce((acc, age, i, arr) => acc + age / arr.length, 0); 405 | 406 | // const avg1 = calcAverageHumanAge([5, 2, 4, 1, 15, 8, 3]); 407 | // console.log(avg1); 408 | 409 | // const eurToUsd = 1.1; 410 | 411 | // const totalDeposistsUSD = movements 412 | // .filter(mov => mov > 0) 413 | // .map(mov => mov * eurToUsd) 414 | // .reduce((acc, mov) => acc + mov, 0); 415 | // console.log(totalDeposistsUSD); 416 | 417 | // const firstWithdrawl = movements.find(mov => mov < 0); 418 | // console.log(firstWithdrawl); 419 | 420 | // const account = accounts.find(acc => acc.owner === 'Jessica Davis'); 421 | // console.log(account); 422 | 423 | // console.log(movements); 424 | 425 | // console.log(movements.includes(-130)); 426 | 427 | // console.log(movements.some(mov => mov === -130)); 428 | 429 | // const anyDeposists = console.log(movements.some(mov => mov > 100)); 430 | 431 | //every 432 | // console.log(movements.every(mov => mov > 0)); 433 | 434 | // console.log(account4.movements.every(mov => mov > 0)); 435 | 436 | //separate callback 437 | 438 | // const deposists = mov => mov > 0; 439 | // console.log(movements.some(deposists)); 440 | // console.log(movements.find(deposists)); 441 | // console.log(movements.every(deposists)); 442 | // console.log(movements.filter(deposists)); 443 | 444 | // const arr = [[1, 2, 3], [4, 5, 6], 7, 8]; 445 | // console.log(arr.flat()); 446 | 447 | // const arrDeep = [[[1, 2], 3], [4, [5, 6]], 7, 8]; 448 | // console.log(arrDeep.flat()); 449 | // console.log(arrDeep.flat(2)); 450 | 451 | // const accountMovements = accounts.map(acc => acc.movements); 452 | // const allMovements = accountMovements.flat(); 453 | // const overalBalance = allMovements.reduce((acc, mov) => acc + mov, 0); 454 | // console.log(overalBalance); 455 | 456 | // const overalBalance = accounts 457 | // .map(acc => acc.movements) 458 | // .flat() 459 | // .reduce((acc, mov) => acc + mov, 0); 460 | // console.log(overalBalance); 461 | 462 | // //flatmap 463 | // const overalBalance = accounts 464 | // .flatMap(acc => acc.movements) 465 | // .reduce((acc, mov) => acc + mov, 0); 466 | // console.log(overalBalance); 467 | 468 | // //strings 469 | // const owners = ['Jonas', 'Zach', 'Adam', 'Martha']; 470 | // console.log(owners.sort()); 471 | // console.log(owners); 472 | 473 | // //numbers 474 | // console.log(movements); 475 | // console.log(movements.sort()); 476 | 477 | //ascending 478 | // movements.sort((a, b) => { 479 | // if (a > b) return 1; 480 | // if (a < b) return -1; 481 | // }); 482 | // console.log(movements); 483 | 484 | // //descending 485 | // movements.sort((a, b) => { 486 | // if (a > b) return -1; 487 | // if (a < b) return 1; 488 | // }); 489 | // console.log(movements); 490 | 491 | // //ascending 492 | // movements.sort((a, b) => a - b); 493 | // console.log(movements); 494 | 495 | // //descending 496 | // movements.sort((a, b) => b - a); 497 | // console.log(movements); 498 | 499 | // const arr = [1, 2, 3, 4, 5, 6, 7]; //[1, 2, 3, 4, 5, 6, 7] 500 | // console.log(new Array(1, 2, 3, 4, 5, 6, 7)); //[1, 2, 3, 4, 5, 6, 7] 501 | 502 | // const x = new Array(7); 503 | // console.log(x); //[empty × 7] 504 | 505 | // // console.log(x.map(() => 5)); //[empty × 7] 506 | // // console.log(x.fill(1)); //[1, 1, 1, 1, 1, 1, 1] 507 | 508 | // x.fill(1, 3); //[empty × 3, 1, 1, 1, 1] 509 | // x.fill(1, 3, 5); //[empty × 3, 1, 1, empty × 2] 510 | // console.log(x); 511 | 512 | // arr.fill(23, 2, 6); 513 | // console.log(arr); //[1, 2, 23, 23, 23, 23, 7] 514 | 515 | // //Array.from 516 | // const y = Array.from({ length: 7 }, () => 1); 517 | // console.log(y); //[1, 1, 1, 1, 1, 1, 1] 518 | 519 | // const z = Array.from({ length: 7 }, (_, i) => i + 1); 520 | // console.log(z); //[1, 2, 3, 4, 5, 6, 7] 521 | 522 | //arraymethod practice 523 | //1. 524 | // const bankDepositSum = accounts 525 | // .flatMap(acc => acc.movements) 526 | // .filter(acc => acc > 0) 527 | // .reduce((sum, cur) => sum + cur, 0); 528 | // console.log(bankDepositSum); //25180 529 | 530 | //2. 531 | // const numDeposits1000 = accounts 532 | // .flatMap(acc => acc.movements) 533 | // .filter(acc => acc > 1000).length; 534 | 535 | // console.log(numDeposits1000); //5 536 | 537 | // const numDeposits1000 = accounts 538 | // .flatMap(acc => acc.movements) 539 | // .reduce((count, cur) => (cur >= 1000 ? ++count : count), 0); 540 | // console.log(numDeposits1000); 541 | 542 | // let a = 10; 543 | // console.log(a++); //10 544 | // console.log(a); //11 545 | 546 | //3. creating a new object using reduce 547 | // const { deposits, withdrawls } = accounts 548 | // .flatMap(acc => acc.movements) 549 | // .reduce( 550 | // (sums, cur) => { 551 | // // cur > 0 ? (sums.deposits += cur) : (sums.withdrawls += cur); 552 | 553 | // sums[cur > 0 ? 'deposits' : 'withdrawls'] += cur; 554 | // return sums; 555 | // }, 556 | // { deposits: 0, withdrawls: 0 } 557 | // ); 558 | // console.log(deposits, withdrawls); 559 | 560 | //4. 561 | //this is a nice title -> This Is a Nice Title 562 | //if exception is first word 563 | 564 | const dogs = [ 565 | { weight: 22, curFood: 250, owners: ['Alice', 'Bob'] }, 566 | { weight: 8, curFood: 200, owners: ['Matilda'] }, 567 | { weight: 13, curFood: 275, owners: ['Sarah', 'John'] }, 568 | { weight: 32, curFood: 340, owners: ['Michael'] }, 569 | ]; 570 | 571 | dogs.forEach(dog => (dog.recFood = Math.trunc(dog.weight ** 0.75 * 28))); 572 | console.log(dogs); 573 | 574 | //2 575 | const dogSarah = dogs.find(dog => dog.owners.includes('Sarah')); 576 | console.log(dogSarah); 577 | console.log( 578 | `Sarah's dog is eating too ${ 579 | dogSarah.curFood > dogSarah.recFood ? 'much' : 'little' 580 | }` 581 | ); 582 | 583 | //3. 584 | 585 | const ownersEatTooMuch = dogs 586 | .filter(dog => dog.curFood > dog.recFood) 587 | .flatMap(dog => dog.owners); 588 | console.log(ownersEatTooMuch); 589 | 590 | const ownersEatTooLittle = dogs 591 | .filter(dog => dog.curFood < dog.recFood) 592 | .flatMap(dog => dog.owners); 593 | console.log(ownersEatTooLittle); 594 | 595 | //4. 596 | console.log(`${ownersEatTooMuch.join(' and ')}'s dogs eat too much`); 597 | console.log(`${ownersEatTooLittle.join(' and ')}'s dogs eat too little`); 598 | 599 | //5 current > (recommended * 0.90) && current < (recommended *1.10) 600 | 601 | // console.log( 602 | // dogs.some( 603 | const checkOkay = dogs => 604 | dogs.curFood > dogs.recFood * 0.9 && dogs.curFood < dogs.recFood * 1.1; 605 | console.log(dogs.some(checkOkay)); 606 | 607 | //7 608 | console.log(dogs.filter(checkOkay)); 609 | 610 | //8 611 | const dogsCopy = dogs.slice(); 612 | console.log(dogsCopy); 613 | -------------------------------------------------------------------------------- /bankist/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Use this CSS to learn some intersting techniques, 3 | * in case you're wondering how I built the UI. 4 | * Have fun! 😁 5 | */ 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | box-sizing: inherit; 11 | } 12 | 13 | html { 14 | font-size: 62.5%; 15 | box-sizing: border-box; 16 | } 17 | 18 | body { 19 | font-family: 'Poppins', sans-serif; 20 | color: #444; 21 | background-color: #f3f3f3; 22 | height: 100vh; 23 | padding: 2rem; 24 | } 25 | 26 | nav { 27 | display: flex; 28 | justify-content: space-between; 29 | align-items: center; 30 | padding: 0 2rem; 31 | } 32 | 33 | .welcome { 34 | font-size: 1.9rem; 35 | font-weight: 500; 36 | } 37 | 38 | .logo { 39 | height: 5.25rem; 40 | } 41 | 42 | .login { 43 | display: flex; 44 | } 45 | 46 | .login__input { 47 | border: none; 48 | padding: 0.5rem 2rem; 49 | font-size: 1.6rem; 50 | font-family: inherit; 51 | text-align: center; 52 | width: 12rem; 53 | border-radius: 10rem; 54 | margin-right: 1rem; 55 | color: inherit; 56 | border: 1px solid #fff; 57 | transition: all 0.3s; 58 | } 59 | 60 | .login__input:focus { 61 | outline: none; 62 | border: 1px solid #ccc; 63 | } 64 | 65 | .login__input::placeholder { 66 | color: #bbb; 67 | } 68 | 69 | .login__btn { 70 | border: none; 71 | background: none; 72 | font-size: 2.2rem; 73 | color: inherit; 74 | cursor: pointer; 75 | transition: all 0.3s; 76 | } 77 | 78 | .login__btn:hover, 79 | .login__btn:focus, 80 | .btn--sort:hover, 81 | .btn--sort:focus { 82 | outline: none; 83 | color: #777; 84 | } 85 | 86 | /* MAIN */ 87 | .app { 88 | position: relative; 89 | max-width: 100rem; 90 | margin: 4rem auto; 91 | display: grid; 92 | grid-template-columns: 4fr 3fr; 93 | grid-template-rows: auto repeat(3, 15rem) auto; 94 | gap: 2rem; 95 | 96 | /* NOTE This creates the fade in/out anumation */ 97 | opacity: 0; 98 | transition: all 1s; 99 | } 100 | 101 | .balance { 102 | grid-column: 1 / span 2; 103 | display: flex; 104 | align-items: flex-end; 105 | justify-content: space-between; 106 | margin-bottom: 2rem; 107 | } 108 | 109 | .balance__label { 110 | font-size: 2.2rem; 111 | font-weight: 500; 112 | margin-bottom: -0.2rem; 113 | } 114 | 115 | .balance__date { 116 | font-size: 1.4rem; 117 | color: #888; 118 | } 119 | 120 | .balance__value { 121 | font-size: 4.5rem; 122 | font-weight: 400; 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 | .movements__row { 134 | padding: 2.25rem 4rem; 135 | display: flex; 136 | align-items: center; 137 | border-bottom: 1px solid #eee; 138 | } 139 | 140 | .movements__type { 141 | font-size: 1.1rem; 142 | text-transform: uppercase; 143 | font-weight: 500; 144 | color: #fff; 145 | padding: 0.1rem 1rem; 146 | border-radius: 10rem; 147 | margin-right: 2rem; 148 | } 149 | 150 | .movements__date { 151 | font-size: 1.1rem; 152 | text-transform: uppercase; 153 | font-weight: 500; 154 | color: #666; 155 | } 156 | 157 | .movements__type--deposit { 158 | background-image: linear-gradient(to top left, #39b385, #9be15d); 159 | } 160 | 161 | .movements__type--withdrawal { 162 | background-image: linear-gradient(to top left, #e52a5a, #ff585f); 163 | } 164 | 165 | .movements__value { 166 | font-size: 1.7rem; 167 | margin-left: auto; 168 | } 169 | 170 | /* SUMMARY */ 171 | .summary { 172 | grid-row: 5 / 6; 173 | display: flex; 174 | align-items: baseline; 175 | padding: 0 0.3rem; 176 | margin-top: 1rem; 177 | } 178 | 179 | .summary__label { 180 | font-size: 1.2rem; 181 | font-weight: 500; 182 | text-transform: uppercase; 183 | margin-right: 0.8rem; 184 | } 185 | 186 | .summary__value { 187 | font-size: 2.2rem; 188 | margin-right: 2.5rem; 189 | } 190 | 191 | .summary__value--in, 192 | .summary__value--interest { 193 | color: #66c873; 194 | } 195 | 196 | .summary__value--out { 197 | color: #f5465d; 198 | } 199 | 200 | .btn--sort { 201 | margin-left: auto; 202 | border: none; 203 | background: none; 204 | font-size: 1.3rem; 205 | font-weight: 500; 206 | cursor: pointer; 207 | } 208 | 209 | /* OPERATIONS */ 210 | .operation { 211 | border-radius: 1rem; 212 | padding: 3rem 4rem; 213 | color: #333; 214 | } 215 | 216 | .operation--transfer { 217 | background-image: linear-gradient(to top left, #ffb003, #ffcb03); 218 | } 219 | 220 | .operation--loan { 221 | background-image: linear-gradient(to top left, #39b385, #9be15d); 222 | } 223 | 224 | .operation--close { 225 | background-image: linear-gradient(to top left, #e52a5a, #ff585f); 226 | } 227 | 228 | h2 { 229 | margin-bottom: 1.5rem; 230 | font-size: 1.7rem; 231 | font-weight: 600; 232 | color: #333; 233 | } 234 | 235 | .form { 236 | display: grid; 237 | grid-template-columns: 2.5fr 2.5fr 1fr; 238 | grid-template-rows: auto auto; 239 | gap: 0.4rem 1rem; 240 | } 241 | 242 | /* Exceptions for interst */ 243 | .form.form--loan { 244 | grid-template-columns: 2.5fr 1fr 2.5fr; 245 | } 246 | .form__label--loan { 247 | grid-row: 2; 248 | } 249 | /* End exceptions */ 250 | 251 | .form__input { 252 | width: 100%; 253 | border: none; 254 | background-color: rgba(255, 255, 255, 0.4); 255 | font-family: inherit; 256 | font-size: 1.5rem; 257 | text-align: center; 258 | color: #333; 259 | padding: 0.3rem 1rem; 260 | border-radius: 0.7rem; 261 | transition: all 0.3s; 262 | } 263 | 264 | .form__input:focus { 265 | outline: none; 266 | background-color: rgba(255, 255, 255, 0.6); 267 | } 268 | 269 | .form__label { 270 | font-size: 1.3rem; 271 | text-align: center; 272 | } 273 | 274 | .form__btn { 275 | border: none; 276 | border-radius: 0.7rem; 277 | font-size: 1.8rem; 278 | background-color: #fff; 279 | cursor: pointer; 280 | transition: all 0.3s; 281 | } 282 | 283 | .form__btn:focus { 284 | outline: none; 285 | background-color: rgba(255, 255, 255, 0.8); 286 | } 287 | 288 | .logout-timer { 289 | padding: 0 0.3rem; 290 | margin-top: 1.9rem; 291 | text-align: right; 292 | font-size: 1.25rem; 293 | } 294 | 295 | .timer { 296 | font-weight: 600; 297 | } 298 | -------------------------------------------------------------------------------- /blackJack/backgroundImage/casino table.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/blackJack/backgroundImage/casino table.jpg -------------------------------------------------------------------------------- /blackJack/index.css: -------------------------------------------------------------------------------- 1 | body{ 2 | position: relative; 3 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 4 | display: flex; 5 | flex-direction: column; 6 | background-size: cover; 7 | width: 500px; 8 | height: 400px; 9 | align-items: center; 10 | justify-content: center; 11 | } 12 | 13 | img{ 14 | position: absolute; 15 | z-index: -10; 16 | height: 400px; 17 | width: 500px; 18 | } 19 | 20 | h1{ 21 | margin-top: 0px; 22 | padding-top: 20px; 23 | color: goldenrod; 24 | font-weight: bold; 25 | } 26 | 27 | p{ 28 | color: white; 29 | font-weight: bold; 30 | } 31 | 32 | .italic{ 33 | font-style: italic; 34 | } 35 | 36 | button{ 37 | color: #045127; 38 | background-color: goldenrod; 39 | width: 150px; 40 | height: 40px; 41 | padding: 5px 10px; 42 | margin-bottom: 10px; 43 | border: 1px solid #045127; 44 | font-weight: bold; 45 | border-radius: 5px; 46 | } -------------------------------------------------------------------------------- /blackJack/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Black Jack 9 | 10 | 11 | 12 |

Blackjack

13 |

Want to play a round?

14 |

Cards:

15 |

Sum:

16 | 17 | 18 |

19 | 20 | 21 | -------------------------------------------------------------------------------- /blackJack/index.js: -------------------------------------------------------------------------------- 1 | let cards = [] 2 | 3 | let sum = 0 4 | let hasBlackJack = false; 5 | let isAlive = false; 6 | let message = ''; 7 | 8 | let messageEl = document.getElementById('message-el') 9 | let sumEl = document.getElementById('sum-el') 10 | let cardsEl = document.getElementById('cards-el'); 11 | let playerEl = document.getElementById('player-el') 12 | 13 | let player = { 14 | name: 'Sarfraz', 15 | chips: '150' 16 | } 17 | 18 | playerEl.textContent = player.name + ': $' + player.chips 19 | 20 | function getRandonCard(){ 21 | 22 | let randomNumber = Math.floor( Math.random()*13 ) + 1; 23 | 24 | if(randomNumber === 1){ 25 | randomNumber = 11; 26 | } 27 | else if(randomNumber > 10){ 28 | randomNumber = 10; 29 | } 30 | else{ 31 | randomNumber; 32 | } 33 | 34 | return randomNumber; 35 | 36 | } 37 | 38 | function startGame(){ 39 | let firstCard = getRandonCard(); 40 | let secondCard = getRandonCard(); 41 | isAlive= true; 42 | 43 | sum= firstCard + secondCard; 44 | cards = [firstCard, secondCard]; 45 | 46 | renderGame(); 47 | } 48 | 49 | function renderGame(){ 50 | 51 | cardsEl.textContent = 'Cards: '; 52 | for(let i=0; i 2 | 3 | 4 | 5 | 6 | 7 | Calculator 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /calculator/script.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const numbersBtn = document.querySelectorAll('[data-number]') 4 | const operationsBtn = document.querySelectorAll('[data-operation]') 5 | const allClearBtn = document.querySelector('[data-all-clear]') 6 | const equalsBtn = document.querySelector('[data-equals]') 7 | const deleteBtn = document.querySelector('[data-delete]') 8 | console.log(deleteBtn, allClearBtn) 9 | const previousOperandTextELement = document.querySelector( 10 | '[data-previous-operand]' 11 | ) 12 | const currentOperandTextELement = document.querySelector( 13 | '[data-current-operand]' 14 | ) 15 | 16 | class Calculator { 17 | constructor(previousOperandTextELement, currentOperandTextELement) { 18 | this.previousOperandTextELement = previousOperandTextELement 19 | this.currentOperandTextELement = currentOperandTextELement 20 | this.clear() 21 | } 22 | 23 | clear() { 24 | this.previousOperand = '' 25 | this.currentOperand = '' 26 | this.operation = undefined 27 | } 28 | 29 | delete() { 30 | this.currentOperand = this.currentOperand.toString().slice(0, -1) 31 | } 32 | 33 | appendNumber(number) { 34 | if (number === '.' && this.currentOperand.includes('.')) return 35 | this.currentOperand = this.currentOperand.toString() + number.toString() 36 | } 37 | 38 | chooseOperation(operation) { 39 | if (this.currentOperand === '') return 40 | if (this.previousOperand !== '') { 41 | this.compute() 42 | } 43 | this.operation = operation 44 | this.previousOperand = this.currentOperand 45 | this.currentOperand = '' 46 | } 47 | 48 | compute() { 49 | let result 50 | const current = parseFloat(this.currentOperand) 51 | const previous = parseFloat(this.previousOperand) 52 | if (isNaN(previous) || isNaN(current)) return 53 | 54 | switch (this.operation) { 55 | case '+': 56 | result = previous + current 57 | break 58 | case '-': 59 | result = previous - current 60 | break 61 | case '*': 62 | result = previous * current 63 | break 64 | case '÷': 65 | result = previous / current 66 | break 67 | case '%': 68 | result = (previous / 100) * current 69 | break 70 | default: 71 | return 72 | } 73 | 74 | this.currentOperand = result 75 | this.operation = '' 76 | this.previousOperand = '' 77 | } 78 | 79 | updateDisplay() { 80 | this.currentOperandTextELement.textContent = this.currentOperand 81 | if (this.operation !== undefined) { 82 | this.previousOperandTextELement.textContent = `${this.previousOperand} ${this.operation}` 83 | } else { 84 | this.previousOperandTextELement.textContent = '' 85 | } 86 | } 87 | } 88 | 89 | const calculator = new Calculator( 90 | previousOperandTextELement, 91 | currentOperandTextELement 92 | ) 93 | 94 | numbersBtn.forEach(btn => { 95 | btn.addEventListener('click', () => { 96 | calculator.appendNumber(btn.textContent) 97 | calculator.updateDisplay() 98 | }) 99 | }) 100 | 101 | operationsBtn.forEach(btn => { 102 | btn.addEventListener('click', () => { 103 | calculator.chooseOperation(btn.textContent) 104 | calculator.updateDisplay() 105 | }) 106 | }) 107 | 108 | equalsBtn.addEventListener('click', () => { 109 | calculator.compute() 110 | calculator.updateDisplay() 111 | // calculator.clear() 112 | }) 113 | 114 | allClearBtn.addEventListener('click', () => { 115 | calculator.clear() 116 | calculator.updateDisplay() 117 | }) 118 | 119 | deleteBtn.addEventListener('click', () => { 120 | calculator.delete() 121 | calculator.updateDisplay() 122 | }) 123 | -------------------------------------------------------------------------------- /calculator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Radio+Canada&display=swap'); 2 | 3 | *, 4 | *::after, 5 | *::before { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | font-family: 'Radio Canada', sans-serif; 10 | } 11 | 12 | body { 13 | background: linear-gradient(to bottom, #ffffff, #d6dedc); 14 | /* background-color: #eef0f1; */ 15 | } 16 | 17 | .calculator { 18 | margin-top: 10px; 19 | background-color: #fafafa; 20 | padding: 0 1.9rem 0; 21 | position: absolute; 22 | border-radius: 2rem; 23 | box-shadow: 0 2rem 5rem rgb(0 0 0 / 25%); 24 | left: 50%; 25 | transform: translateX(-50%); 26 | width: fit-content; 27 | height: 44rem; 28 | } 29 | 30 | .calculator-grid { 31 | display: grid; 32 | justify-content: center; 33 | align-content: center; 34 | gap: 0.4rem; 35 | min-height: 100vh; 36 | grid-template-columns: repeat(4, 5rem); 37 | grid-template-rows: minmax(120px, auto) repeat(6, 5rem); 38 | } 39 | 40 | .calculator-grid > button { 41 | cursor: pointer; 42 | font-size: 1.5rem; 43 | outline: none; 44 | border: none; 45 | box-shadow: 5px 5px 5px; 46 | border-radius: 2rem; 47 | background-color: #3a3b3d; 48 | color: #f2f3f5; 49 | } 50 | 51 | .span-two { 52 | grid-row: span 2; 53 | } 54 | 55 | .output { 56 | grid-column: 1/-1; 57 | display: flex; 58 | justify-content: space-around; 59 | align-items: flex-end; 60 | flex-direction: column; 61 | padding: 10px; 62 | word-wrap: break-word; 63 | word-break: break-all; 64 | } 65 | 66 | .output .previous-operand { 67 | color: #d0ced2; 68 | font-size: 1.2rem; 69 | } 70 | .output .current-operand { 71 | color: #5a6770; 72 | font-size: 3.3rem; 73 | } 74 | 75 | button.equals { 76 | background: #972cee; 77 | } 78 | button.equals:hover { 79 | background-color: #8020cf; 80 | } 81 | 82 | button.operators { 83 | background-color: #dfd5e8; 84 | color: #aa7fbc; 85 | } 86 | button.operators:hover { 87 | background-color: #cab7db; 88 | color: #8f65a1; 89 | } 90 | 91 | button.operators-2 { 92 | background-color: #f4f0e4; 93 | color: #c3ac7d; 94 | } 95 | button.operators-2:hover { 96 | background-color: #e4dcc2; 97 | color: #a99266; 98 | } 99 | 100 | button.clear { 101 | background-color: #fdb82d; 102 | color: #f2f3f5; 103 | } 104 | 105 | button.clear:hover { 106 | background-color: #f68726; 107 | color: #f2f3f5; 108 | } 109 | 110 | button.numbers { 111 | background-color: #f3f4f6; 112 | color: #a1a8ab; 113 | } 114 | button.numbers:hover { 115 | background-color: whitesmoke; 116 | color: #3a3b3d; 117 | } 118 | 119 | button.del { 120 | background-color: #808183; 121 | box-shadow: 1px 5px 5px; 122 | } 123 | button.del:hover { 124 | background-color: #424347; 125 | color: whitesmoke; 126 | } 127 | -------------------------------------------------------------------------------- /carousel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Carousel 5 | 6 | 7 |
8 |
9 | 12 |
13 |
14 | 17 |
18 |
19 | 22 |
23 | 24 |
25 | 28 | 29 |
30 |
31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /carousel/index.js: -------------------------------------------------------------------------------- 1 | const slides = document.getElementsByClassName("carousel-item"); 2 | let slidePosition = 0; 3 | const totalSlides = slides.length; 4 | 5 | document 6 | .getElementById("carousel-button-next") 7 | .addEventListener("click", moveToNextSlide); 8 | document 9 | .getElementById("carousel-button-prev") 10 | .addEventListener("click", moveToPrevSlide); 11 | 12 | function hideAllSlides() { 13 | for (let slide of slides) { 14 | slide.classList.remove("carousel-item-visible"); 15 | slide.classList.add("carousel-item-hidden"); 16 | } 17 | } 18 | 19 | function moveToNextSlide() { 20 | hideAllSlides(); 21 | 22 | if (slidePosition === totalSlides - 1) { 23 | slidePosition = 0; 24 | } else { 25 | slidePosition++; 26 | } 27 | 28 | slides[slidePosition].classList.add("carousel-item-visible"); 29 | } 30 | 31 | function moveToPrevSlide() { 32 | hideAllSlides(); 33 | 34 | if (slidePosition === 0) { 35 | slidePosition = totalSlides - 1; 36 | } else { 37 | slidePosition--; 38 | } 39 | 40 | slides[slidePosition].classList.add("carousel-item-visible"); 41 | } 42 | -------------------------------------------------------------------------------- /carousel/styles.css: -------------------------------------------------------------------------------- 1 | .carousel { 2 | max-width: 600px; 3 | position: relative; 4 | } 5 | 6 | .carousel .carousel-item, 7 | .carousel .carousel-item-hidden { 8 | display: none; 9 | } 10 | 11 | .carousel .carousel-item-visible { 12 | display: block; 13 | animation: fadeVisibility 0.5s; 14 | } 15 | 16 | .carousel .carousel-item img { 17 | width: 100%; 18 | max-width: 600px; 19 | height: auto; 20 | } 21 | 22 | .carousel .carousel-actions { 23 | display: flex; 24 | width: 100%; 25 | justify-content: space-between; 26 | position: absolute; 27 | top: 50%; 28 | transform: translateY(-50%); 29 | } 30 | 31 | .carousel .carousel-actions button { 32 | border-radius: 50px; 33 | background-color: white; 34 | border: 0; 35 | font-size: 16px; 36 | font-weight: bold; 37 | cursor: pointer; 38 | width: 40px; 39 | height: 40px; 40 | } 41 | 42 | .carousel .carousel-actions button#carousel-button-prev { 43 | margin-left: 20px; 44 | } 45 | 46 | .carousel .carousel-actions button#carousel-button-next { 47 | margin-right: 20px; 48 | } 49 | 50 | @keyframes fadeVisibility { 51 | 0% { 52 | opacity: 0; 53 | } 54 | 100% { 55 | opacity: 1; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | Clock 16 | 17 | 18 |
19 |
20 |
21 |
22 |
1
23 |
2
24 |
3
25 |
4
26 |
5
27 |
6
28 |
7
29 |
8
30 |
9
31 |
10
32 |
11
33 |
12
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /clock/script.js: -------------------------------------------------------------------------------- 1 | setInterval(setClock, 1000); 2 | 3 | const hourHand = document.querySelector("[data-hour-hand]"); 4 | const minuteHand = document.querySelector("[data-minute-hand]"); 5 | const secondHand = document.querySelector("[data-second-hand]"); 6 | 7 | //setting the clock 8 | function setClock() { 9 | const currentDate = new Date(); 10 | const seconds = currentDate.getSeconds() / 60; 11 | const minutes = (seconds + currentDate.getMinutes()) / 60; 12 | const hours = (minutes + currentDate.getHours()) / 12; 13 | clockRotation(secondHand, seconds); 14 | clockRotation(minuteHand, minutes); 15 | clockRotation(hourHand, hours); 16 | } 17 | 18 | //for rotating the elements 19 | function clockRotation(element, rotationRatio) { 20 | element.style.setProperty("--rotation", rotationRatio * 360); 21 | } 22 | s; 23 | setClock(); 24 | -------------------------------------------------------------------------------- /clock/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | font-weight: bold; 7 | font-size: 30px; 8 | } 9 | 10 | body { 11 | background: rgb(246, 162, 199); 12 | background: radial-gradient( 13 | circle, 14 | rgba(246, 162, 199, 1) 20%, 15 | rgba(150, 182, 221, 1) 100% 16 | ); 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | min-height: 100vh; 21 | overflow: hidden; 22 | } 23 | 24 | .clock { 25 | width: 400px; 26 | height: 400px; 27 | background-color: rgba(255, 255, 255, 0.7); 28 | border-radius: 50%; 29 | border: 2px solid black; 30 | position: relative; 31 | } 32 | 33 | .clock .number { 34 | /* --rotation: 0; */ 35 | position: absolute; 36 | width: 100%; 37 | height: 100%; 38 | text-align: center; 39 | transform: rotate(var(--rotation)); 40 | } 41 | 42 | .clock .number1 { 43 | --rotation: 30deg; 44 | } 45 | .clock .number2 { 46 | --rotation: 60deg; 47 | } 48 | .clock .number3 { 49 | --rotation: 90deg; 50 | } 51 | .clock .number4 { 52 | --rotation: 120deg; 53 | } 54 | .clock .number5 { 55 | --rotation: 150deg; 56 | } 57 | .clock .number6 { 58 | --rotation: 180deg; 59 | } 60 | .clock .number7 { 61 | --rotation: 210deg; 62 | } 63 | 64 | .clock .number8 { 65 | --rotation: 240deg; 66 | } 67 | .clock .number9 { 68 | --rotation: 270deg; 69 | } 70 | .clock .number10 { 71 | --rotation: 300deg; 72 | } 73 | .clock .number11 { 74 | --rotation: 330deg; 75 | } 76 | 77 | .clock .hand { 78 | --rotation: 0; 79 | position: absolute; 80 | bottom: 50%; 81 | left: 50%; 82 | 83 | border: 1px solid white; 84 | border-top-right-radius: 10px; 85 | border-top-left-radius: 10px; 86 | background-color: black; 87 | transform-origin: bottom; 88 | z-index: 10; 89 | /* converting value in degree */ 90 | transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg)); 91 | } 92 | 93 | .clock::after { 94 | content: ""; 95 | position: absolute; 96 | background-color: black; 97 | z-index: 11; 98 | width: 15px; 99 | height: 15px; 100 | top: 50%; 101 | left: 50%; 102 | transform: translate(-50%, -50%); 103 | border-radius: 50%; 104 | } 105 | 106 | .clock .hand.hour { 107 | width: 10px; 108 | height: 35%; 109 | background-color: black; 110 | } 111 | .clock .hand.second { 112 | width: 3px; 113 | height: 45%; 114 | background-color: red; 115 | } 116 | 117 | .clock .hand.minute { 118 | width: 7px; 119 | height: 40%; 120 | background-color: black; 121 | } 122 | -------------------------------------------------------------------------------- /diceChallenge/dicee.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dicee 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Refresh Me

14 | 15 |
16 |

Player 1

17 | 18 |
19 | 20 |
21 |

Player 2

22 | 23 |
24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /diceChallenge/index.js: -------------------------------------------------------------------------------- 1 | var randomNumber1 = Math.floor(Math.random()* 6) + 1; //1-6 2 | 3 | var randomDiceImage = "dice" + randomNumber1 + ".png"; //dice1.png - dice6.png 4 | 5 | var randomImageSource = "images/" + randomDiceImage; //images/dice1.png - images/dice6.png 6 | 7 | var image1 = document.querySelectorAll("img")[0]; 8 | 9 | image1.setAttribute("src",randomImageSource); 10 | 11 | var randomNumber2 = Math.floor(Math.random()* 6) +1; 12 | 13 | var randomImageSource2 = "images/dice" + randomNumber2 + ".png"; 14 | 15 | var image2 = document.querySelectorAll("img")[1].setAttribute("src",randomImageSource2 ); 16 | 17 | //if player 1 wins; 18 | if (randomNumber1 > randomNumber2) { 19 | document.querySelector("h1").innerHTML = "🚩 Player 1 WINS!"; 20 | } 21 | else if (randomNumber1 < randomNumber2) { 22 | document.querySelector("h1").innerHTML = "🚩 Player 2 WINS!"; 23 | } 24 | else { 25 | document.querySelector("h1").innerHTML = "DRAW!" 26 | } 27 | -------------------------------------------------------------------------------- /diceChallenge/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 70%; 3 | margin: auto; 4 | text-align: center; 5 | } 6 | 7 | .dice { 8 | text-align: center; 9 | display: inline-block; 10 | 11 | } 12 | 13 | body { 14 | background-color: #393E46; 15 | } 16 | 17 | h1 { 18 | margin: 30px; 19 | font-family: 'Lobster', cursive; 20 | text-shadow: 5px 0 #232931; 21 | font-size: 8rem; 22 | color: #4ECCA3; 23 | } 24 | 25 | p { 26 | font-size: 2rem; 27 | color: #4ECCA3; 28 | font-family: 'Indie Flower', cursive; 29 | } 30 | 31 | img { 32 | width: 80%; 33 | } 34 | 35 | footer { 36 | margin-top: 5%; 37 | color: #EEEEEE; 38 | text-align: center; 39 | font-family: 'Indie Flower', cursive; 40 | 41 | } 42 | -------------------------------------------------------------------------------- /diceGame/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap'); 2 | 3 | html, body { 4 | --color-1: #a8e6cf; 5 | --color-2: #dcedc1; 6 | --color-3: #ffd3b6; 7 | --color-4: #ffaaa5; 8 | --color-5: #ff8b94; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | body { 14 | padding-top: 50px; 15 | background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); 16 | font-family: 'Poppins', sans-serif; 17 | height: 100vh; 18 | color: black; 19 | } 20 | 21 | #message{ 22 | font-size: 40px; 23 | } 24 | 25 | .container { 26 | width: 400px; 27 | text-align: center; 28 | margin: 0 auto; 29 | padding: 50px; 30 | background: rgba( 255, 255, 255, 0.25 ); 31 | box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); 32 | backdrop-filter: blur( 4px ); 33 | -webkit-backdrop-filter: blur( 4px ); 34 | border-radius: 10px; 35 | border: 1px solid rgba( 255, 255, 255, 0.18 ); 36 | } 37 | 38 | .players { 39 | width: 100%; 40 | display: flex; 41 | justify-content: space-around; 42 | } 43 | 44 | .dice { 45 | border-radius: 10px; 46 | width: 100px; 47 | height: 100px; 48 | margin: 0 auto; 49 | font-size: 70px; 50 | display: block; 51 | align-items: center; 52 | justify-content: center; 53 | background: rgba( 255, 255, 255, 0.25 ); 54 | box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); 55 | backdrop-filter: blur( 4px ); 56 | -webkit-backdrop-filter: blur( 4px ); 57 | border-radius: 10px; 58 | border: 1px solid rgba( 255, 255, 255, 0.18 ); 59 | } 60 | 61 | 62 | button { 63 | color: black; 64 | padding: 10px 20px; 65 | font-size: 20px; 66 | margin: 40px auto; 67 | border: none; 68 | font-family: 'Poppins', sans-serif; 69 | cursor: pointer; 70 | background: rgba( 255, 255, 255, 0.25 ); 71 | box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); 72 | backdrop-filter: blur( 4px ); 73 | -webkit-backdrop-filter: blur( 4px ); 74 | border-radius: 10px; 75 | border: 1px solid rgba( 255, 255, 255, 0.18 ); 76 | } 77 | 78 | 79 | */ 80 | button:focus { 81 | outline: none; 82 | } 83 | 84 | .active { 85 | box-shadow: 0 8px 32px 0 rgba(202, 200, 200, 0.75); 86 | } -------------------------------------------------------------------------------- /diceGame/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |

Player 1 Turn

8 |
9 |
10 |

Score: 11 | 0 12 |

13 |
-
14 |
15 |
16 |

Score: 17 | 0 18 |

19 |
-
20 |
21 |
22 | 23 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /diceGame/index.js: -------------------------------------------------------------------------------- 1 | // Create variables for the game state 2 | let player1Score = 0 3 | let player2Score = 0 4 | let player1Turn = true 5 | 6 | // Create variables to store references to the necessary DOM nodes 7 | const player1Dice = document.getElementById("player1Dice") 8 | const player2Dice = document.getElementById("player2Dice") 9 | const player1Scoreboard = document.getElementById("player1Scoreboard") 10 | const player2Scoreboard = document.getElementById("player2Scoreboard") 11 | const message = document.getElementById("message") 12 | const rollBtn = document.getElementById("rollBtn") 13 | const resetBtn = document.getElementById("resetBtn") 14 | 15 | function showResetButton() { 16 | rollBtn.style.display = "none" 17 | resetBtn.style.display = "block" 18 | } 19 | 20 | /* Hook up a click event listener to the Roll Dice Button. */ 21 | rollBtn.addEventListener("click", function() { 22 | const randomNumber = Math.floor(Math.random() * 6) + 1 23 | 24 | if (player1Turn) { 25 | player1Score += randomNumber 26 | player1Scoreboard.textContent = player1Score 27 | player1Dice.textContent = randomNumber 28 | player1Dice.classList.remove("active") 29 | player2Dice.classList.add("active") 30 | message.textContent = "Player 2 Turn" 31 | } else { 32 | player2Score += randomNumber 33 | player2Scoreboard.textContent = player2Score 34 | player2Dice.textContent = randomNumber 35 | player2Dice.classList.remove("active") 36 | player1Dice.classList.add("active") 37 | message.textContent = "Player 1 Turn" 38 | } 39 | 40 | if (player1Score >= 20) { 41 | message.textContent = "Player 1 Won 🥳" 42 | showResetButton() 43 | } else if (player2Score >= 20) { 44 | message.textContent = "Player 2 Won 🎉" 45 | showResetButton() 46 | } 47 | player1Turn = !player1Turn 48 | }) 49 | 50 | resetBtn.addEventListener("click", function(){ 51 | reset() 52 | }) 53 | 54 | function reset() { 55 | player1Score = 0 56 | player2Score = 0 57 | player1Turn = true 58 | player1Scoreboard.textContent = 0 59 | player2Scoreboard.textContent = 0 60 | player1Dice.textContent = "-" 61 | player2Dice.textContent = "-" 62 | message.textContent = "Player 1 Turn" 63 | resetBtn.style.display = "none" 64 | rollBtn.style.display = "block" 65 | player2Dice.classList.remove("active") 66 | player1Dice.classList.add("active") 67 | } 68 | -------------------------------------------------------------------------------- /dragDrop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Drag & Drop 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /dragDrop/index.js: -------------------------------------------------------------------------------- 1 | const active = document.querySelector(".active"); 2 | const inactive = document.querySelectorAll(".inactive"); 3 | 4 | //adding Event Listeners to active container 5 | active.addEventListener("dragstart", (e) => { 6 | active.classList.add("hold"); 7 | setTimeout(() => (active.className = "invisible"), 0); 8 | }); 9 | 10 | active.addEventListener("dragend", () => { 11 | active.className = "active"; 12 | }); 13 | 14 | //adding Event listeners to inactive containers 15 | inactive.forEach((el) => { 16 | el.addEventListener("dragover", (e) => { 17 | e.preventDefault(); 18 | }); 19 | el.addEventListener("dragenter", (e) => { 20 | e.preventDefault(); 21 | //appends hovered class 22 | el.classList.add("hovered"); 23 | }); 24 | el.addEventListener("dragleave", () => { 25 | //replaces with inactive class 26 | el.className = "inactive"; 27 | }); 28 | el.addEventListener("drop", () => { 29 | el.className = "inactive"; 30 | el.append(active); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /dragDrop/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #827397; 3 | } 4 | 5 | .container { 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | margin-top: 30vh; 10 | margin-bottom: 20vh; 11 | } 12 | 13 | .active { 14 | background-image: url("https://source.unsplash.com/random/150x150"); 15 | position: relative; 16 | height: 150px; 17 | width: 150px; 18 | top: 5px; 19 | left: 5px; 20 | cursor: pointer; 21 | } 22 | 23 | .hold { 24 | border: solid 5px #b22727; 25 | } 26 | 27 | .inactive { 28 | display: inline-block; 29 | height: 160px; 30 | width: 160px; 31 | margin: 10px; 32 | border: solid 5px #4d4c7d; 33 | border-radius: 10px; 34 | background: #e9d5ca; 35 | } 36 | 37 | .hovered { 38 | background: #f4f4f4; 39 | border: solid 5px #b22727; 40 | border-style: dashed; 41 | } 42 | 43 | .invisible { 44 | display: none; 45 | } 46 | -------------------------------------------------------------------------------- /dynamicTweetBox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Dynamic Tweet Box 11 | 12 | 13 |
14 |
15 |
16 | What's Happening ? 17 |
18 |
19 |
20 |
21 | public 22 | Everone can reply 23 |
24 |
25 |
26 |
    27 |
  • gif_box
    • 28 |
  • photo_album
    • 29 |
  • location_on
    • 30 |
  • mood
    • 31 |
  • person
    • 32 |
33 |
34 | 100 35 | 36 |
37 |
38 |
39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /dynamicTweetBox/script.js: -------------------------------------------------------------------------------- 1 | const editableInput = document.querySelector(".editable"), 2 | readonlyInput = document.querySelector(".readonly"), 3 | placeholder = document.querySelector(".placeholder"), 4 | counter = document.querySelector(".counter"), 5 | button = document.querySelector("button"); 6 | 7 | editableInput.onkeyup = (e) => { 8 | let element = e.target; //getting keyup element 9 | checkInput(element) //function calling 10 | } 11 | 12 | editableInput.onkeypress = (e) => { 13 | let element = e.target; //getting keyup element 14 | checkInput(element) //function calling 15 | counter.style.display = "none" 16 | } 17 | 18 | function checkInput(element){ 19 | let currentLength = element.innerText.length; //getting length of keypressed element 20 | let maxLength = 100; 21 | let textTag = element.innerHTML; 22 | 23 | if(currentLength <= 0){ //if currenLength is less than or equal to 0 24 | placeholder.style.display = "block"; 25 | counter.style.display = "none" 26 | button.classList.remove("active") 27 | } 28 | else{ 29 | placeholder.style.display = "none"; 30 | counter.style.display = "block" 31 | button.classList.add("active") 32 | } 33 | 34 | counter.innerText = maxLength - currentLength 35 | 36 | if(currentLength > maxLength){ 37 | let overText = element.innerText.substr(maxLength); //extracting over texts, the substring method extracts parts of a string, beginning at the character at the specified positon 38 | 39 | overText = `${overText}`; //creating new span and passing over texts 40 | textTag = element.innerText.substr(0, maxLength) + overText; //replacing inner html of editable div with new 41 | readonlyInput.style.zIndex = "1"; 42 | counter.style.color = "#e0245e"; 43 | button.classList.remove("active") 44 | }else{ 45 | readonlyInput.style.zIndex = "-1" 46 | counter.style.color = "#333" 47 | } 48 | 49 | readonlyInput.innerHTML = textTag; //replacing innerHTML of readonly div with new span with over texts 50 | } -------------------------------------------------------------------------------- /dynamicTweetBox/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@300;400;500&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Roboto', sans-serif; 7 | box-sizing: border-box; 8 | } 9 | 10 | body{ 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | min-height: 100vh; 15 | background: #1da1f2; 16 | } 17 | 18 | .container{ 19 | background: white; 20 | max-width: 475px; 21 | width: 100%; 22 | padding: 25px 25px 15px 25px; 23 | border-radius: 15px; 24 | } 25 | 26 | .input-box{ 27 | padding-top: 10px; 28 | border-bottom: 1px solid #e6e6e6; 29 | } 30 | 31 | .input-box .tweet-area{ 32 | position: relative; 33 | min-height: 130px; 34 | max-height: 170px; 35 | overflow-y: scroll; 36 | } 37 | 38 | .tweet-area .placeholder{ 39 | position: absolute; 40 | pointer-events: none; 41 | font-size: 22px; 42 | margin-top: -3px; 43 | color: #98a5b1; 44 | } 45 | 46 | .tweet-area::-webkit-scrollbar{ 47 | width: 0px; 48 | } 49 | 50 | .tweet-area .input{ 51 | outline: none; 52 | font-size: 17px; 53 | word-wrap: break-word; 54 | word-break: break-all; 55 | } 56 | 57 | .tweet-area .editable{ 58 | position: relative; 59 | z-index: 5; 60 | } 61 | 62 | .tweet-area .readonly{ 63 | position: absolute; 64 | top: 0; 65 | left: 0; 66 | z-index: -1; 67 | color: transparent; 68 | background: transparent; 69 | 70 | } 71 | 72 | .readonly .highlight{ 73 | background: #fd9bb0; 74 | } 75 | 76 | .input-box .privacy { 77 | display: inline-flex; 78 | align-items: center; 79 | color: #1da1f2; 80 | margin: 15px 0; 81 | padding: 7px 10px; 82 | cursor: pointer; 83 | transition: background 0.2s ease ; 84 | border-radius: 25px; 85 | } 86 | 87 | .input-box .privacy:hover, .icons li:hover{ 88 | background: #e7f5fe; 89 | } 90 | 91 | .privacy .material-symbols-outlined{ 92 | font-size: 19px; 93 | } 94 | 95 | .privacy .reply{ 96 | margin-left: 7px; 97 | font-size: 15px; 98 | font-weight: 600; 99 | } 100 | 101 | .bottom{ 102 | display: flex; 103 | align-items: center; 104 | justify-content: space-between; 105 | margin-top: 13px; 106 | } 107 | 108 | .bottom .icons{ 109 | display: inline-flex; 110 | } 111 | 112 | .icons li{ 113 | list-style: none; 114 | height: 38px; 115 | width: 38px; 116 | margin: 0px 2px; 117 | display: flex; 118 | justify-content: center; 119 | align-items: center; 120 | cursor: pointer; 121 | border-radius: 25px; 122 | transition: background 0.2s ease; 123 | color: #1da1f2; 124 | } 125 | 126 | .bottom .content{ 127 | display: flex; 128 | align-items: center; 129 | } 130 | 131 | .content .counter{ 132 | display: none; 133 | margin-right: 15px; 134 | padding-right: 15px; 135 | border-right: 1px solid #aab8c2; 136 | color: #98a5b1; 137 | } 138 | 139 | .content button{ 140 | background: #1da1f2; 141 | color: white; 142 | font-weight: 600; 143 | border-radius: 25px; 144 | padding: 8px 12px; 145 | border: none; 146 | cursor: pointer; 147 | letter-spacing: 0.4px; 148 | outline: none; 149 | opacity: 0.7; 150 | pointer-events: none; 151 | } 152 | 153 | .content button.active{ 154 | opacity: 1; 155 | pointer-events: auto; 156 | } 157 | 158 | -------------------------------------------------------------------------------- /expandingCards/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "singleQuote": true, 4 | "semi": false 5 | } 6 | -------------------------------------------------------------------------------- /expandingCards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Expanding Cards 10 | 11 | 12 |
13 |
19 |

Nature's Wrath

20 |
21 |
27 |

Snow's Era

28 |
29 |
35 |

Evening's Doom

36 |
37 |
43 |

Moutain's Glory

44 |
45 |
51 |

Everlands

52 |
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /expandingCards/script.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const panels = document.querySelectorAll('.panel') 3 | 4 | const removeActiveClass = function () { 5 | panels.forEach(panel => panel.classList.remove('active')) 6 | } 7 | 8 | panels.forEach(panel => 9 | panel.addEventListener('click', function () { 10 | removeActiveClass() 11 | panel.classList.add('active') 12 | }) 13 | ) 14 | -------------------------------------------------------------------------------- /expandingCards/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Muli&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | font-family: 'Muli', sans-serif; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | overflow: hidden; 15 | } 16 | 17 | .container { 18 | display: flex; 19 | width: 90vw; 20 | } 21 | 22 | .panel { 23 | background-size: cover 100%; 24 | background-position: center; 25 | background-repeat: no-repeat; 26 | height: 80vh; 27 | border-radius: 50px; 28 | color: whitesmoke; 29 | cursor: pointer; 30 | flex: 0.5; 31 | margin: 10px; 32 | position: relative; 33 | transition: flex 0.7s ease-in; 34 | } 35 | 36 | .panel h3 { 37 | font-size: 22px; 38 | position: absolute; 39 | bottom: 20px; 40 | left: 20px; 41 | margin: 0; 42 | opacity: 0; 43 | } 44 | 45 | .panel.active { 46 | flex: 5; 47 | } 48 | 49 | .panel.active h3 { 50 | opacity: 1; 51 | transition: opacity 0.3s ease-in 0.4s; 52 | } 53 | 54 | @media (max-width: 480px) { 55 | .container { 56 | width: 100vw; 57 | } 58 | .panel:nth-of-type(4), 59 | .panel:nth-of-type(5) { 60 | display: none; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /foodMenuItems/app.js: -------------------------------------------------------------------------------- 1 | const menu = [ 2 | { 3 | id: 1, 4 | title: "Nutella Pancakes", 5 | category: "breakfast", 6 | price: 15.99, 7 | img: "images/item1.jpg", 8 | desc: "Pancakes STUFFED NEATLY with Nutella and topped with Strawberries, Bananas!", 9 | }, 10 | 11 | { 12 | id: 2, 13 | title: "Fruits & Oatmeal", 14 | category: "breakfast", 15 | price: 10.99, 16 | img: "images/item2.jpg", 17 | desc: "A tummy feeling recipe that has some juicy fruits giving company to oats!", 18 | }, 19 | 20 | { 21 | id: 3, 22 | title: "Caesar Salad", 23 | category: "lunch", 24 | price: 29.99, 25 | img: "images/item3.jpg", 26 | desc: "a salad of romaine lettuce tossed with an olive oil and grated cheese and topped with croutons", 27 | }, 28 | 29 | { 30 | id: 4, 31 | title: "Fruit Salad", 32 | category: "dinner", 33 | price: 25.99, 34 | img: "images/item4.jpg", 35 | desc: "Layers of fresh fruit are soaked a citrusy sauce in this colorful salad.", 36 | }, 37 | 38 | { 39 | id: 5, 40 | title: "Fruit Yogurt", 41 | category: "breakfast", 42 | price: 20.99, 43 | img: "images/item5.jpg", 44 | desc: "Greek Yogurt with Sautéed Dried Fruits", 45 | }, 46 | 47 | { 48 | id: 6, 49 | title: "Green Detox Smoothie", 50 | category: "shakes", 51 | price: 9.99, 52 | img: "images/item6.jpg", 53 | desc: "Smoothie with Kiwi, Cucumber, Green Apple, Spinach, Mint", 54 | }, 55 | 56 | { 57 | id: 7, 58 | title: "Avocado Toast with Egg", 59 | category: "breakfast", 60 | price: 12.99, 61 | img: "images/item7.jpg", 62 | desc: "It's a simple healthy protein-packed breakfast, snack or light meal!", 63 | }, 64 | 65 | { 66 | id: 8, 67 | title: "Red Velvet Cake", 68 | category: "lunch", 69 | price: 4.99, 70 | img: "images/item8.jpg", 71 | desc: "Silky texture, moist, but never dense!", 72 | }, 73 | 74 | { 75 | id: 9, 76 | title: "Blueberry Cheesecake", 77 | category: "lunch", 78 | price: 5.99, 79 | img: "images/item9.jpg", 80 | desc: "This Cheesecake is bursting with blueberries is an understatement!", 81 | }, 82 | 83 | { 84 | id: 10, 85 | title: "Oreo Milkshake", 86 | category: "shakes", 87 | price: 7.99, 88 | img: "images/item10.jpg", 89 | desc: "Combined with ice cream, milk, chocolate sauce, and Oreos. Topped with whipped cream!", 90 | }, 91 | ]; 92 | 93 | //targeting elements 94 | const sectionCenter = document.querySelector(".section-center"); 95 | const btnContainer = document.querySelector(".btn-container"); 96 | 97 | //load items 98 | window.addEventListener("DOMContentLoaded", function () { 99 | displayMenuItems(menu); 100 | dsiplayMenuButtons(); 101 | }); 102 | 103 | function displayMenuItems(menuItems) { 104 | let displayMenu = menuItems.map( 105 | (item) => 106 | `
107 | ${item.title} 108 |
109 |
110 |

${item.title}

111 |

$${item.price}

112 |
113 |

114 | ${item.desc} 115 |

116 |
117 |
` 118 | ); 119 | displayMenu = displayMenu.join(""); 120 | sectionCenter.innerHTML = displayMenu; 121 | } 122 | 123 | function dsiplayMenuButtons() { 124 | const categories = menu.reduce( 125 | function (values, item) { 126 | if (!values.includes(item.category)) { 127 | values.push(item.category); 128 | } 129 | return values; 130 | }, 131 | ["all"] 132 | ); 133 | const categoryBtns = categories 134 | .map( 135 | ( 136 | category 137 | ) => `` 140 | ) 141 | .join(""); 142 | btnContainer.innerHTML = categoryBtns; 143 | 144 | //buttons are added dynamically so it can be accessed only once it has been added to the DOM 145 | const filterBtns = btnContainer.querySelectorAll(".filter-btn"); 146 | filterBtns.forEach(function (btn) { 147 | btn.addEventListener("click", function (e) { 148 | const category = e.currentTarget.dataset.id; 149 | const menuCategory = menu.filter(function (menuItem) { 150 | // console.log(menuItem.category); 151 | if (menuItem.category === category) { 152 | return menuItem; 153 | } 154 | }); 155 | // console.log(menuCategory); 156 | if (category === "all") { 157 | displayMenuItems(menu); 158 | } else { 159 | displayMenuItems(menuCategory); 160 | } 161 | }); 162 | }); 163 | } 164 | -------------------------------------------------------------------------------- /foodMenuItems/images/item1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/foodMenuItems/images/item1.jpg -------------------------------------------------------------------------------- /foodMenuItems/images/item10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/foodMenuItems/images/item10.jpg -------------------------------------------------------------------------------- /foodMenuItems/images/item2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/foodMenuItems/images/item2.jpg -------------------------------------------------------------------------------- /foodMenuItems/images/item3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/foodMenuItems/images/item3.jpg -------------------------------------------------------------------------------- /foodMenuItems/images/item4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/foodMenuItems/images/item4.jpg -------------------------------------------------------------------------------- /foodMenuItems/images/item5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/foodMenuItems/images/item5.jpg -------------------------------------------------------------------------------- /foodMenuItems/images/item6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/foodMenuItems/images/item6.jpg -------------------------------------------------------------------------------- /foodMenuItems/images/item7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/foodMenuItems/images/item7.jpg -------------------------------------------------------------------------------- /foodMenuItems/images/item8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/foodMenuItems/images/item8.jpg -------------------------------------------------------------------------------- /foodMenuItems/images/item9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/foodMenuItems/images/item9.jpg -------------------------------------------------------------------------------- /foodMenuItems/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namya's Menu 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |

Namya's Menu

16 |
17 |
18 | 19 |
20 | 31 | --> 32 |
33 | 34 |
35 | 36 | 48 | 49 |
50 |
51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /foodMenuItems/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | =============== 3 | Fonts 4 | =============== 5 | */ 6 | @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); 7 | @import url("https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Poppins&display=swap"); 8 | 9 | /* 10 | =============== 11 | Variables 12 | =============== 13 | */ 14 | 15 | :root { 16 | /* dark shades of primary color*/ 17 | --clr-primary-1: hsl(205, 86%, 17%); 18 | --clr-primary-2: hsl(205, 77%, 27%); 19 | --clr-primary-3: hsl(205, 72%, 37%); 20 | --clr-primary-4: hsl(205, 63%, 48%); 21 | /* primary/main color */ 22 | --clr-primary-5: #49a6e9; 23 | /* lighter shades of primary color */ 24 | --clr-primary-6: hsl(205, 89%, 70%); 25 | --clr-primary-7: hsl(205, 90%, 76%); 26 | --clr-primary-8: hsl(205, 86%, 81%); 27 | --clr-primary-9: hsl(205, 90%, 88%); 28 | --clr-primary-10: hsl(205, 100%, 96%); 29 | /* darkest grey - used for headings */ 30 | --clr-grey-1: hsl(209, 61%, 16%); 31 | --clr-grey-2: hsl(211, 39%, 23%); 32 | --clr-grey-3: hsl(209, 34%, 30%); 33 | --clr-grey-4: hsl(209, 28%, 39%); 34 | /* grey used for paragraphs */ 35 | --clr-grey-5: hsl(210, 22%, 49%); 36 | --clr-grey-6: hsl(209, 23%, 60%); 37 | --clr-grey-7: hsl(211, 27%, 70%); 38 | --clr-grey-8: hsl(210, 31%, 80%); 39 | --clr-grey-9: hsl(212, 33%, 89%); 40 | --clr-grey-10: hsl(210, 36%, 96%); 41 | --clr-white: #fff; 42 | --clr-red-dark: hsl(360, 67%, 44%); 43 | --clr-red-light: hsl(360, 71%, 66%); 44 | --clr-green-dark: hsl(125, 67%, 44%); 45 | --clr-green-light: hsl(125, 71%, 66%); 46 | --clr-gold: #c59d5f; 47 | --clr-black: #222; 48 | --ff-primary: "Roboto", sans-serif; 49 | --ff-secondary: "Open Sans", sans-serif; 50 | --transition: all 0.3s linear; 51 | --spacing: 0.25rem; 52 | --radius: 0.5rem; 53 | --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 54 | --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 55 | --max-width: 1170px; 56 | --fixed-width: 620px; 57 | } 58 | /* 59 | =============== 60 | Global Styles 61 | =============== 62 | */ 63 | 64 | *, 65 | ::after, 66 | ::before { 67 | margin: 0; 68 | padding: 0; 69 | box-sizing: border-box; 70 | } 71 | body { 72 | font-family: var(--ff-secondary); 73 | background: var(--clr-grey-10); 74 | color: var(--clr-grey-1); 75 | line-height: 1.5; 76 | font-size: 0.875rem; 77 | } 78 | ul { 79 | list-style-type: none; 80 | } 81 | a { 82 | text-decoration: none; 83 | } 84 | img:not(.logo) { 85 | width: 100%; 86 | } 87 | img { 88 | display: block; 89 | } 90 | 91 | h1, 92 | h2, 93 | h3, 94 | h4 { 95 | letter-spacing: 0.1rem; 96 | text-transform: capitalize; 97 | line-height: 30; 98 | margin-bottom: 0.75rem; 99 | margin-right: 20px; 100 | font-family: var(--ff-primary); 101 | } 102 | h1 { 103 | font-size: 3rem; 104 | } 105 | h2 { 106 | font-size: 4rem; 107 | font-family: "Cedarville Cursive", cursive; 108 | } 109 | h3 { 110 | font-size: 1.25rem; 111 | } 112 | h4 { 113 | font-size: 1rem; 114 | } 115 | p { 116 | margin-bottom: 1.25rem; 117 | color: var(--clr-grey-5); 118 | } 119 | @media screen and (min-width: 800px) { 120 | h1 { 121 | font-size: 4rem; 122 | } 123 | 124 | h3 { 125 | font-size: 1.75rem; 126 | } 127 | h4 { 128 | font-size: 1rem; 129 | } 130 | body { 131 | font-size: 1rem; 132 | } 133 | h1, 134 | h2, 135 | h3, 136 | h4 { 137 | line-height: 1.2; 138 | } 139 | } 140 | /* global classes */ 141 | 142 | .btn { 143 | text-transform: uppercase; 144 | background: transparent; 145 | color: var(--clr-black); 146 | padding: 0.375rem 0.75rem; 147 | letter-spacing: var(--spacing); 148 | display: inline-block; 149 | transition: var(--transition); 150 | font-size: 0.875rem; 151 | border: 2px solid var(--clr-black); 152 | cursor: pointer; 153 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 154 | border-radius: var(--radius); 155 | } 156 | .btn:hover { 157 | color: var(--clr-white); 158 | background: var(--clr-black); 159 | } 160 | /* section */ 161 | .section { 162 | padding: 5rem 0; 163 | } 164 | 165 | main { 166 | min-height: 100vh; 167 | display: grid; 168 | place-items: center; 169 | } 170 | /* 171 | =============== 172 | Menu 173 | =============== 174 | */ 175 | 176 | .menu { 177 | padding: 5rem 0; 178 | } 179 | .title { 180 | text-align: center; 181 | margin-bottom: 4rem; 182 | } 183 | .underline { 184 | width: 18rem; 185 | height: 0.25rem; 186 | background: var(--clr-gold); 187 | margin-left: auto; 188 | margin-right: auto; 189 | } 190 | .btn-container { 191 | margin-bottom: 4rem; 192 | display: flex; 193 | justify-content: center; 194 | } 195 | .filter-btn { 196 | background: transparent; 197 | border-color: var(--clr-gold); 198 | font-size: 1rem; 199 | text-transform: capitalize; 200 | margin: 0 0.8rem; 201 | letter-spacing: 1px; 202 | border-radius: var(--radius); 203 | padding: 0.5rem 0.75rem; 204 | color: var(--clr-gold); 205 | cursor: pointer; 206 | transition: var(--transition); 207 | } 208 | .filter-btn:hover { 209 | background: var(--clr-gold); 210 | color: var(--clr-white); 211 | } 212 | .section-center { 213 | width: 90vw; 214 | margin-left: 250px; 215 | margin-top: 120px; 216 | margin-right: 250px; 217 | max-width: 1170px; 218 | display: grid; 219 | gap: 5rem 20rem; 220 | justify-items: center; 221 | } 222 | .menu-item { 223 | display: grid; 224 | gap: 1rem 2rem; 225 | max-width: 25rem; 226 | } 227 | .photo { 228 | object-fit: cover; 229 | height: 200px; 230 | border: 0.25rem solid var(--clr-gold); 231 | border-radius: var(--radius); 232 | } 233 | .item-info header { 234 | display: flex; 235 | justify-content: space-between; 236 | border-bottom: 0.5px dotted var(--clr-grey-5); 237 | } 238 | .item-info h4 { 239 | margin-bottom: 0.5rem; 240 | } 241 | 242 | .price { 243 | color: var(--clr-gold); 244 | } 245 | .item-text { 246 | margin-bottom: 0; 247 | padding-top: 1rem; 248 | } 249 | 250 | @media screen and (min-width: 768px) { 251 | .menu-item { 252 | grid-template-columns: 225px 1fr; 253 | gap: 0 1.25rem; 254 | max-width: 40rem; 255 | } 256 | .photo { 257 | height: 175px; 258 | } 259 | } 260 | @media screen and (min-width: 1200px) { 261 | .section-center { 262 | width: 95vw; 263 | grid-template-columns: 1fr 1fr; 264 | } 265 | .photo { 266 | height: 150px; 267 | } 268 | } 269 | -------------------------------------------------------------------------------- /grocify/grocery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/grocify/grocery.png -------------------------------------------------------------------------------- /grocify/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Grocify 13 | 14 | 15 |
16 | 17 |
18 |

19 |

Grocify🌱

20 |
21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 |
29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /grocify/script.js: -------------------------------------------------------------------------------- 1 | const alert = document.querySelector(".alert"); 2 | const form = document.querySelector(".grocery-form"); 3 | const grocery = document.getElementById("grocery"); 4 | const submitBtn = document.querySelector(".submit-btn"); 5 | const container = document.querySelector(".grocery-container"); 6 | const list = document.querySelector(".grocery-list"); 7 | const clearBtn = document.querySelector(".clear-btn"); 8 | 9 | //edit Option 10 | let editElement; 11 | let editFlag = false; 12 | let editID = ""; 13 | 14 | /////////EVENT LISTENERS//////// 15 | //submit form 16 | form.addEventListener("submit", addItem); 17 | //clear button 18 | clearBtn.addEventListener("click", clearItems); 19 | //load item 20 | window.addEventListener("DOMContentLoaded", setupItems); 21 | 22 | ///////FUNCTIONS/////// 23 | function addItem(e) { 24 | e.preventDefault(); 25 | const value = grocery.value; 26 | 27 | const id = new Date().getTime().toString(); 28 | if (value && !editFlag) { 29 | createListItem(id, value); 30 | //display alert 31 | displayAlert("Item added to the list", "success"); 32 | //show container 33 | container.classList.add("show-container"); 34 | //add to local storage 35 | addToLocalStorage(id, value); 36 | //set back to default 37 | setBacktoDefault(); 38 | } else if (value && editFlag) { 39 | editElement.innerHTML = value; 40 | displayAlert("Item Changed", "Success"); 41 | //edit local storage 42 | editLocalStorage(editID, value); 43 | setBacktoDefault(); 44 | } else { 45 | displayAlert("Please enter an Item", "danger"); 46 | } 47 | } 48 | 49 | //display alert 50 | function displayAlert(text, action) { 51 | alert.textContent = text; 52 | alert.classList.add(`alert-${action}`); 53 | 54 | //remove alert 55 | setInterval(function () { 56 | alert.textContent = ""; 57 | alert.classList.remove(`alert-${action}`); 58 | }, 1000); 59 | } 60 | 61 | //clear items 62 | function clearItems() { 63 | const items = document.querySelectorAll("grocery-item"); 64 | 65 | if (items.length > 0) { 66 | items.forEach(function (item) { 67 | list.removeChild(item); 68 | }); 69 | } 70 | container.classList.remove("show-container"); 71 | displayAlert("Empty List!", "danger"); 72 | setBacktoDefault(); 73 | localStorage.removeItem("list"); 74 | } 75 | 76 | //delete function 77 | function deleteItem(e) { 78 | const element = e.currentTarget.parentElement.parentElement; 79 | const id = element.dataset.id; 80 | list.removeChild(element); 81 | if (list.children.length === 0) { 82 | container.classList.remove("show-container"); 83 | } 84 | displayAlert("Item removed", "danger"); 85 | setBacktoDefault(); 86 | 87 | removeFromLocalStorage(id); 88 | } 89 | 90 | //edit function 91 | function editItem(e) { 92 | const element = e.currentTarget.parentElement.parentElement; 93 | //set edit item 94 | editElement = e.currentTarget.parentElement.previousElementSibling; 95 | //set form value 96 | grocery.value = editElement.innerHTML; 97 | editFlag = true; 98 | editID = element.dataset.id; 99 | submitBtn.textContent = "Edit"; 100 | } 101 | 102 | //set back to default 103 | function setBacktoDefault() { 104 | grocery.value = ""; 105 | editFlag = false; 106 | editID = ""; 107 | submitBtn.textContent = "submit"; 108 | } 109 | 110 | /////LOCAL STORAGE//////// 111 | function addToLocalStorage(id, value) { 112 | const grocery = { id, value }; 113 | let items = getLocalStorage(); 114 | items.push(grocery); 115 | localStorage.setItem("list", JSON.stringify(items)); 116 | } 117 | 118 | function removeFromLocalStorage(id) { 119 | let items = getLocalStorage(); 120 | 121 | items = items.filter(function (item) { 122 | if (item.id !== id) { 123 | return item; 124 | } 125 | }); 126 | localStorage.setItem("list", JSON.stringify(items)); 127 | } 128 | 129 | function editLocalStorage(id, value) { 130 | let items = getLocalStorage(); 131 | items = items.map(function (item) { 132 | if (item.id === id) { 133 | item.value = value; 134 | } 135 | return item; 136 | }); 137 | localStorage.setItem("list", JSON.stringify(items)); 138 | } 139 | 140 | function getLocalStorage() { 141 | return localStorage.getItem("list") 142 | ? JSON.parse(localStorage.getItem("list")) 143 | : []; 144 | } 145 | 146 | ///////SETUP ITEMS//////// 147 | function setupItems() { 148 | let items = getLocalStorage(); 149 | if (items.length > 0) { 150 | items.forEach(function (item) { 151 | createListItem(item.id, item.value); 152 | }); 153 | container.classList.add("show-container"); 154 | } 155 | } 156 | 157 | function createListItem(id, value) { 158 | const element = document.createElement("article"); 159 | //add class 160 | element.classList.add("grocery-item"); 161 | //add id 162 | const attr = document.createAttribute("data-id"); 163 | attr.value = id; 164 | element.setAttributeNode(attr); 165 | element.innerHTML = `

${value}

166 |
167 | 170 | 173 |
`; 174 | 175 | //targetting delete & edit buttons 176 | const deleteBtn = element.querySelector(".delete-btn"); 177 | const editBtn = element.querySelector(".edit-btn"); 178 | deleteBtn.addEventListener("click", deleteItem); 179 | editBtn.addEventListener("click", editItem); 180 | 181 | //append child 182 | list.appendChild(element); 183 | } 184 | -------------------------------------------------------------------------------- /grocify/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Poppins:wght@200;400;600&display=swap"); 2 | 3 | /* 4 | =============== 5 | Variables 6 | =============== 7 | */ 8 | 9 | :root { 10 | /* dark shades of primary color*/ 11 | --clr-primary-1: hsl(205, 86%, 17%); 12 | --clr-primary-2: hsl(205, 77%, 27%); 13 | --clr-primary-3: hsl(205, 72%, 37%); 14 | --clr-primary-4: hsl(205, 63%, 48%); 15 | /* primary/main color */ 16 | --clr-primary-5: #49a6e9; 17 | /* lighter shades of primary color */ 18 | --clr-primary-6: hsl(205, 89%, 70%); 19 | --clr-primary-7: hsl(205, 90%, 76%); 20 | --clr-primary-8: hsl(205, 86%, 81%); 21 | --clr-primary-9: hsl(205, 90%, 88%); 22 | --clr-primary-10: hsl(205, 100%, 96%); 23 | /* darkest grey - used for headings */ 24 | --clr-grey-1: hsl(209, 61%, 16%); 25 | --clr-grey-2: hsl(211, 39%, 23%); 26 | --clr-grey-3: hsl(209, 34%, 30%); 27 | --clr-grey-4: hsl(209, 28%, 39%); 28 | /* grey used for paragraphs */ 29 | --clr-grey-5: hsl(210, 22%, 49%); 30 | --clr-grey-6: hsl(209, 23%, 60%); 31 | --clr-grey-7: hsl(211, 27%, 70%); 32 | --clr-grey-8: hsl(210, 31%, 80%); 33 | --clr-grey-9: hsl(212, 33%, 89%); 34 | --clr-grey-10: hsl(210, 36%, 96%); 35 | --clr-white: #fff; 36 | --clr-red-dark: hsl(360, 67%, 44%); 37 | --clr-red-light: hsl(360, 71%, 66%); 38 | --clr-green-dark: hsl(125, 67%, 44%); 39 | --clr-green-light: hsl(125, 71%, 66%); 40 | --clr-black: #222; 41 | --ff-primary: "Roboto", sans-serif; 42 | --ff-secondary: "Poppins", sans-serif; 43 | --transition: all 0.3s linear; 44 | --spacing: 0.25rem; 45 | --radius: 0.5rem; 46 | --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 47 | --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 48 | --max-width: 1170px; 49 | --fixed-width: 620px; 50 | } 51 | /* 52 | =============== 53 | Global Styles 54 | =============== 55 | */ 56 | 57 | *, 58 | ::after, 59 | ::before { 60 | margin: 0; 61 | padding: 0; 62 | box-sizing: border-box; 63 | } 64 | body { 65 | font-family: var(--ff-secondary); 66 | background: linear-gradient( 67 | 90.09deg, 68 | #97cba9 -0.81%, 69 | #daece0 101.04%, 70 | #ffffff 101.05% 71 | ); 72 | color: var(--clr-grey-1); 73 | line-height: 1.5; 74 | font-size: 0.875rem; 75 | } 76 | ul { 77 | list-style-type: none; 78 | } 79 | a { 80 | text-decoration: none; 81 | } 82 | img:not(.logo) { 83 | width: 100%; 84 | } 85 | img { 86 | display: block; 87 | } 88 | 89 | h3 { 90 | font-size: 3rem; 91 | text-align: center; 92 | color: rgb(10, 31, 2); 93 | margin: 2.5rem; 94 | } 95 | 96 | /* h1, 97 | h2, 98 | h3, 99 | h4 { 100 | letter-spacing: var(--spacing); 101 | text-transform: capitalize; 102 | line-height: 1.25; 103 | margin-bottom: 0.75rem; 104 | font-family: var(--ff-primary); 105 | } 106 | h1 { 107 | font-size: 3rem; 108 | } 109 | h2 { 110 | font-size: 2rem; 111 | } 112 | h3 { 113 | font-size: 1.25rem; 114 | } 115 | h4 { 116 | font-size: 0.875rem; 117 | } 118 | p { 119 | margin-bottom: 1.25rem; 120 | color: var(--clr-grey-5); 121 | } 122 | @media screen and (min-width: 800px) { 123 | h1 { 124 | font-size: 4rem; 125 | } 126 | h2 { 127 | font-size: 2.5rem; 128 | } 129 | h3 { 130 | font-size: 1.75rem; 131 | } 132 | h4 { 133 | font-size: 1rem; 134 | } 135 | body { 136 | font-size: 1rem; 137 | } 138 | h1, 139 | h2, 140 | h3, 141 | h4 { 142 | line-height: 1; 143 | } 144 | } */ 145 | /* global classes */ 146 | 147 | .btn { 148 | text-transform: uppercase; 149 | background: transparent; 150 | color: var(--clr-black); 151 | padding: 0.375rem 0.75rem; 152 | letter-spacing: var(--spacing); 153 | display: inline-block; 154 | transition: var(--transition); 155 | font-size: 0.875rem; 156 | border: 2px solid var(--clr-black); 157 | cursor: pointer; 158 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 159 | border-radius: var(--radius); 160 | } 161 | .btn:hover { 162 | color: var(--clr-white); 163 | background: var(--clr-black); 164 | } 165 | /* section */ 166 | .section { 167 | padding: 5rem 0; 168 | } 169 | 170 | .section-center { 171 | width: 90vw; 172 | margin: 0 auto; 173 | max-width: 35rem; 174 | margin-top: 8rem; 175 | } 176 | @media screen and (min-width: 992px) { 177 | .section-center { 178 | width: 95vw; 179 | } 180 | } 181 | main { 182 | min-height: 100vh; 183 | display: grid; 184 | place-items: center; 185 | } 186 | /* 187 | =============== 188 | Grocery List 189 | =============== 190 | */ 191 | .section-center { 192 | background: rgba(255, 255, 255, 0.25); 193 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 194 | backdrop-filter: blur(4px); 195 | -webkit-backdrop-filter: blur(4px); 196 | border-radius: 10px; 197 | border: 2px solid rgba(255, 255, 255, 0.18); 198 | width: 500px; 199 | height: 500px; 200 | max-width: 100%; 201 | justify-content: center; 202 | align-items: center; 203 | } 204 | .section-center:hover { 205 | box-shadow: var(--dark-shadow); 206 | } 207 | .alert { 208 | margin: 2rem; 209 | height: 1.25rem; 210 | display: grid; 211 | align-items: center; 212 | text-align: center; 213 | font-size: 0.7rem; 214 | border-radius: 0.25rem; 215 | letter-spacing: var(--spacing); 216 | text-transform: capitalize; 217 | } 218 | .alert-danger { 219 | color: #721c24; 220 | background: #f8d7da; 221 | } 222 | .alert-success { 223 | color: #155724; 224 | background: #d4edda; 225 | } 226 | .grocery-form h3 { 227 | color: var(--clr-primary-1); 228 | margin-bottom: 1.5rem; 229 | text-align: center; 230 | } 231 | 232 | .form-control { 233 | display: flex; 234 | justify-content: center; 235 | margin: 2rem; 236 | } 237 | #grocery { 238 | padding: 0.25rem; 239 | padding-left: 1rem; 240 | background: hsl(210, 36%, 96%); 241 | border-radius: 5px; 242 | border-color: transparent; 243 | font-size: 1rem; 244 | flex: 1 0 auto; 245 | color: hsl(210, 22%, 49%); 246 | } 247 | #grocery::placeholder { 248 | color: hsl(210, 22%, 49%); 249 | } 250 | 251 | .submit-btn { 252 | background: rgb(212, 27, 38); 253 | border: none; 254 | border-radius: 5px; 255 | font-family: inherit; 256 | color: #ffff; 257 | font-size: 15px; 258 | padding: 0.4rem 0.5rem; 259 | cursor: pointer; 260 | flex: 0 0 5rem; 261 | align-items: center; 262 | padding: 0.25rem; 263 | text-transform: capitalize; 264 | cursor: pointer; 265 | transition: var(--transition); 266 | } 267 | .submit-btn:hover { 268 | background: rgb(10, 31, 2); 269 | color: white; 270 | } 271 | 272 | .grocery-container { 273 | margin-top: 2rem; 274 | transition: var(--transition); 275 | visibility: hidden; 276 | } 277 | .show-container { 278 | visibility: visible; 279 | } 280 | .grocery-item { 281 | display: flex; 282 | align-items: center; 283 | justify-content: space-between; 284 | margin-bottom: 0.5rem; 285 | transition: var(--transition); 286 | padding: 0.25rem 1rem; 287 | border-radius: var(--radius); 288 | text-transform: capitalize; 289 | } 290 | .grocery-item:hover { 291 | color: var(--clr-grey-5); 292 | background: var(--clr-grey-10); 293 | } 294 | .grocery-item:hover .title { 295 | color: var(--clr-grey-5); 296 | } 297 | .title { 298 | margin-bottom: 0; 299 | color: var(--clr-grey-1); 300 | letter-spacing: 2px; 301 | transition: var(--transition); 302 | } 303 | .edit-btn, 304 | .delete-btn { 305 | background: transparent; 306 | border-color: transparent; 307 | cursor: pointer; 308 | font-size: 0.7rem; 309 | margin: 0 0.15rem; 310 | transition: var(--transition); 311 | } 312 | .edit-btn { 313 | color: var(--clr-green-light); 314 | } 315 | .edit-btn:hover { 316 | color: var(--clr-green-dark); 317 | } 318 | .delete-btn { 319 | color: var(--clr-red-light); 320 | } 321 | .delete-btn:hover { 322 | color: var(--clr-red-dark); 323 | } 324 | .clear-btn { 325 | text-transform: capitalize; 326 | width: 10rem; 327 | height: 1.5rem; 328 | display: grid; 329 | align-items: center; 330 | background: transparent; 331 | border-color: transparent; 332 | color: var(--clr-red-light); 333 | margin: 0 auto; 334 | font-size: 0.85rem; 335 | letter-spacing: var(--spacing); 336 | cursor: pointer; 337 | transition: var(--transition); 338 | margin-top: 1.25rem; 339 | } 340 | .clear-btn:hover { 341 | color: var(--clr-red-dark); 342 | } 343 | -------------------------------------------------------------------------------- /guessingGame/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Guess My Number! 9 | 10 | 11 |
12 |

Guess My Number!

13 |

(Between 1 and 20)

14 | 15 |
?
16 |
17 |
18 |
19 | 20 | 21 |
22 |
23 |

Start guessing...

24 |

💯 Score: 20

25 |

26 | 🥇 Highscore: 0 27 |

28 |
29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /guessingGame/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /* 4 | console.log(document.querySelector('.message').textContent); 5 | document.querySelector('.message').textContent = '🎉 Correct Number!'; 6 | 7 | document.querySelector('.number').textContent = 13; 8 | document.querySelector('.score').textContent = 10; 9 | 10 | document.querySelector('.guess').value = 23; 11 | console.log(document.querySelector('.guess').value); 12 | */ 13 | 14 | let secretNumber = Math.trunc(Math.random() * 20) + 1; 15 | let score = 20; 16 | 17 | let highscore = 0; 18 | 19 | const displayMessage = function (message) { 20 | document.querySelector('.message').textContent = message; 21 | }; 22 | 23 | document.querySelector('.check').addEventListener('click', function () { 24 | const guess = Number(document.querySelector('.guess').value); 25 | console.log(guess, typeof guess); 26 | 27 | // When there is no input 28 | if (!guess) { 29 | // document.querySelector('.message').textContent = '⛔️ No number!'; 30 | displayMessage('⛔️ No number!'); 31 | 32 | // When player wins 33 | } else if (guess === secretNumber) { 34 | // document.querySelector('.message').textContent = '🎉 Correct Number!'; 35 | displayMessage('🎉 Correct Number!'); 36 | document.querySelector('.number').textContent = secretNumber; 37 | 38 | document.querySelector('body').style.backgroundColor = '#60b347'; 39 | document.querySelector('.number').style.width = '30rem'; 40 | 41 | if (score > highscore) { 42 | highscore = score; 43 | document.querySelector('.highscore').textContent = highscore; 44 | } 45 | 46 | // When guess is wrong 47 | } else if (guess !== secretNumber) { 48 | if (score > 1) { 49 | // document.querySelector('.message').textContent = 50 | // guess > secretNumber ? '📈 Too high!' : '📉 Too low!'; 51 | displayMessage(guess > secretNumber ? '📈 Too high!' : '📉 Too low!'); 52 | score--; 53 | document.querySelector('.score').textContent = score; 54 | } else { 55 | // document.querySelector('.message').textContent = '💥 You lost the game!'; 56 | displayMessage('💥 You lost the game!'); 57 | document.querySelector('.score').textContent = 0; 58 | } 59 | } 60 | 61 | // // When guess is too high 62 | // } else if (guess > secretNumber) { 63 | // if (score > 1) { 64 | // document.querySelector('.message').textContent = '📈 Too high!'; 65 | // score--; 66 | // document.querySelector('.score').textContent = score; 67 | // } else { 68 | // document.querySelector('.message').textContent = '💥 You lost the game!'; 69 | // document.querySelector('.score').textContent = 0; 70 | // } 71 | 72 | // // When guess is too low 73 | // } else if (guess < secretNumber) { 74 | // if (score > 1) { 75 | // document.querySelector('.message').textContent = '📉 Too low!'; 76 | // score--; 77 | // document.querySelector('.score').textContent = score; 78 | // } else { 79 | // document.querySelector('.message').textContent = '💥 You lost the game!'; 80 | // document.querySelector('.score').textContent = 0; 81 | // } 82 | // } 83 | }); 84 | 85 | document.querySelector('.again').addEventListener('click', function () { 86 | score = 20; 87 | secretNumber = Math.trunc(Math.random() * 20) + 1; 88 | 89 | // document.querySelector('.message').textContent = 'Start guessing...'; 90 | displayMessage('Start guessing...'); 91 | document.querySelector('.score').textContent = score; 92 | document.querySelector('.number').textContent = '?'; 93 | document.querySelector('.guess').value = ''; 94 | 95 | document.querySelector('body').style.backgroundColor = '#222'; 96 | document.querySelector('.number').style.width = '15rem'; 97 | }); 98 | -------------------------------------------------------------------------------- /guessingGame/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 | -------------------------------------------------------------------------------- /hoverBoard/app.js: -------------------------------------------------------------------------------- 1 | const container = document.getElementById("container"); 2 | const colors = [ 3 | "#B20600", 4 | "#A149FA", 5 | "#3330E4", 6 | "#F15412", 7 | "#357C3C", 8 | "#EE81B3", 9 | "#34B3F1", 10 | "#FBCB0A", 11 | ]; 12 | const squareBoxes = 979; 13 | 14 | //looping through the square boxes 15 | for (let i = 0; i <= squareBoxes; i++) { 16 | const square = document.createElement("div"); 17 | square.classList.add("square"); 18 | 19 | square.addEventListener("mouseover", () => { 20 | setColor(square); 21 | }); 22 | square.addEventListener("mouseleave", () => { 23 | removeColor(square); 24 | }); 25 | 26 | container.appendChild(square); 27 | } 28 | 29 | //Functions 30 | function setColor(element) { 31 | const color = getRandomColor(); 32 | element.style.background = color; 33 | element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`; 34 | } 35 | 36 | function removeColor(element) { 37 | element.style.background = "rgb(52, 51, 51)"; 38 | element.style.boxShadow = `0 0 2px #000`; 39 | } 40 | 41 | function getRandomColor() { 42 | return colors[Math.floor(Math.random() * colors.length)]; 43 | } 44 | -------------------------------------------------------------------------------- /hoverBoard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hover Board 9 | 10 | 11 |
12 |

Hover over me!

13 |
14 | 15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /hoverBoard/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"); 2 | 3 | body { 4 | font-family: "Press Start 2P", cursive; 5 | background-color: #111; 6 | 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | height: 95vh; 11 | } 12 | 13 | h1 { 14 | text-align: center; 15 | color: #fff; 16 | } 17 | 18 | #container { 19 | display: flex; 20 | flex-wrap: wrap; 21 | max-width: 800px; 22 | /* max-height: 400px; */ 23 | cursor: pointer; 24 | } 25 | 26 | .square { 27 | background-color: rgb(52, 51, 51); 28 | box-shadow: 0 0 2px rgb(0, 0, 0); 29 | margin: 0.2rem; 30 | height: 1rem; 31 | width: 1rem; 32 | transition: 3s ease; 33 | } 34 | 35 | .square:hover { 36 | transition-duration: 0s; 37 | 38 | } 39 | -------------------------------------------------------------------------------- /ipTracker/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /ipTracker/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/ipTracker/design/active-states.jpg -------------------------------------------------------------------------------- /ipTracker/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/ipTracker/design/desktop-design.jpg -------------------------------------------------------------------------------- /ipTracker/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/ipTracker/design/desktop-preview.jpg -------------------------------------------------------------------------------- /ipTracker/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/ipTracker/design/mobile-design.jpg -------------------------------------------------------------------------------- /ipTracker/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/ipTracker/images/favicon-32x32.png -------------------------------------------------------------------------------- /ipTracker/images/icon-arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ipTracker/images/icon-location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ipTracker/images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/ipTracker/images/logo.jpg -------------------------------------------------------------------------------- /ipTracker/images/pattern-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/ipTracker/images/pattern-bg.png -------------------------------------------------------------------------------- /ipTracker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | IP Tracker 10 | 11 | 12 | 15 | 18 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | Please disable your ad blocker to use this app 28 |
29 | 35 |
36 |
37 |
IP Address
38 |
-
39 |
40 |
41 |
Location
42 |
-
43 |
44 |
45 |
Timezone
46 |
-
47 |
48 |
49 |
ISP
50 |
-
51 |
52 |
53 |
VPN/Proxy/Tor
54 |
-
55 |
56 |
57 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /ipTracker/main.js: -------------------------------------------------------------------------------- 1 | const outerFunction = () => { 2 | let map = L.map('map'); 3 | const mainFunction = e => { 4 | let ipAddress = document.querySelector('.header__input--input').value; 5 | let userIp = document.querySelector('.ip__value'); 6 | let userLocation = document.querySelector('.location__value'); 7 | let userTimezone = document.querySelector('.timezone__value'); 8 | let userIsp = document.querySelector('.isp__value'); 9 | let userVpn = document.querySelector('.vpn__value'); 10 | const apiKey = 'at_ptq5iCtbeeu2pV1kxSlEAZ43nLKYS'; 11 | const URL = `https://geo.ipify.org/api/v2/country,city,vpn?apiKey=${apiKey}&ipAddress=${ipAddress}`; 12 | console.log(URL); 13 | fetch(URL).then(response => response.json()) 14 | .then(data => update(data)) 15 | // .catch(data => clear(data)) 16 | 17 | const clear = () => { 18 | ip.innerHTML = '-'; 19 | location.innerHTML = '-' 20 | timezone.innerHTML = '-' 21 | isp.innerHTML = '-' 22 | } 23 | 24 | const update = (data) => { 25 | const updateMap = () => { 26 | let x = data.location.lat; 27 | let y = data.location.lng; 28 | let z = 8; 29 | map.setView([x, y], z); 30 | L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?', { 31 | attribution: '© OpenStreetMap contributors' 32 | }).addTo(map) 33 | L.marker([x, y]).addTo(map) 34 | .bindPopup(ipAddress) 35 | .openPopup(); 36 | } 37 | userIp.innerHTML = ipAddress; 38 | userLocation.innerHTML = data.location.city 39 | userTimezone.innerHTML = data.location.timezone 40 | userIsp.innerHTML = data.isp 41 | if (data.proxy.proxy == true) { 42 | userVpn.innerHTML = 'Proxy' 43 | } 44 | else if (data.proxy.vpn == true) { 45 | userVpn.innerHTML = 'VPN' 46 | } 47 | else if (data.proxy.tor == true) { 48 | userVpn.innerHTML = 'Tor' 49 | } 50 | else { 51 | userVpn.innerHTML = '-' 52 | } 53 | updateMap(); 54 | } 55 | } 56 | if (document.querySelector('.header__input').value != '') { 57 | document.querySelector('.header__input--button').addEventListener('click', mainFunction) 58 | } 59 | } 60 | 61 | outerFunction() 62 | 63 | -------------------------------------------------------------------------------- /ipTracker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ip-tracker", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "vite": "^3.0.0" 13 | } 14 | } -------------------------------------------------------------------------------- /ipTracker/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | 3 | body { 4 | overflow: hidden; 5 | margin: 0; 6 | padding: 0; 7 | height: 100vh; 8 | font-family: 'Nunito', sans-serif; 9 | user-select: none; 10 | 11 | } 12 | 13 | .warning { 14 | background-color: rgb(255, 174, 174); 15 | color: rgb(88, 0, 0); 16 | font-weight: 800; 17 | font-size: 14px; 18 | text-align: center; 19 | } 20 | 21 | #header { 22 | height: 40vh; 23 | background: url(./images/pattern-bg.png); 24 | background-size: cover; 25 | background-repeat: no-repeat; 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: flex-start; 29 | align-items: center; 30 | color: white; 31 | } 32 | 33 | .header__title { 34 | font-size: 2.5em; 35 | font-weight: 700; 36 | margin: 10px 0; 37 | } 38 | 39 | .header__input { 40 | display: flex; 41 | justify-content: center; 42 | margin: 10px 0; 43 | } 44 | 45 | .header__input--input { 46 | width: 22vw; 47 | height: 40px; 48 | border: none; 49 | border-top-left-radius: 10px; 50 | border-bottom-left-radius: 10px; 51 | padding-left: 20px; 52 | font-family: 'Nunito', sans-serif; 53 | font-weight: 800; 54 | } 55 | 56 | .header__input--input:focus { 57 | border: none; 58 | outline: none; 59 | } 60 | 61 | .header__input--button { 62 | width: 3vw; 63 | border: none; 64 | outline: none; 65 | border-top-right-radius: 10px; 66 | border-bottom-right-radius: 10px; 67 | background-color: rgb(52, 52, 52); 68 | cursor: pointer; 69 | } 70 | 71 | .button-arrow { 72 | transform: rotate(-90deg); 73 | color: white; 74 | } 75 | 76 | #data { 77 | position: fixed; 78 | left: 15%; 79 | top: 25%; 80 | z-index: 1; 81 | border-radius: 10px; 82 | display: flex; 83 | width: 70vw; 84 | height: 20vh; 85 | justify-content: space-between; 86 | /* padding: 0 20px; */ 87 | background-color: white; 88 | box-shadow: -1px -1px 45px -12px rgba(0, 0, 0, 0.75); 89 | -webkit-box-shadow: -1px -1px 45px -12px rgba(0, 0, 0, 0.75); 90 | -moz-box-shadow: -1px -1px 45px -12px rgba(0, 0, 0, 0.75); 91 | } 92 | 93 | .section { 94 | display: flex; 95 | flex-direction: column; 96 | justify-content: center; 97 | align-items: center; 98 | width: 25%; 99 | /* outline: 1px solid grey; */ 100 | /* text-align: center; */ 101 | } 102 | 103 | .section__title { 104 | font-size: 14px; 105 | font-weight: 600; 106 | color: grey; 107 | } 108 | 109 | .section__value { 110 | font-size: 25px; 111 | font-weight: 800; 112 | } 113 | 114 | .section-line { 115 | height: 20px; 116 | width: 1px; 117 | background-color: grey; 118 | } 119 | 120 | #map { 121 | height: 60vh; 122 | border: 0; 123 | z-index: 0; 124 | /* width: 500px; */ 125 | } 126 | 127 | .leaflet-popup-content { 128 | text-align: center; 129 | font-weight: 700; 130 | } 131 | 132 | @media(max-width:860px) { 133 | .header__input--button { 134 | width: 5vw; 135 | } 136 | 137 | .header__input--input { 138 | width: 30vw; 139 | } 140 | } 141 | 142 | @media(max-width:800px) { 143 | #data { 144 | flex-direction: column; 145 | height: 290px; 146 | width: 80vw; 147 | left: 10%; 148 | top: 25vh; 149 | /* justify-content: center; */ 150 | align-items: center; 151 | } 152 | 153 | .section { 154 | width: 100%; 155 | height: 25%; 156 | /* align-items: center; */ 157 | } 158 | } 159 | 160 | @media(max-width:660px) { 161 | .header__input--input { 162 | width: 70vw; 163 | } 164 | 165 | .header__input--button { 166 | width: 20vw; 167 | } 168 | 169 | #data { 170 | width: 90vw; 171 | left: 5%; 172 | } 173 | 174 | .warning { 175 | display: none; 176 | } 177 | } 178 | 179 | @media(max-width:400px) { 180 | .section__title { 181 | font-size: 10px; 182 | } 183 | 184 | .section__value { 185 | font-size: 18px; 186 | } 187 | 188 | .header__title { 189 | font-size: 1.5em; 190 | } 191 | 192 | .header__input--input { 193 | /* width: 100%; */ 194 | width: 70vw; 195 | } 196 | 197 | .header__input--button { 198 | width: 20vw; 199 | } 200 | 201 | #data { 202 | top: 20%; 203 | } 204 | } -------------------------------------------------------------------------------- /javascriptQuiz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Quiz App 8 | 9 | 10 | 11 | 12 |
13 |

JavaScript Quiz🧩

14 |
15 |
16 |

Question text

17 |
    18 |
  • 19 | 24 |
    • 25 |
  • 26 | 31 |
    • 32 |
  • 33 | 38 |
    • 39 |
  • 40 | 45 |
    • 46 |
47 |
48 | 49 |
50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /javascriptQuiz/script.js: -------------------------------------------------------------------------------- 1 | const jsQuiz = [ 2 | { 3 | question: "Inside which HTML element do we put the JavaScript?", 4 | a: "", 5 | b: "", 6 | c: "", 7 | d: " 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /leadGenerator-ChromeExtension/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/leadGenerator-ChromeExtension/logo.png -------------------------------------------------------------------------------- /leadGenerator-ChromeExtension/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "version": "1.9", 4 | "name": "Leads Tracker", 5 | "action": { 6 | "default_popup": "index.html", 7 | "dafult_icon": "icon.png" 8 | }, 9 | "permissions": [ 10 | "tabs" 11 | ] 12 | } -------------------------------------------------------------------------------- /leadGenerator-ChromeExtension/script.js: -------------------------------------------------------------------------------- 1 | let myLeads = []; 2 | const inputButton = document.getElementById('input-btn') 3 | const inputEl = document.getElementById('input-el') 4 | const ulel = document.getElementById('ul-el'); 5 | const deletebtn = document.getElementById('delete-btn') 6 | const storeData = JSON.parse(localStorage.getItem("myLeads")) 7 | const tabBtn = document.getElementById('tab-btn') 8 | 9 | if(storeData){ 10 | myLeads = storeData 11 | render(myLeads) 12 | } 13 | 14 | tabBtn.addEventListener('click', function (){ 15 | chrome.tabs.query({currentWindow: true, active: true}, function(tabs){ 16 | myLeads.push(tabs[0].url) 17 | localStorage.setItem("myLeads", JSON.stringify(myLeads)) 18 | render(myLeads) 19 | }) 20 | }) 21 | 22 | function render(leads) { 23 | 24 | let listItems = '' 25 | for(let i=0; i 28 | 29 | ${leads[i]} 30 | 31 | ` 32 | } 33 | 34 | ulel.innerHTML = listItems; 35 | } 36 | 37 | deletebtn.addEventListener('dblclick', ()=>{ 38 | localStorage.clear() 39 | myLeads = [] 40 | render(myLeads); 41 | }) 42 | 43 | inputButton.addEventListener('click', function (){ 44 | myLeads.push(inputEl.value) 45 | inputEl.value = '' 46 | localStorage.setItem("myLeads", JSON.stringify(myLeads)) 47 | //console.log(localStorage.getItem("myLeads")) 48 | render(myLeads) 49 | }) 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /leadGenerator-ChromeExtension/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | display: flex; 3 | flex-direction: column; 4 | min-height: 150px ; 5 | width: 500px; 6 | border: 1px solid rgb(73, 95, 73); 7 | } 8 | 9 | #input-el{ 10 | height: 30px; 11 | margin: 5px; 12 | border: 1.5px solid rgb(36, 158, 36); 13 | } 14 | 15 | #input-btn{ 16 | height: 30px; 17 | width: 100px; 18 | border: none; 19 | margin-left: 5px; 20 | background-color: rgb(36, 158, 36); 21 | color: white; 22 | font-weight: bold; 23 | cursor: pointer; 24 | } 25 | 26 | #input-el:hover{ 27 | background-color: rgb(199, 231, 242); 28 | } 29 | 30 | ul{ 31 | list-style: none; 32 | margin-left: 0; 33 | padding-left: 5px; 34 | padding-top: 0px; 35 | margin-top: 7px; 36 | } 37 | li{ 38 | margin-top: 2px; 39 | } 40 | 41 | li a{ 42 | color:rgb(36, 158, 36); 43 | } 44 | 45 | #delete-btn{ 46 | height: 30px; 47 | width: 100px; 48 | border: none; 49 | margin-left: 5px; 50 | background-color: white; 51 | color: rgb(36, 158, 36); 52 | font-weight: bold; 53 | cursor: pointer; 54 | border: 1px solid rgb(36, 158, 36); 55 | } 56 | 57 | #tab-btn{ 58 | height: 30px; 59 | width: 100px; 60 | border: none; 61 | margin-left: 5px; 62 | background-color: rgb(36, 158, 36); 63 | color: white; 64 | font-weight: bold; 65 | cursor: pointer; 66 | } 67 | 68 | -------------------------------------------------------------------------------- /modalWindow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Modal window 9 | 10 | 11 | 12 | 13 | 14 | 15 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /modalWindow/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const modal = document.querySelector('.modal'); 3 | const overlay = document.querySelector('.overlay'); 4 | const btnCloseModal = document.querySelector('.close-modal'); 5 | const btnsOpenModal = document.querySelectorAll('.show-modal'); 6 | 7 | const openModal = 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 | 17 | for (let i = 0; i < btnsOpenModal.length; i++) 18 | btnsOpenModal[i].addEventListener('click', openModal); 19 | 20 | btnCloseModal.addEventListener('click', closeModal); 21 | overlay.addEventListener('click', closeModal); 22 | 23 | document.addEventListener('keydown', function (e) { 24 | console.log(e.key); 25 | 26 | if (e.key === 'Escape' && !modal.classList.contains('hidden')) { 27 | closeModal(); 28 | } 29 | }); 30 | -------------------------------------------------------------------------------- /modalWindow/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 | -------------------------------------------------------------------------------- /myTravelBucketList/images/plane.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/myTravelBucketList/images/plane.png -------------------------------------------------------------------------------- /myTravelBucketList/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | My Travel Bucket List 9 | 10 | 11 | 12 |

My Travel Bucket List✈️

13 |
14 |
20 |

Gulf of Thailand, Thailand

21 |
22 | 23 |
29 |

Balabac, Philippines

30 |
31 | 32 |
38 |

Maldives

39 |
40 | 41 |
47 |

Bora Bora, French Polynesia

48 |
49 | 50 |
56 |

Yasawas, Fiji

57 |
58 | 59 |
65 |

Bali, Indonesia

66 |
67 |
68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /myTravelBucketList/script.js: -------------------------------------------------------------------------------- 1 | const panels = document.querySelectorAll(".panel"); 2 | console.log(panels); 3 | 4 | panels.forEach((panel) => { 5 | panel.addEventListener("click", () => { 6 | removeActiveClasses(); 7 | panel.classList.add("active"); 8 | }); 9 | }); 10 | 11 | function removeActiveClasses() { 12 | panels.forEach((panel) => { 13 | panel.classList.remove("active"); 14 | }); 15 | } 16 | -------------------------------------------------------------------------------- /myTravelBucketList/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Spinnaker&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: "Spinnaker", sans-serif; 9 | background-color: black; 10 | 11 | 12 | } 13 | 14 | h1 { 15 | text-align: center; 16 | margin-top: 10px; 17 | margin-bottom: 0; 18 | } 19 | 20 | span { 21 | background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59); 22 | -webkit-background-clip: text; 23 | -webkit-text-fill-color: transparent; 24 | } 25 | 26 | ::-webkit-scrollbar { 27 | display: none; 28 | } 29 | 30 | .container { 31 | height: 90vh; 32 | display: flex; 33 | align-items: center; 34 | justify-content: center; 35 | overflow: hidden; 36 | margin: 0; 37 | } 38 | 39 | 40 | .panel { 41 | background-size: cover; 42 | background-position: center; 43 | background-repeat: no-repeat; 44 | height: 80vh; 45 | /* width: 90vh; */ 46 | border-radius: 3rem; 47 | color: #ffff; 48 | cursor: pointer; 49 | flex: 0.5; 50 | margin: 10px; 51 | position: relative; 52 | transition: flex 0.7s ease-in; 53 | 54 | } 55 | 56 | .panel h3 { 57 | font-size: 1rem; 58 | font-weight: 500; 59 | position: absolute; 60 | bottom: 1.5rem; 61 | left: 5px; 62 | margin: 1rem; 63 | opacity: 0; 64 | } 65 | 66 | .panel.active { 67 | flex: 5; 68 | } 69 | 70 | .panel.active h3 { 71 | opacity: 1; 72 | transition: opacity 0.3s ease-in 0.4s; 73 | } 74 | 75 | @media (max-width: 480px) { 76 | .container { 77 | width: 100vw; 78 | } 79 | 80 | .panel:nth-of-type(4), 81 | .panel:nth-of-type(5) { 82 | display: none; 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /newYearCountdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Countdown Timer 8 | 9 | 10 | 11 | 12 |

New Year's Eve🎉

13 |
14 |
15 |

0

16 | days 17 |
18 |
19 |

0

20 | hours 21 |
22 |
23 |

0

24 | minutes 25 |
26 |
27 |

0

28 | seconds 29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /newYearCountdown/newyear.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/newYearCountdown/newyear.jpg -------------------------------------------------------------------------------- /newYearCountdown/script.js: -------------------------------------------------------------------------------- 1 | const daysEl = document.getElementById("days"); 2 | const hoursEl = document.getElementById("hours"); 3 | const minsEl = document.getElementById("minutes"); 4 | const secondsEl = document.getElementById("seconds"); 5 | 6 | const newYears = "1 Jan 2023"; 7 | 8 | //adding 0 before 9 | const formatTime = (time) => (time < 10 ? `0${time}` : time); 10 | 11 | setInterval(function () { 12 | const newYearsDate = new Date(newYears); 13 | const currentDate = new Date(); 14 | 15 | const totalSeconds = (newYearsDate - currentDate) / 1000; 16 | 17 | const days = Math.floor(totalSeconds / 3600 / 24); 18 | const hours = Math.floor(totalSeconds / 3600) % 24; 19 | const mins = Math.floor(totalSeconds / 60) % 60; 20 | const seconds = Math.floor(totalSeconds) % 60; 21 | 22 | daysEl.innerHTML = days; 23 | hoursEl.innerHTML = formatTime(hours); 24 | minsEl.innerHTML = formatTime(mins); 25 | secondsEl.innerHTML = formatTime(seconds); 26 | }, 1000); 27 | -------------------------------------------------------------------------------- /newYearCountdown/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Poppins:wght@200;400;600&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-image: url("newyear.jpg"); 9 | background-size: cover; 10 | background-position: center; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | color: white; 15 | min-height: 100vh; 16 | font-family: "Poppins", sans-serif; 17 | margin: 0; 18 | } 19 | 20 | h1 { 21 | font-size: 4rem; 22 | font-weight: normal; 23 | margin-top: 5rem; 24 | } 25 | 26 | .countdown-container { 27 | display: flex; 28 | flex-wrap: wrap; 29 | align-items: center; 30 | justify-content: center; 31 | } 32 | 33 | .big-text { 34 | font-weight: bold; 35 | font-size: 6rem; 36 | line-height: 1; 37 | margin: 1rem 2rem; 38 | } 39 | 40 | .countdown-el { 41 | text-align: center; 42 | } 43 | 44 | .countdown-el span { 45 | font-size: 1.3; 46 | } 47 | -------------------------------------------------------------------------------- /picture-in-picture/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Picture in Picture 8 | 9 | 10 | 11 | 12 | 13 |

Picture in Picture app to share your screen and be productive

14 |
15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /picture-in-picture/script.js: -------------------------------------------------------------------------------- 1 | const videoTag = document.querySelector('#video'); 2 | const startButton = document.querySelector('#start-btn'); 3 | const shareButton = document.querySelector('#share-btn'); 4 | 5 | // Select media stream and play video 6 | async function selectMediaStream() { 7 | try { 8 | const mediaStream = await navigator.mediaDevices.getDisplayMedia(); 9 | videoTag.srcObject = mediaStream; 10 | videoTag.onloadedmetadata = () => { 11 | videoTag.play(); 12 | }; 13 | shareButton.classList.add('hide'); 14 | startButton.classList.remove('hide'); 15 | } catch (error) { 16 | console.log('ERR: ', error); 17 | } 18 | } 19 | 20 | // Share screen to start picture in picture 21 | shareButton.addEventListener('click', async () => { 22 | selectMediaStream(); 23 | }); 24 | 25 | startButton.addEventListener('click', async () => { 26 | startButton.disabled = true; 27 | // Start picture in picture 28 | await videoTag.requestPictureInPicture(); 29 | startButton.disabled = false; 30 | shareButton.classList.remove('hide'); 31 | startButton.classList.add('hide'); 32 | }); 33 | -------------------------------------------------------------------------------- /picture-in-picture/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #2D364E; 9 | color: #fff; 10 | font-family: 'Comfortaa', cursive; 11 | font-family: 'Lato', sans-serif; 12 | } 13 | 14 | .head { 15 | display: flex; 16 | justify-content: center; 17 | margin-top: 80px; 18 | } 19 | 20 | .button-container { 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | height: 60vh; 25 | gap: 20px; 26 | padding: 10px; 27 | border-radius: 7px; 28 | } 29 | 30 | button { 31 | cursor: pointer; 32 | outline: none; 33 | font-size: 25px; 34 | color: white; 35 | border-radius: 7px; 36 | padding: 5px 10px; 37 | } 38 | 39 | #start-btn { 40 | background: #1DA1F2; 41 | border: 2px solid #1DA1F2; 42 | } 43 | 44 | #share-btn { 45 | background-color: #46A74E; 46 | border: 2px solid #46A74E; 47 | } 48 | 49 | #start-btn:hover { 50 | background: #1da0f2c7; 51 | } 52 | 53 | #share-btn:hover { 54 | background-color: #46a74ed8; 55 | } 56 | 57 | .hide { 58 | display: none; 59 | } 60 | -------------------------------------------------------------------------------- /pigGame/dice-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/pigGame/dice-1.png -------------------------------------------------------------------------------- /pigGame/dice-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/pigGame/dice-2.png -------------------------------------------------------------------------------- /pigGame/dice-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/pigGame/dice-3.png -------------------------------------------------------------------------------- /pigGame/dice-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/pigGame/dice-4.png -------------------------------------------------------------------------------- /pigGame/dice-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/pigGame/dice-5.png -------------------------------------------------------------------------------- /pigGame/dice-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/namyakhan/javascriptProjects/704971d08df4a58209c34bcff7a070fefa365905/pigGame/dice-6.png -------------------------------------------------------------------------------- /pigGame/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Pig Game 9 | 10 | 11 |
12 |
13 |

Player 1

14 |

43

15 |
16 |

Current

17 |

0

18 |
19 |
20 |
21 |

Player 2

22 |

24

23 |
24 |

Current

25 |

0

26 |
27 |
28 | 29 | Playing dice 30 | 31 | 32 | 33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /pigGame/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | //selecting the elements 4 | const player0El = document.querySelector('.player--0'); 5 | const player1El = document.querySelector('.player--1'); 6 | const score0El = document.getElementById('score--0'); 7 | const score1El = document.getElementById('score--1'); 8 | const current0El = document.getElementById('current--0'); 9 | const current1El = document.getElementById('current--1'); 10 | 11 | const diceEl = document.querySelector('.dice'); 12 | const btnNew = document.querySelector('.btn--new'); 13 | const btnRoll = document.querySelector('.btn--roll'); 14 | const btnHold = document.querySelector('.btn--hold'); 15 | 16 | let currentScore, scores, playing, activePlayer; 17 | 18 | //starting conditions 19 | //can't set inside the function as each time the funcion will be caled the score will be set to 0, so we're defining it outside the function 20 | const init = function () { 21 | scores = [0, 0]; 22 | currentScore = 0; 23 | activePlayer = 0; 24 | playing = true; 25 | 26 | score0El.textContent = 0; 27 | score1El.textContent = 0; 28 | current0El.textContent = 0; 29 | current1El.textContent = 0; 30 | 31 | diceEl.classList.add('hidden'); 32 | player0El.classList.remove('player--winner'); 33 | player1El.classList.remove('player--winner'); 34 | player0El.classList.add('player--active'); 35 | player1El.classList.remove('player--active'); 36 | }; 37 | 38 | init(); 39 | 40 | const switchPlayer = function () { 41 | document.getElementById(`current--${activePlayer}`).textContent = 0; 42 | currentScore = 0; 43 | activePlayer = activePlayer === 0 ? 1 : 0; 44 | player0El.classList.toggle('player--active'); 45 | player1El.classList.toggle('player--active'); 46 | }; 47 | 48 | //rolling dice functionality 49 | btnRoll.addEventListener('click', function () { 50 | if (playing) { 51 | //1. generate random dice roll 52 | const dice = Math.trunc(Math.random() * 6) + 1; 53 | 54 | //2. Display dice 55 | diceEl.classList.remove('hidden'); 56 | diceEl.src = `dice-${dice}.png`; 57 | 58 | //3.check for rolled 1. if true, swicth to next player 59 | if (dice !== 1) { 60 | //Add to the current score 61 | currentScore += dice; 62 | document.getElementById(`current--${activePlayer}`).textContent = 63 | currentScore; 64 | //current0El.textContent = currentScore; 65 | } else { 66 | //switch the player 67 | switchPlayer(); 68 | } 69 | } 70 | }); 71 | 72 | btnHold.addEventListener('click', function () { 73 | if (playing) { 74 | //1. Add current score to active player's score 75 | scores[activePlayer] += currentScore; 76 | 77 | //scores[0] = scores[0] + currentScore 78 | document.getElementById(`score--${activePlayer}`).textContent = 79 | scores[activePlayer]; 80 | //2. Check if player's score is >=100 81 | if (scores[activePlayer] >= 100) { 82 | //finish the game 83 | playing = false; 84 | diceEl.classList.add('hidden'); 85 | 86 | document 87 | .querySelector(`.player--${activePlayer}`) 88 | .classList.add('player--winner'); 89 | document 90 | .querySelector(`.player--${activePlayer}`) 91 | .classList.remove('player--active'); 92 | } else { 93 | switchPlayer(); 94 | } 95 | } 96 | //switch to the next player 97 | }); 98 | 99 | btnNew.addEventListener('click', init); 100 | -------------------------------------------------------------------------------- /pigGame/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 | 169 | .hidden { 170 | display: none; 171 | } 172 | -------------------------------------------------------------------------------- /progressSteps/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false, 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /progressSteps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Progress Steps 10 | 11 | 12 |
13 |
14 |
15 |
1
16 |
2
17 |
3
18 |
4
19 |
20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /progressSteps/script.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const progress = document.getElementById('progress') 4 | const btnPrev = document.getElementById('prev') 5 | const btnNext = document.getElementById('next') 6 | const circles = document.querySelectorAll('.circle') 7 | 8 | let currentActive = 1 9 | 10 | const update = function () { 11 | circles.forEach((circle, index) => { 12 | if (index < currentActive) { 13 | circle.classList.add('active') 14 | } else { 15 | circle.classList.remove('active') 16 | } 17 | }) 18 | 19 | const actives = document.querySelectorAll('.active') 20 | 21 | progress.style.width = 22 | ((actives.length - 1) / (circles.length - 1)) * 100 + '%' 23 | 24 | if (currentActive === 1) { 25 | btnPrev.disabled = true 26 | } else if (currentActive === circles.length) { 27 | btnNext.disabled = true 28 | } else { 29 | btnNext.disabled = btnPrev.disabled = false 30 | } 31 | } 32 | 33 | btnNext.addEventListener('click', () => { 34 | currentActive++ 35 | 36 | if (currentActive > circles.length) currentActive = circles.length 37 | 38 | update() 39 | }) 40 | 41 | btnPrev.addEventListener('click', () => { 42 | currentActive-- 43 | 44 | if (currentActive < 1) currentActive = 1 45 | 46 | update() 47 | }) 48 | -------------------------------------------------------------------------------- /progressSteps/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Muli&display=swap'); 2 | 3 | :root { 4 | --line-border-empty: #e0e0e0; 5 | --line-border-fill: #3498db; 6 | } 7 | 8 | * { 9 | box-sizing: border-box; 10 | } 11 | 12 | body { 13 | background-color: #f6f7fb; 14 | font-family: 'Muli', sans-serif; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | height: 100vh; 19 | overflow: hidden; 20 | margin: 0; 21 | } 22 | 23 | .container { 24 | text-align: center; 25 | } 26 | 27 | .progress-container { 28 | display: flex; 29 | justify-content: space-between; 30 | width: 350px; 31 | max-width: 100%; 32 | margin-bottom: 30px; 33 | position: relative; 34 | } 35 | 36 | .progress-container::before { 37 | content: ''; 38 | background-color: var(--line-border-empty); 39 | width: 100%; 40 | height: 4px; 41 | position: absolute; 42 | top: 50%; 43 | left: 0; 44 | transform: translateY(-50%); 45 | z-index: -1; 46 | } 47 | 48 | .progress { 49 | position: absolute; 50 | background-color: var(--line-border-fill); 51 | width: 0; 52 | height: 4px; 53 | top: 50%; 54 | left: 0; 55 | transform: translateY(-50%); 56 | z-index: -1; 57 | transition: 0.4s ease; 58 | } 59 | 60 | .circle { 61 | background-color: #fff; 62 | color: #999; 63 | height: 30px; 64 | width: 30px; 65 | border-radius: 50%; 66 | display: flex; 67 | justify-content: center; 68 | align-items: center; 69 | border: 3px solid var(--line-border-empty); 70 | transition: 0.4s ease; 71 | } 72 | 73 | .circle.active { 74 | border-color: var(--line-border-fill); 75 | } 76 | 77 | .btn { 78 | background-color: var(--line-border-fill); 79 | border: 0; 80 | font-family: inherit; 81 | color: #fff; 82 | border-radius: 5px; 83 | padding: 8px 30px; 84 | margin: 5px; 85 | font-size: 14px; 86 | cursor: pointer; 87 | } 88 | 89 | .btn:active { 90 | transform: scale(0.98); 91 | } 92 | 93 | .btn:focus { 94 | outline: 0; 95 | } 96 | 97 | .btn:disabled { 98 | background-color: var(--line-border-empty); 99 | color: #999; 100 | cursor: not-allowed; 101 | } 102 | -------------------------------------------------------------------------------- /randomColorGenerator/index.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | body{ 4 | margin:0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | text-align: center; 8 | background: rgb(17,157,214); 9 | background: radial-gradient(circle, rgba(17,157,214,1) 0%, rgba(148,187,233,1) 100%); 10 | } 11 | 12 | .main{ 13 | height: 100vh; 14 | display: grid; 15 | grid-template-columns: 1fr; 16 | align-items: center; 17 | margin: 0 20vw; 18 | 19 | } 20 | 21 | .head{ 22 | font-size:3rem; 23 | font-weight: bold; 24 | } 25 | 26 | .demo{ 27 | display: flex; 28 | justify-content: center; 29 | align-items:center; 30 | gap:50px 31 | } 32 | 33 | #rgb{ 34 | background-color: black; 35 | color: white; 36 | width: max-content; 37 | padding: 10px; 38 | margin: 0 auto; 39 | border-radius: 4px; 40 | } 41 | 42 | #clrblock{ 43 | height: 200px; 44 | width: 200px; 45 | background-color: white; 46 | border: 3px solid black; 47 | border-radius: 10px; 48 | } 49 | 50 | .demo button{ 51 | width: max-content; 52 | height: max-content; 53 | padding: 10px; 54 | cursor: pointer; 55 | border-radius: 5px; 56 | } 57 | .demo button:active{ 58 | background-color: black; 59 | color: white; 60 | } 61 | 62 | 63 | @media screen and (max-width:580px) { 64 | .main{ 65 | margin: 0 10vw; 66 | } 67 | #clrblock{ 68 | width: 100px; 69 | height: 100px; 70 | } 71 | } -------------------------------------------------------------------------------- /randomColorGenerator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Random Color Generator 10 | 11 | 12 | 13 |
14 |
Random Color Generator
15 |
This app will let you generate a random color to any element you want on click of a button. 16 | This can generate random rgb color upto 16,777,216 different possible colors.
17 |
Demo
18 |
rgb(255, 255, 255)
19 |
20 |
21 | 22 |
23 |
24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /randomColorGenerator/index.js: -------------------------------------------------------------------------------- 1 | const colorBlock = document.querySelector("#clrblock") //Target the element you want to generate random color 2 | const rgbText= document.querySelector("#rgb") 3 | 4 | function generateRandomColor(){ 5 | const a = Math.round(Math.random()*255) 6 | const b = Math.round(Math.random()*255) 7 | const c = Math.round(Math.random()*255) 8 | 9 | colorBlock.style.backgroundColor=`rgb(${a},${b},${c})` 10 | rgbText.innerHTML=`rgb(${a}, ${b}, ${c})` 11 | } -------------------------------------------------------------------------------- /randomPasswordGenerator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Random Password Generator 14 | 15 | 16 |
17 |

Password Generator

18 |
19 |
20 | 21 | content_copy 22 |
23 |
24 |
25 |
26 | 27 | 28 |
29 | 30 |
31 |
32 | 33 |
    34 |
  • 35 | 36 | 37 |
    • 38 |
  • 39 | 40 | 41 |
    • 42 |
  • 43 | 44 | 45 |
    • 46 |
  • 47 | 48 | 49 |
    • 50 |
  • 51 | 52 | 53 |
    • 54 |
  • 55 | 56 | 57 |
    • 58 |
59 |
60 | 61 |
62 |
63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /randomPasswordGenerator/script.js: -------------------------------------------------------------------------------- 1 | const lengthSlider = document.querySelector(".pass-length input"), 2 | options = document.querySelectorAll(".option input"), 3 | generateBtn = document.querySelector(".generate-btn"), 4 | passwordInput = document.querySelector(".input-box input"), 5 | passwordIdicator = document.querySelector(".pass-indicator"), 6 | copyIcon = document.querySelector(".input-box span") 7 | 8 | 9 | const characters = { //Object of letters numbers and symbols 10 | lowercase: "abcdefghijklmnopqrstuvwxyz", 11 | uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", 12 | numbers: "1234567890", 13 | symbols: "!@#$%^*()_+{}[]|`~" 14 | 15 | } 16 | 17 | 18 | const generatePassword = () =>{ 19 | let staticPassword = '', 20 | randomPassword = '', 21 | passLength = lengthSlider.value, 22 | excludeDuplicate = false; 23 | 24 | 25 | options.forEach(option => { //looping through each optio's checkbox 26 | if(option.checked){ //if checkbx is checked 27 | //if checkbox id isn't exe duplicate && spaces 28 | if(option.id !== 'exe-duplicate' && option.id !== 'spaces'){ 29 | //adding particular key value from character to staticPassword 30 | staticPassword += characters[option.id] 31 | } 32 | else if(option.id === "spaces"){ //if checkbox id is spaces 33 | staticPassword += ` ${staticPassword} ` // added spaces in the end and the beginnig. 34 | } 35 | else{ //else pass true value to exclude duplicate 36 | excludeDuplicate = true; 37 | } 38 | } 39 | }) 40 | 41 | 42 | 43 | for(let i = 0 ; i < passLength; i++){ 44 | //getting random character from the static password 45 | let randdomChar = staticPassword[Math.floor(Math.random()*staticPassword.length)] 46 | if(excludeDuplicate){ //if exclude duplicate is true 47 | //if randomPassword doesn't contains the current random character or randomChar is equal 48 | //to space ' ' then add random character or random password else decrement i by 1 49 | !randomPassword.includes(randdomChar) || randdomChar == " " ? randomPassword += randdomChar : i-- 50 | } 51 | else{// else add randomChar to randomPassword 52 | randomPassword += randdomChar; 53 | } 54 | } 55 | passwordInput.value = randomPassword 56 | } 57 | 58 | const updatePasswordIndicator = () => { 59 | //if length slider value is less than equal 8 indicate "weak", if less than equal 16 indicate "medium" 60 | // else indicate "strong" you can also do it by if else conditions if you don't know the conditional statements 61 | passwordIdicator.id = lengthSlider.value <= 10 ? 'weak' : lengthSlider.value <= 20 ? 'medium' : 'strong' 62 | } 63 | 64 | const updateSlider = () => { 65 | document.querySelector(".pass-length span").innerHTML = lengthSlider.value 66 | generatePassword() 67 | updatePasswordIndicator() 68 | } 69 | 70 | updateSlider() 71 | 72 | const copyPassword = () => { 73 | navigator.clipboard.writeText(passwordInput.value) 74 | copyIcon.innerText = "check"; 75 | setTimeout(() => { 76 | copyIcon.innerText = "content_copy" 77 | }, 1000); 78 | } 79 | 80 | copyIcon.addEventListener("click", copyPassword) 81 | lengthSlider.addEventListener("input", updateSlider) 82 | generateBtn.addEventListener("click", generatePassword) 83 | -------------------------------------------------------------------------------- /randomPasswordGenerator/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | 9 | body{ 10 | display: flex; 11 | min-height: 100vh; 12 | align-items: center; 13 | justify-content: center; 14 | background-color: rgb(251, 198, 206); 15 | } 16 | 17 | .container{ 18 | width: 450px; 19 | background: white; 20 | border-radius: 8px; 21 | } 22 | 23 | .container h2{ 24 | font-weight: 600; 25 | font-size: 1.3rem; 26 | padding: 20px 25px /*1rem 1.75rem*/; 27 | border-bottom: 1px solid #d4dbe5; 28 | } 29 | 30 | .wrapper{ 31 | margin: 20px 23px /*1.25rem 1.75rem*/; 32 | 33 | } 34 | 35 | .input-box input{ 36 | width: 100%; 37 | height: 48px; 38 | font-size: 16px; 39 | border: 1px solid #aaa; 40 | font-weight: 500; 41 | border-radius: 4px; 42 | padding: 0px 8px; 43 | color: black; 44 | letter-spacing: 1.2px; 45 | background: none; 46 | } 47 | 48 | .input-box{ 49 | position: relative; 50 | } 51 | 52 | .input-box span{ 53 | position: absolute; 54 | right: 10px; 55 | top: 12px; 56 | cursor: pointer; 57 | color: #707070; 58 | } 59 | 60 | 61 | .wrapper .pass-indicator{ 62 | position: relative; 63 | width: 100%; 64 | height: 4px; 65 | background-color: #dfdfdf; 66 | border-radius: 25px; 67 | margin-top: 10px; 68 | } 69 | 70 | .pass-indicator::before{ 71 | position: absolute; 72 | content: ''; 73 | height: 100%; 74 | width: 50%; 75 | background: #f1c40b; 76 | transition: width 0.3s ease; 77 | } 78 | 79 | .pass-indicator#weak::before{ 80 | width: 30%; 81 | background: red; 82 | } 83 | 84 | .pass-indicator#medium::before{ 85 | width: 70%; 86 | background-color: rgb(239, 239, 68); 87 | } 88 | 89 | .pass-indicator#strong::before{ 90 | width: 100%; 91 | background-color: rgb(13, 187, 13); 92 | } 93 | 94 | .wrapper .pass-length{ 95 | margin: 20px 0px 20px 0px; 96 | } 97 | 98 | .details { 99 | display: flex; 100 | justify-content: space-between; 101 | } 102 | 103 | .pass-length input{ 104 | width: 100%; 105 | height: 5px; 106 | accent-color: lightpink; 107 | cursor: pointer; 108 | } 109 | 110 | .pass-length input:hover{ 111 | accent-color: rgb(250, 140, 159); 112 | } 113 | 114 | .pass-settings .options{ 115 | display: flex; 116 | list-style: none; 117 | flex-wrap: wrap; 118 | margin-top: 10px; 119 | } 120 | 121 | .pass-settings .options .option{ 122 | display: flex; 123 | align-items: center; 124 | margin-bottom: 10px; 125 | width: calc(100%/2); 126 | } 127 | 128 | .options .option:first-child{ 129 | pointer-events: none; 130 | } 131 | 132 | .options .option:first-child input{ 133 | opacity: 0.7; 134 | } 135 | 136 | .options .option input{ 137 | cursor: pointer; 138 | height: 16px; 139 | width: 16px; 140 | } 141 | 142 | .options .option label{ 143 | cursor: pointer; 144 | padding-left: 8px; 145 | } 146 | 147 | .option input{ 148 | accent-color: lightpink; 149 | } 150 | 151 | .option input:active{ 152 | accent-color: lightpink; 153 | } 154 | 155 | .wrapper .generate-btn{ 156 | width: 100%; 157 | font-size: 16px; 158 | padding: 8px 5px; 159 | margin-top: 5px; 160 | border-radius: 5px; 161 | background-color: lightpink; 162 | color: black; 163 | border: 1px solid black; 164 | cursor: pointer; 165 | text-transform: uppercase; 166 | } -------------------------------------------------------------------------------- /rockpaperscissors/app.js: -------------------------------------------------------------------------------- 1 | const computer = document.getElementById("computer"); 2 | const user = document.getElementById("you"); 3 | const result = document.getElementById("result"); 4 | const buttons = document.querySelectorAll("button"); 5 | 6 | let userOutput; 7 | let computerOutput; 8 | let displayResult; 9 | 10 | buttons.forEach((button) => 11 | button.addEventListener("click", (e) => { 12 | userOutput = e.target.id; 13 | user.innerHTML = userOutput; 14 | computerChoice(); 15 | score(); 16 | }) 17 | ); 18 | 19 | function computerChoice() { 20 | const randomNumber = Math.floor(Math.random() * buttons.length) + 1; 21 | 22 | if (randomNumber === 1) { 23 | computerOutput = "rock"; 24 | } 25 | if (randomNumber === 2) { 26 | computerOutput = "scissors"; 27 | } 28 | if (randomNumber === 3) { 29 | computerOutput = "paper"; 30 | } 31 | computer.innerHTML = computerOutput; 32 | } 33 | 34 | function score() { 35 | if (computerOutput === userOutput) { 36 | displayResult = "Draw!😐"; 37 | } 38 | if (computerOutput === "rock" && userOutput === "paper") { 39 | displayResult = "You Win!🎉"; 40 | } 41 | if (computerOutput === "rock" && userOutput === "scissors") { 42 | displayResult = "You Lose!😭"; 43 | } 44 | if (computerOutput === "paper" && userOutput === "rock") { 45 | displayResult = "You Lose!😭"; 46 | } 47 | if (computerOutput === "paper" && userOutput === "scissors") { 48 | displayResult = "You Win!🎉"; 49 | } 50 | if (computerOutput === "scissors" && userOutput === "paper") { 51 | displayResult = "You Lose!😭"; 52 | } 53 | if (computerOutput === "scissors" && userOutput === "rock") { 54 | displayResult = "You Win!🎉"; 55 | } 56 | 57 | result.innerHTML = displayResult; 58 | } 59 | -------------------------------------------------------------------------------- /rockpaperscissors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Rock Paper Scissors 9 | 10 | 11 |

Rock Paper Scissors

12 |
13 |

PC:

14 |

You:

15 |

Result:

16 |
17 | 18 |
19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /rockpaperscissors/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"); 2 | 3 | body { 4 | font-family: "Press Start 2P", cursive; 5 | background: url("https://images.unsplash.com/photo-1620641648331-d48c0439346a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1634&q=80") 6 | no-repeat center center fixed; 7 | -webkit-background-size: cover; 8 | -moz-background-size: cover; 9 | -o-background-size: cover; 10 | background-size: cover; 11 | color: #141010; 12 | } 13 | 14 | h1 { 15 | font-size: 5rem; 16 | text-align: center; 17 | margin: 5rem; 18 | } 19 | 20 | .stats { 21 | display: flex; 22 | justify-content: space-around; 23 | font-size: 1.5rem; 24 | text-transform: capitalize; 25 | margin: 5rem; 26 | } 27 | span { 28 | color: #dc2f2f; 29 | } 30 | 31 | .btn { 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | } 36 | 37 | button { 38 | margin: 5rem; 39 | border-radius: 1rem; 40 | font-family: "Press Start 2P", cursive; 41 | color: #ffffff; 42 | font-size: 20px; 43 | background: #141010; 44 | padding: 1rem 2rem; 45 | font-size: 1.5rem; 46 | text-decoration: none; 47 | cursor: pointer; 48 | } 49 | 50 | button:hover { 51 | background: white; 52 | color: #141010; 53 | text-decoration: none; 54 | } 55 | -------------------------------------------------------------------------------- /rotatingNavigation/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false, 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /rotatingNavigation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | Rotating Navigation 14 | 15 | 16 |
17 |
18 |
19 | 22 | 25 |
26 |
27 | 28 |
29 |

Amazing Article

30 | Aman Mandal 31 |

32 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque 33 | ut, ipsa voluptatibus in modi placeat aperiam ullam porro, autem culpa 34 | asperiores est sit quasi, perferendis exercitationem recusandae error? 35 | Explicabo necessitatibus ullam rerum iste ex totam nesciunt dicta 36 | mollitia consequuntur recusandae, doloribus quisquam delectus 37 | voluptatum sapiente libero quaerat voluptates sed deleniti amet vitae 38 | velit quae, numquam assumenda! Earum quo eaque, nesciunt laudantium, 39 | eum rerum et quam explicabo facilis consectetur consequatur velit 40 | quasi labore, blanditiis praesentium error neque natus laborum hic 41 | illo dicta. Labore, deleniti molestiae cupiditate autem, neque 42 | aspernatur recusandae delectus doloribus praesentium inventore itaque 43 | quod accusamus hic minima non dolores. 44 |

45 | 46 |

My Dog

47 | Dog 51 |

52 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos odit 53 | aliquid corrupti obcaecati, minus amet! Dolores, blanditiis beatae cum 54 | animi laborum ea nihil adipisci consequatur iusto natus suscipit quis, 55 | debitis corporis porro in harum commodi perferendis. Quas excepturi ut 56 | quod aspernatur suscipit iure tenetur explicabo assumenda beatae 57 | perferendis officia maiores voluptas, harum quam vel laudantium rerum 58 | temporibus dicta, placeat veniam. Eius corporis molestias, optio vero 59 | ea porro sed eligendi ex et provident, ducimus nulla ut! 60 |

61 |
62 |
63 | 64 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /rotatingNavigation/script.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const btnOpen = document.getElementById('open') 4 | const btnClose = document.getElementById('close') 5 | const container = document.querySelector('.container') 6 | 7 | btnOpen.addEventListener('click', () => container.classList.add('show-nav')) 8 | 9 | btnClose.addEventListener('click', () => container.classList.remove('show-nav')) 10 | -------------------------------------------------------------------------------- /rotatingNavigation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Lato', sans-serif; 9 | margin: 0; 10 | overflow-x: hidden; 11 | background-color: #333; 12 | color: #222; 13 | } 14 | 15 | .container { 16 | background-color: #fafafa; 17 | transform-origin: top left; 18 | transition: transform 0.5s linear; 19 | width: 100vw; 20 | min-height: 100vh; 21 | padding: 50px; 22 | } 23 | 24 | .container.show-nav { 25 | transform: rotate(-20deg); 26 | } 27 | 28 | .circle-container { 29 | position: fixed; 30 | top: -100px; 31 | left: -100px; 32 | } 33 | 34 | .container.container.show-nav .circle { 35 | transform: rotate(-70deg); 36 | } 37 | 38 | .circle { 39 | position: relative; 40 | width: 200px; 41 | height: 200px; 42 | background-color: #ff7979; 43 | border-radius: 50%; 44 | transition: transform 0.5s linear; 45 | } 46 | 47 | .circle button { 48 | cursor: pointer; 49 | position: absolute; 50 | top: 50%; 51 | left: 50%; 52 | height: 100px; 53 | background: transparent; 54 | border: 0; 55 | font-size: 1.6rem; 56 | color: #fff; 57 | } 58 | 59 | .circle button:focus { 60 | outline: none; 61 | } 62 | 63 | .circle button#open { 64 | left: 60%; 65 | } 66 | 67 | .circle button#close { 68 | top: 60%; 69 | transform: rotate(90deg); 70 | transform-origin: top left; 71 | } 72 | 73 | .container.show-nav + nav li { 74 | transform: translateX(0); 75 | transition-delay: 0.3s; 76 | } 77 | 78 | nav { 79 | position: fixed; 80 | left: 0; 81 | bottom: 40px; 82 | z-index: 100; 83 | } 84 | 85 | nav ul { 86 | list-style-type: none; 87 | padding-left: 30px; 88 | } 89 | 90 | nav ul li { 91 | color: #fff; 92 | margin: 40px 0; 93 | text-transform: uppercase; 94 | transform: translateX(-100%); 95 | transition: transform 0.4s ease-in; 96 | } 97 | 98 | nav ul li i { 99 | margin-right: 10px; 100 | font-size: 20px; 101 | } 102 | 103 | nav ul li + li { 104 | margin-left: 15px; 105 | transform: translateX(-150%); 106 | } 107 | 108 | nav ul li + li + li { 109 | margin-left: 30px; 110 | transform: translateX(-200%); 111 | } 112 | 113 | .content img { 114 | max-width: 100%; 115 | } 116 | 117 | .content { 118 | max-width: 1000px; 119 | margin: 50px auto; 120 | } 121 | 122 | .content h1 { 123 | margin: 0; 124 | } 125 | 126 | .content small { 127 | color: #555; 128 | font-style: italic; 129 | } 130 | 131 | .content p { 132 | line-height: 1.5; 133 | color: #333; 134 | } 135 | -------------------------------------------------------------------------------- /searchBar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Search Bar 5 | 6 | 7 |
8 | 12 | 13 |
    14 |
  • Karl
    • 15 |
  • Per
    • 16 |
  • Katie
    • 17 |
  • Lupe
    • 18 |
  • Katherine
    • 19 |
  • Kelly
    • 20 |
  • Kurt
    • 21 |
  • Fred
    • 22 |
23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /searchBar/index.js: -------------------------------------------------------------------------------- 1 | 2 | document.getElementById("searchInput").addEventListener("keyup", function(event) { 3 | let searchQuery = event.target.value.toLowerCase(); 4 | let allNamesDOMCollection = document.getElementsByClassName('name'); 5 | 6 | for (let counter = 0; counter < allNamesDOMCollection.length; counter++) { 7 | const currentName = allNamesDOMCollection[counter].textContent.toLowerCase(); 8 | 9 | if (currentName.includes(searchQuery)) { 10 | allNamesDOMCollection[counter].style.display = "block"; 11 | } else { 12 | allNamesDOMCollection[counter].style.display = "none"; 13 | } 14 | } 15 | }); -------------------------------------------------------------------------------- /searchBar/styles.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #container { 7 | width: 300px; 8 | margin: 0 auto; 9 | margin-top: 20px; 10 | background-color: royalblue; 11 | } 12 | 13 | #search { 14 | display: flex; 15 | padding: 20px; 16 | background-color: orange; 17 | } 18 | 19 | #search label { 20 | font-size: 24px; 21 | font-weight: bold; 22 | margin-right: 15px; 23 | } 24 | 25 | #results { 26 | display: block; 27 | padding: 10px; 28 | } 29 | 30 | #results .name { 31 | width: 100%; 32 | padding: 10px 0; 33 | text-align: center; 34 | background-color: white; 35 | margin-bottom: 10px; 36 | list-style-type: none; 37 | } -------------------------------------------------------------------------------- /weatherly/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Weatherly 12 | 13 | 14 | 15 | 16 |
17 |
18 | 19 | 20 | 24 |
25 |
26 |

Weather in Delhi

27 |

41°C

28 |
29 | 30 |
Cloudy
31 |
32 |
Humidity: 60%
33 |
Wind Speed: 6.2 km/h
34 | 35 | 36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /weatherly/script.js: -------------------------------------------------------------------------------- 1 | let weather = { 2 | apiKey: "4451cf92356da4845b53370653fca6c2", 3 | fetchWeather: function(city) { 4 | fetch( 5 | "https://api.openweathermap.org/data/2.5/weather?q=" 6 | + city 7 | + " &units=metric&appid=" 8 | + this.apiKey 9 | ) 10 | .then((response) => response.json()) 11 | .then((data) =>this.displayWeather(data)); 12 | }, 13 | displayWeather: function(data) { 14 | const { name } = data; 15 | const { icon, description } = data.weather[0]; 16 | const { temp, humidity } = data.main; 17 | const { speed } = data.wind; 18 | 19 | document.querySelector(".city").innerText = name; 20 | document.querySelector(".icon").src = 21 | "https://openweathermap.org/img/wn/" + icon + ".png"; 22 | document.querySelector(".description").innerText = description; 23 | document.querySelector(".temp").innerText = temp + "°C"; 24 | document.querySelector(".humidity").innerText = "Humidity: " + humidity + "%"; 25 | document.querySelector(".wind").innerText = "Wind speed: " + speed + " km/h"; 26 | document.querySelector(".weather").classList.remove("loading"); 27 | document.body.style.backgroundImage = "url('https://source.unsplash.com/1600x900/?" + name + "')"; 28 | }, 29 | search: function () { 30 | this.fetchWeather(document.querySelector(".search-bar").value); 31 | }, 32 | }; 33 | document.querySelector(".search button").addEventListener("click", function() { 34 | weather.search(); 35 | }); 36 | 37 | document.querySelector(".search-bar").addEventListener("keyup" , function(event) { 38 | if (event.key == "Enter") { 39 | weather.search(); 40 | 41 | } 42 | }); 43 | -------------------------------------------------------------------------------- /weatherly/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | margin: 0; 7 | font-family: 'Open Sans', sans-serif; 8 | background:black; 9 | background-image: url("https://source.unsplash.com/1600x900/?landscape"); 10 | font-size: 100%; 11 | } 12 | 13 | .card { 14 | background: rgba(255, 255, 255, 0.795); 15 | color: black; 16 | padding: 2em; 17 | border-radius: 30px; 18 | max-width: 290px; 19 | height: 300px; 20 | margin: 0cm; 21 | width: 90%; 22 | 23 | } 24 | 25 | 26 | .search{ 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | } 31 | button{ 32 | margin: 0.8em; 33 | border-radius: 40%; 34 | border: none; 35 | height: 35px; 36 | width: 35px; 37 | outline: none; 38 | background: rgba(7, 1, 1, 0.863); 39 | color: white; 40 | cursor: pointer; 41 | transition: 0.2s ease-in-out; 42 | } 43 | input.search-bar{ 44 | border: none; 45 | outline: none; 46 | padding: 0.4em 1em; 47 | border-radius: 24px; 48 | background: rgba(0, 0, 0, 0.863); 49 | color: white; 50 | font-family: inherit; 51 | font-size: 105%; 52 | width: calc(100%-100px); 53 | } 54 | button:hover{ 55 | background: #0c0202; 56 | } 57 | h1.temp{ 58 | margin:0; 59 | margin-bottom: 0.4em; 60 | } 61 | .flex{ 62 | display: flex; 63 | align-items: center; 64 | } 65 | .description{ 66 | text-transform: capitalize; 67 | margin-left: 8px; 68 | } 69 | .weather.loading{ 70 | visibility: hidden; 71 | max-height: 20px; 72 | position: relative; 73 | } 74 | .weather.loading:after{ 75 | visibility: visible; 76 | content: "Loading..."; 77 | color: white; 78 | position: absolute; 79 | top: 0; 80 | left: 20px; 81 | } 82 | .weather.loading { 83 | visibility: "hidden"; 84 | max-height: 20px; 85 | position: relative; 86 | } 87 | .weather.loading:after{ 88 | visibility: visible; 89 | content: "Loading..."; 90 | color: white; 91 | position: absolute; 92 | top: 0; 93 | left: 20px;} 94 | .city{ 95 | font-size: 30px; 96 | margin-bottom: 0px; 97 | } 98 | .temp{ 99 | font-size: 46px; 100 | margin-bottom: 0px; 101 | } 102 | .description{ 103 | font-weight:light; 104 | font-size: 15px; 105 | } 106 | .humidity{ 107 | font-weight: light; 108 | font-size: 15px; 109 | } 110 | .wind{ 111 | font-size: 15px; 112 | } --------------------------------------------------------------------------------