├── yourPlayground.js ├── notes ├── baby-capstone.js ├── console-log.js ├── redBlueGreenSquares.js ├── variables.js ├── mini-weather-app.js ├── arrays.js ├── tip-calculator.js ├── objects.js ├── conditions.js ├── functions.js ├── promises-async-await-apis.js └── promise-examples.js ├── functions └── sum │ ├── solution │ ├── script.js │ └── index.html │ └── exercise │ ├── index.html │ └── script.js ├── style.css ├── projects ├── fightingGame │ ├── exercise │ │ ├── style.css │ │ ├── index.html │ │ └── script.js │ └── solution │ │ ├── sounds │ │ ├── fastheal.mp3 │ │ ├── quickhit.mp3 │ │ ├── fastpunch.mp3 │ │ └── quickheal.mp3 │ │ ├── style.css │ │ ├── index.html │ │ └── solution.js ├── weather-app │ ├── exercise │ │ ├── style.css │ │ ├── script.js │ │ └── index.html │ └── solution │ │ ├── style.css │ │ ├── script.js │ │ └── index.html ├── rockpaperscissors │ ├── exercise │ │ ├── style.css │ │ ├── index.html │ │ └── script.js │ └── solution │ │ ├── style.css │ │ ├── index.html │ │ └── script.js ├── stopwatch │ ├── solution │ │ ├── index.html │ │ ├── style.css │ │ └── script.js │ └── exercise │ │ ├── index.html │ │ ├── style.css │ │ └── script.js ├── tip-calculator │ ├── exercise │ │ ├── style.css │ │ ├── index.html │ │ └── script.js │ └── solution │ │ ├── style.css │ │ ├── index.html │ │ └── script.js └── fetchmovies │ └── solution │ ├── style.css │ ├── index.html │ └── script.js ├── replit.nix ├── exercises ├── findMax.js ├── arraysorting.js ├── palindromechecker.js ├── converthourstoseconds.js ├── daysinamonth.js └── savingsstrategy.js ├── api ├── dogRandom │ ├── index.html │ └── script.js └── superHero │ ├── index.html │ └── script.js ├── classes ├── banksClass │ ├── index.html │ └── script.js └── carClass │ └── script.js ├── dom └── red-yellow-green │ ├── index.html │ └── script.js ├── index.html ├── .replit └── playground.js /yourPlayground.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /notes/baby-capstone.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/sum/solution/script.js: -------------------------------------------------------------------------------- 1 | console.log("Sum solution")) -------------------------------------------------------------------------------- /notes/console-log.js: -------------------------------------------------------------------------------- 1 | console.log('hello world') 2 | console.log('Rafeh Qazi') -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-family: 'Inter', sans-serif; 3 | font-family: 'Lato', sans-serif; 4 | } -------------------------------------------------------------------------------- /projects/fightingGame/exercise/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: 'red'; 3 | } 4 | 5 | #result { 6 | background:'blue'; 7 | } -------------------------------------------------------------------------------- /notes/redBlueGreenSquares.js: -------------------------------------------------------------------------------- 1 | // Go to the link below 👇 2 | 3 | // https://replit.com/@cleverprogrammer/DOM-Manipulation-Lesson#index.html -------------------------------------------------------------------------------- /notes/variables.js: -------------------------------------------------------------------------------- 1 | name = 'Peter Pan' 2 | console.log(name) 3 | 4 | sentence = 'how are you doing today, nice to see you, hope you have a great day!' -------------------------------------------------------------------------------- /functions/sum/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | Sum - Solution 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /replit.nix: -------------------------------------------------------------------------------- 1 | { pkgs }: { 2 | deps = [ 3 | pkgs.nodePackages.vscode-langservers-extracted 4 | pkgs.nodePackages.typescript-language-server 5 | pkgs.nodejs-16_x 6 | ]; 7 | } -------------------------------------------------------------------------------- /projects/fightingGame/solution/sounds/fastheal.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/JavaScript-Course-by-Clever-Programmer-/HEAD/projects/fightingGame/solution/sounds/fastheal.mp3 -------------------------------------------------------------------------------- /projects/fightingGame/solution/sounds/quickhit.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/JavaScript-Course-by-Clever-Programmer-/HEAD/projects/fightingGame/solution/sounds/quickhit.mp3 -------------------------------------------------------------------------------- /projects/fightingGame/solution/sounds/fastpunch.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/JavaScript-Course-by-Clever-Programmer-/HEAD/projects/fightingGame/solution/sounds/fastpunch.mp3 -------------------------------------------------------------------------------- /projects/fightingGame/solution/sounds/quickheal.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/JavaScript-Course-by-Clever-Programmer-/HEAD/projects/fightingGame/solution/sounds/quickheal.mp3 -------------------------------------------------------------------------------- /notes/mini-weather-app.js: -------------------------------------------------------------------------------- 1 | let weather = prompt('How is the weather?') 2 | 3 | if (weather == 'rainy') { 4 | console.log('Grab your umbrella ☔') 5 | } else { 6 | console.log('Wear your sunglasses 😎') 7 | } -------------------------------------------------------------------------------- /projects/weather-app/exercise/style.css: -------------------------------------------------------------------------------- 1 | #city-input, #weather-output { 2 | max-width: 400px; 3 | margin: 0 auto; 4 | } 5 | 6 | .banner { 7 | color: #FFD23F; 8 | font-family: sans-serif; 9 | } -------------------------------------------------------------------------------- /projects/weather-app/solution/style.css: -------------------------------------------------------------------------------- 1 | #city-input, #weather-output { 2 | max-width: 400px; 3 | margin: 0 auto; 4 | } 5 | 6 | .banner { 7 | color: #FFD23F; 8 | font-family: sans-serif; 9 | } -------------------------------------------------------------------------------- /notes/arrays.js: -------------------------------------------------------------------------------- 1 | // Arrays stores items through indexes starting from 0 2 | const colors = ["blue", "red", "yellow"] 3 | 4 | // What does this print? 5 | console.log(colors[0]) 6 | 7 | // How can we console log yellow from the array? -------------------------------------------------------------------------------- /notes/tip-calculator.js: -------------------------------------------------------------------------------- 1 | food = Number(prompt('how much was the food?')) 2 | tipPercentage = Number(prompt('tip %?')) / 100 3 | tipAmount = food * tipPercentage 4 | total = food + tipAmount 5 | 6 | console.log('tip amount', tipAmount) 7 | console.log('total', total) -------------------------------------------------------------------------------- /exercises/findMax.js: -------------------------------------------------------------------------------- 1 | // Test you code by forking this repl: 2 | // 👉 3 | 4 | // Write a function that takes in an array of numbers and returns the largest number 5 | 6 | function findMax (array) { 7 | 8 | } 9 | 10 | //Topics: loops, arrays, conditions, -------------------------------------------------------------------------------- /exercises/arraysorting.js: -------------------------------------------------------------------------------- 1 | // Test you code by forking this repl: 2 | // 👉 3 | 4 | 5 | // Write a function that takes in an array and sort the numbers inside from least to greatest 6 | 7 | function sortArray (array) { 8 | 9 | } 10 | 11 | // BONUS sort the array without using .sort() 12 | 13 | -------------------------------------------------------------------------------- /notes/objects.js: -------------------------------------------------------------------------------- 1 | // Objects describes something to a computer 2 | 3 | // What does this object describe? 4 | let person = { 5 | name: 'Elon', 6 | age: 50, 7 | alive: true, 8 | } 9 | 10 | // What would this print? 11 | console.log(person.name) 12 | 13 | // How would you print the persons age? 14 | -------------------------------------------------------------------------------- /projects/fightingGame/exercise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | replit 8 | 9 | 10 | 11 | 12 | Code the Game class in script.js 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /exercises/palindromechecker.js: -------------------------------------------------------------------------------- 1 | // Test you code by forking this repl: 2 | // 👉 3 | 4 | 5 | // Write a function that takes in string and checks if it is a Palindrome 6 | // A palindrome is a word that is the same forwards and backwards! 7 | // Ex: racecar -> racecar 8 | 9 | function isPalindrome (string) { 10 | // Should return true IF it's a palindrome 11 | } 12 | 13 | 14 | //Topics: Strings, loops -------------------------------------------------------------------------------- /notes/conditions.js: -------------------------------------------------------------------------------- 1 | // How would you determine what to wear based on the weather? 2 | 3 | let weather = prompt("How is the weather?") 4 | 5 | if(weather == 'rainy') { 6 | console.log('Grab your umbrella ☔') 7 | } else { 8 | console.log('Wear your sunglasses 😎') 9 | } 10 | 11 | // What do you change in the code so that your can wear sunglasses? 12 | 13 | 14 | // BONUS: What's the difference between '=' and '=='? -------------------------------------------------------------------------------- /api/dogRandom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | replit 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /exercises/converthourstoseconds.js: -------------------------------------------------------------------------------- 1 | // Test you code by forking this repl: 2 | // 👉 https://replit.com/@CleverLance/ConvertHoursToSeconds#solution.js 3 | 4 | // https://www.loom.com/share/3de1aa5d007047ef82652530f04600b1 5 | 6 | // Write a function that takes a parameter (hours) and converts 7 | // it to seconds 8 | 9 | function howManySeconds(hours) { 10 | // Your function should return an integer 11 | // of how many seconds are in the hour 12 | } 13 | 14 | //Topics: Variables,functions, Math 15 | 16 | -------------------------------------------------------------------------------- /classes/banksClass/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | replit 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

Balance: 0

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /exercises/daysinamonth.js: -------------------------------------------------------------------------------- 1 | // Test you code by forking this repl: 2 | // 👉 3 | 4 | // Create a function that takes the month and year (as integers) 5 | // and returns the number of DAYS in that month 6 | 7 | // Hints: 8 | // Don't forget about leap year! 9 | // Keep in mind which month has 30 days, 31 days, and 28 days 10 | // Use everything you learned to get to the answer 11 | 12 | const daysInMonth = (month,year) => { 13 | 14 | } 15 | 16 | // Example: 17 | // daysInMonth(2,2018) -> 28 18 | // days(4,654) -> 30 19 | // days(2,2020) -> 29 -------------------------------------------------------------------------------- /dom/red-yellow-green/index.html: -------------------------------------------------------------------------------- 1 |
2 |

Hello Night!

3 |
4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /exercises/savingsstrategy.js: -------------------------------------------------------------------------------- 1 | // Test you code by forking this repl: 2 | // 👉 3 | 4 | 5 | // The 50-30-20 strategy is a simple way to budget 6 | // which involves spending 50% of after-tax income on needs, 7 | // 30% after tax income on wants, 8 | // 20% after-tax income on savings or paying off debt. 9 | 10 | // Create a function that takes an income amount and return an OBJECT with what they have for needs, wants, and savings 11 | 12 | function savingsStrategy (income) { 13 | 14 | } 15 | 16 | // Ex: 17 | // Input: fiftyThirtyTwenty(10000) 18 | // Output: { "Needs": 5000, "Wants": 3000, "Savings": 2000 } 19 | 20 | 21 | //Topics: Objects -------------------------------------------------------------------------------- /functions/sum/exercise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | replit 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /api/dogRandom/script.js: -------------------------------------------------------------------------------- 1 | // https://dog.ceo/api/breeds/image/random 2 | // .then - Promises 3 | // asynchronous programming 4 | 5 | // stuff you don't have to wait for 6 | console.log('run 1st') 7 | 8 | const dogImageDiv = document.getElementById('dogImage') 9 | const dogButton = document.getElementById('dogButton') 10 | 11 | // stuff you have to wait for 12 | const getNewDog = () => { 13 | fetch('https://dog.ceo/api/breeds/image/random') 14 | .then(response => response.json()) 15 | .then(json => { 16 | dogImageDiv.innerHTML = `` 17 | }) 18 | } 19 | 20 | dogButton.onclick = () => getNewDog() 21 | 22 | console.log('run 3rd') -------------------------------------------------------------------------------- /api/superHero/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | replit 8 | 9 | 10 | 11 | 12 |

🌟 Super Hero App

13 |

You can search for a super hero like "batman" or "thanos" or... You can generate a random hero

14 | 15 | 16 | 17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /projects/rockpaperscissors/exercise/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | width: 100%; 4 | padding: 0; 5 | margin:0; 6 | } 7 | 8 | .wrapper { 9 | background: #1c1c1c; 10 | color: white; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | width: 100%; 15 | height: 100%; 16 | flex-direction: column; 17 | } 18 | 19 | .buttons { 20 | display: flex; 21 | gap: 20px; 22 | } 23 | 24 | button { 25 | height: 100px; 26 | width: 100px; 27 | font-size: 48px; 28 | border-radius: 30px; 29 | cursor: pointer; 30 | 31 | } 32 | 33 | .resultContainer { 34 | font-size: 2rem; 35 | text-align: center; 36 | margin-top: 20px; 37 | } 38 | 39 | -------------------------------------------------------------------------------- /projects/rockpaperscissors/solution/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | width: 100%; 4 | padding: 0; 5 | margin:0; 6 | } 7 | 8 | .wrapper { 9 | background: #1c1c1c; 10 | color: white; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | width: 100%; 15 | height: 100%; 16 | flex-direction: column; 17 | } 18 | 19 | .buttons { 20 | display: flex; 21 | gap: 20px; 22 | } 23 | 24 | button { 25 | height: 100px; 26 | width: 100px; 27 | font-size: 48px; 28 | border-radius: 30px; 29 | cursor: pointer; 30 | 31 | } 32 | 33 | .resultContainer { 34 | font-size: 2rem; 35 | text-align: center; 36 | margin-top: 20px; 37 | } 38 | 39 | -------------------------------------------------------------------------------- /notes/functions.js: -------------------------------------------------------------------------------- 1 | // Functions are just tricks or commands you teach your computer! 2 | 3 | 4 | // This is the instructions on WHAT you want your computer to do 5 | function sayMyName(name) { 6 | console.log(name) 7 | } 8 | 9 | // This is you TELLING your computer what to do 10 | sayMyName('Qazi') 11 | 12 | 13 | // What would this function print out? 14 | sayMyName('Lance') 15 | 16 | 17 | // BONUS: How come these two function calls print two different names if they are both called sayMyName? 18 | 19 | 20 | // Remember this function? 21 | function sum(a,b) { 22 | return a+b 23 | } 24 | 25 | let result = sum(9,10) 26 | 27 | // What would this print out? How does "return" work in the function? 28 | console.log(result) -------------------------------------------------------------------------------- /projects/stopwatch/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Stopwatch 9 | 10 | 11 |
12 |

Stopwatch

13 |

Vanilla JavaScript Stopwatch

14 |

00:00

15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /functions/sum/exercise/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | TODO: Write a function that sums two numbers 3 | TODO: Write a function that subtracts two numbers 4 | TODO: Write a function that divides two numbers. 5 | TODO: Write a function that multiplies two numbers. 6 | *NOTE* be sure to handle dividing by zero 😉 7 | ES5 Syntax: function Add(){} 8 | ES6 Syntax (Arrow function): const add = () => {} 9 | */ 10 | 11 | function add(){ 12 | //Add function here 13 | } 14 | 15 | function sub(){ 16 | //Subtract function here 17 | } 18 | 19 | function div(){ 20 | //Divide function here 21 | } 22 | 23 | function mul(){ 24 | //Multiply function here 25 | } 26 | 27 | console.log('hello from the SUM exercise') 28 | /* 29 | TODO: create a function that console logs the result of any of the above operations. 30 | */ -------------------------------------------------------------------------------- /projects/rockpaperscissors/exercise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | replit 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 | 23 |
24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /projects/rockpaperscissors/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | replit 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 | 23 |
24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /projects/stopwatch/exercise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | replit 8 | 9 | 10 | 11 | 12 |
Credits to mikkegoes.com
13 |
14 |

JavaScript Stopwatch

15 |

00:00

16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /projects/stopwatch/solution/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #ffa600; 3 | font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 4 | Helvetica, Arial, 'Lucida Grande', sans-serif; 5 | height: 100%; 6 | } 7 | 8 | .wrapper { 9 | width: 800px; 10 | margin: 30px auto; 11 | color: white; 12 | text-align: center; 13 | } 14 | 15 | h1, 16 | h2, 17 | h3 { 18 | font-family: 'Roboto', sans-serif; 19 | font-weight: 100; 20 | font-size: 2.6em; 21 | text-transform: uppercase; 22 | } 23 | 24 | #seconds, 25 | #tens { 26 | font-size: 2em; 27 | } 28 | 29 | button { 30 | border-radius: 5px; 31 | background: #ffa600; 32 | color: white; 33 | border: solid 1px white; 34 | text-decoration: none; 35 | cursor: pointer; 36 | font-size: 1.2em; 37 | padding: 18px 10px; 38 | width: 180px; 39 | margin: 10px; 40 | outline: none; 41 | &:hover { 42 | @include transition; 43 | background: white; 44 | border: solid 1px white; 45 | color: #ffa600; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /dom/red-yellow-green/script.js: -------------------------------------------------------------------------------- 1 | console.log('hello') 2 | 3 | let titleDiv = document.getElementById('title') 4 | 5 | console.log('before: ', titleDiv.innerText) 6 | 7 | let message = 'Square Color Counter 🚀' 8 | 9 | titleDiv.innerText = message; 10 | 11 | console.log('after: ', titleDiv.innerText) 12 | 13 | titleDiv.innerHTML = `

${message}

` 14 | 15 | titleDiv.style.backgroundColor = 'blue' 16 | 17 | const squares = document.querySelectorAll('.colorSquare') 18 | 19 | // forEach 20 | const timesClicked = {'red': 0, 'yellow': 0, 'green': 0} 21 | squares.forEach(square => { 22 | square.onclick = () => { 23 | timesClicked[square.value] += 1 24 | square.innerText = timesClicked[square.value] 25 | } 26 | }) 27 | function clearScores() { 28 | timesClicked.red = 0 29 | timesClicked.yellow = 0 30 | timesClicked.green = 0 31 | squares.forEach(square => { 32 | square.innerText = '' 33 | }) 34 | } 35 | 36 | const clearGameBtn = document.getElementById('clear-game') 37 | clearGameBtn.onclick = () => clearScores() 38 | 39 | -------------------------------------------------------------------------------- /projects/fightingGame/solution/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: 'red'; 3 | } 4 | 5 | body { 6 | background:'blue'; 7 | width: 100%; 8 | height: 100vh; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .menu { 16 | width: 50%; 17 | display: flex; 18 | justify-content: space-between; 19 | align-items: center; 20 | } 21 | 22 | #p1 { 23 | width:80px; 24 | height:80px; 25 | } 26 | 27 | .p1Choices { 28 | display: flex; 29 | flex-direction: column; 30 | justify-content: center; 31 | align-items: center; 32 | } 33 | 34 | #p1Health { 35 | font-size: 50px; 36 | } 37 | 38 | #p2{ 39 | width:80px; 40 | height:80px; 41 | } 42 | 43 | 44 | .p2Choices { 45 | display: flex; 46 | flex-direction: column; 47 | justify-content: center; 48 | align-items: center; 49 | } 50 | 51 | #p2Health { 52 | font-size: 50px; 53 | } 54 | 55 | #result { 56 | font-size: 50px 57 | } 58 | 59 | .resultContainer { 60 | display: flex; 61 | flex-direction: column; 62 | justify-content: space-around; 63 | align-items: center; 64 | height:150px; 65 | width: 300px; 66 | } -------------------------------------------------------------------------------- /projects/stopwatch/exercise/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100vh; 3 | width: 100vw; 4 | } 5 | 6 | body { 7 | background: #ffa600; 8 | font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 9 | Helvetica, Arial, 'Lucida Grande', sans-serif; 10 | } 11 | 12 | .wrapper { 13 | width: 800px; 14 | margin: 30px auto; 15 | color: white; 16 | text-align: center; 17 | border-width: 10px; 18 | border-color:red; 19 | } 20 | 21 | h1, 22 | h2, 23 | h3 { 24 | font-family: 'Roboto', sans-serif; 25 | font-weight: 100; 26 | font-size: 2.6em; 27 | text-transform: uppercase; 28 | } 29 | 30 | #seconds, 31 | #tens { 32 | font-size: 2em; 33 | } 34 | 35 | button { 36 | border-radius: 5px; 37 | background: #ffa600; 38 | color: white; 39 | border: solid 1px white; 40 | text-decoration: none; 41 | cursor: pointer; 42 | font-size: 1.2em; 43 | padding: 18px 10px; 44 | width: 180px; 45 | margin: 10px; 46 | outline: none; 47 | &:hover { 48 | @include transition; 49 | background: white; 50 | border: solid 1px white; 51 | color: #ffa600; 52 | } 53 | } 54 | 55 | .credits { 56 | font-size: 10px; 57 | color: grey; 58 | font-style: italic; 59 | } 60 | 61 | .credits a { 62 | color: grey; 63 | } -------------------------------------------------------------------------------- /projects/stopwatch/solution/script.js: -------------------------------------------------------------------------------- 1 | let seconds = 0 2 | let tens = 0 3 | const displayTens = document.getElementById('tens') 4 | const displaySeconds = document.getElementById('seconds') 5 | const buttonStart = document.getElementById('button-start') 6 | const buttonStop = document.getElementById('button-stop') 7 | const buttonReset = document.getElementById('button-reset') 8 | let interval 9 | 10 | 11 | buttonStart.onclick = () => { 12 | clearInterval(interval) 13 | interval = setInterval(timer, 10) 14 | } 15 | 16 | buttonStop.onclick = () => { 17 | clearInterval(interval) 18 | } 19 | 20 | buttonReset.onclick = () => { 21 | clearInterval(interval) 22 | tens = 0 23 | seconds = 0 24 | displayTens.innerHTML = `0${tens}` 25 | displaySeconds.innerHTML = `0${seconds}` 26 | } 27 | 28 | const timer = () => { 29 | tens++ 30 | 31 | if (Number(tens) <= 9) { 32 | displayTens.innerHTML = `0${tens}` 33 | } 34 | 35 | if (Number(tens) > 9) { 36 | displayTens.innerHTML = tens 37 | } 38 | 39 | if (Number(tens) > 99) { 40 | console.log('seconds') 41 | seconds++ 42 | displaySeconds.innerHTML = `0${seconds}` 43 | tens = 0 44 | displayTens.innerHTML = `0${tens}` 45 | } 46 | 47 | if (Number(seconds) > 9) { 48 | displaySeconds.innerHTML = seconds 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /projects/weather-app/exercise/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Weather App 3 | * TODO: Complete getWeatherData() to return json response Promise 4 | * TODO: Complete searchCity() to get user input and get data using getWeatherData() 5 | * TODO: Complete showWeatherData() to set the data in the the html file from response 6 | */ 7 | 8 | // API_KEY for maps api 9 | let API_KEY = "a8e71c9932b20c4ceb0aed183e6a83bb"; 10 | 11 | /** 12 | * Retrieve weather data from openweathermap 13 | * HINT: Use fetch() 14 | * HINT: URL should look like this: 15 | * https://api.openweathermap.org/data/2.5/weather?q=detroit&appid=a8e71c9932b20c4ceb0aed183e6a83bb&units=imperial 16 | */ 17 | getWeatherData = (city) => { 18 | const URL = "https://api.openweathermap.org/data/2.5/weather"; 19 | //HINT: Use template literals to create a url with input and an API key 20 | 21 | //CODE GOES HERE 22 | } 23 | 24 | /** 25 | * Retrieve city input and get the weather data 26 | * HINT: Use the promise returned from getWeatherData() 27 | */ 28 | searchCity = () => { 29 | const city = document.getElementById('city-input').value; 30 | // CODE GOES HERE 31 | 32 | } 33 | 34 | /** 35 | * Show the weather data in HTML 36 | * HINT: make sure to console log the weatherData to see how the data looks like 37 | */ 38 | showWeatherData = (weatherData) => { 39 | //CODE GOES HERE 40 | 41 | } 42 | 43 | -------------------------------------------------------------------------------- /projects/weather-app/solution/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Weather App 3 | */ 4 | 5 | // API_KEY for maps api 6 | let API_KEY = "a8e71c9932b20c4ceb0aed183e6a83bb"; 7 | 8 | /** 9 | * Retrieve weather data from openweathermap 10 | */ 11 | getWeatherData = (city) => { 12 | const URL = "https://api.openweathermap.org/data/2.5/weather"; 13 | const FULL_URL = `${URL}?q=${city}&appid=${API_KEY}&units=imperial`; 14 | const weatherPromise = fetch(FULL_URL); 15 | return weatherPromise.then((response) => { 16 | return response.json(); 17 | }) 18 | } 19 | 20 | /** 21 | * Retrieve city input and get the weather data 22 | */ 23 | searchCity = () => { 24 | const city = document.getElementById('city-input').value; 25 | getWeatherData(city) 26 | .then((res)=>{ 27 | showWeatherData(res); 28 | }).catch((error)=>{ 29 | console.log(error); 30 | console.log("Something happend"); 31 | }) 32 | } 33 | 34 | /** 35 | * Show the weather data in HTML 36 | */ 37 | showWeatherData = (weatherData) => { 38 | document.getElementById("city-name").innerText = weatherData.name; 39 | document.getElementById("weather-type").innerText = weatherData.weather[0].main; 40 | document.getElementById("temp").innerText = weatherData.main.temp; 41 | document.getElementById("min-temp").innerText = weatherData.main.temp_min; 42 | document.getElementById("max-temp").innerText = weatherData.main.temp_max; 43 | document.getElementById("weather-output").classList.add('visible'); 44 | } 45 | 46 | -------------------------------------------------------------------------------- /projects/stopwatch/exercise/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Initiate 3 variables (seconds, tens, interval) 3 | * Give a starting value of 0 for seconds and tens 4 | * Use the appropriate variable type for each 5 | */ 6 | 7 | /** 8 | * Get the DOM elements for the stopwatch and save them in variables 9 | * Use the appropriate variable type for each 10 | * 11 | * Hint: There are 3 buttons and 2 numbers to manipulate 12 | */ 13 | 14 | /** 15 | * Create a function, which is waiting for the user to press the 'Start' button. 16 | * When pressed, set the timer run `runStopwatch` function every 10ms. 17 | */ 18 | buttonStart.onclick = () => {} 19 | 20 | /** 21 | * Create a function, which is waiting for the user to press the 'Stop' button. 22 | * When pressed, clear the interval. 23 | */ 24 | buttonStop.onclick = () => {} 25 | 26 | /** 27 | * Create a function, which is waiting for the user to press the 'Reset' button. 28 | * When pressed, clear the interval, reset the seconds and tens to 0. 29 | * 30 | * Hint: Don't forget to concatenate a leading '0'. 31 | */ 32 | buttonReset.onclick = () => {} 33 | 34 | /** 35 | * Build the `runStopwatch` function. 36 | */ 37 | const runStopwatch = () => { 38 | // Increment the tens. 39 | /** 40 | * Display updated tens and seconds. 41 | * Make sure, that the tens and seconds are always two digits long. 42 | * 43 | * Hint: there are 4 cases you need to handle every time the function runs. 44 | */ 45 | } 46 | -------------------------------------------------------------------------------- /classes/banksClass/script.js: -------------------------------------------------------------------------------- 1 | class Bank { 2 | constructor(balance) { 3 | this.balance = balance 4 | } 5 | 6 | withdraw(amount) { 7 | // guard clause 8 | if (this.balance - amount <= 0) { 9 | console.log('❌ You cannot withdraw more than what you have!') 10 | console.log({balance: this.balance}) 11 | return 12 | } 13 | 14 | this.balance -= amount 15 | console.log('withdrew', `$${amount}`) 16 | console.log({balance: this.balance}) 17 | } 18 | 19 | deposit(amount) { 20 | this.balance += amount 21 | console.log('deposited', `$${amount}`) 22 | console.log({balance: this.balance}) 23 | } 24 | } 25 | 26 | const qaziChecking = new Bank(0) 27 | // console.log(qaziChecking.balance) 28 | // qaziChecking.deposit(10000) 29 | // qaziChecking.deposit(10000) 30 | // qaziChecking.deposit(10000) 31 | // qaziChecking.withdraw(1000) 32 | // qaziChecking.withdraw(20000) 33 | // qaziChecking.withdraw(5000) 34 | // qaziChecking.withdraw(5000) 35 | 36 | const depositButton = document.getElementById('deposit') 37 | const withdrawButton = document.getElementById('withdraw') 38 | const amountInput = document.getElementById('amount') 39 | const balanceDiv = document.getElementById('balance') 40 | 41 | depositButton.onclick = () => { 42 | const amount = Number(amountInput.value) 43 | qaziChecking.deposit(amount) 44 | balanceDiv.innerText = `Balance: ${qaziChecking.balance}` 45 | } 46 | 47 | withdrawButton.onclick = () => { 48 | const amount = Number(amountInput.value) 49 | qaziChecking.withdraw(amount) 50 | balanceDiv.innerText = `Balance: ${qaziChecking.balance}` 51 | } -------------------------------------------------------------------------------- /projects/weather-app/exercise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Weather App 5 | 6 | 7 | 8 | 9 | 10 |
11 |

Weather

12 |
13 | 14 |
15 | 16 |
17 |
18 |
19 |
20 |

----

21 |
22 |
23 |

----

24 |
    25 |
  • Temp: --°
    • 26 |
  • Min Temp: --°
    • 27 |
  • Max Temp: --°
    • 28 |
29 |
30 |
31 |
32 |
33 |
34 | 35 | -------------------------------------------------------------------------------- /projects/weather-app/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Weather App 5 | 6 | 7 | 8 | 9 | 10 |
11 |

Weather

12 |
13 | 14 |
15 | 16 |
17 |
18 |
19 |
20 |

----

21 |
22 |
23 |

----

24 |
    25 |
  • Temp: --°
    • 26 |
  • Min Temp: --°
    • 27 |
  • Max Temp: --°
    • 28 |
29 |
30 |
31 |
32 |
33 |
34 | 35 | -------------------------------------------------------------------------------- /projects/fightingGame/exercise/script.js: -------------------------------------------------------------------------------- 1 | class Game { 2 | constructor(player1Name = 'pl1', player2Name = 'pl2') { 3 | // Flag that indicates if the game is over or not 4 | this.theEnd = false; 5 | 6 | this.player1 = { 7 | name: player1Name, 8 | health: 100 9 | }; 10 | 11 | this.player2 = { 12 | name: player2Name, 13 | health: 100 14 | }; 15 | } 16 | 17 | //Starts the game and logs out the status of players 18 | start() { 19 | 20 | } 21 | 22 | //Console log the winner of the battle 23 | declareWinner() { 24 | 25 | } 26 | 27 | //If player 1 or player 2 health is below 0 28 | //Mark theEnd true, to stop the game 29 | checkTheEnd() { 30 | 31 | } 32 | 33 | //Console log the name and health of both players 34 | //Ex: Player 1: 100 | Player 2: 50 35 | playerStatus() { 36 | 37 | } 38 | 39 | //Reset health of player 1 and player 2 to 100 40 | //Reset theEnd to false 41 | reset() { 42 | 43 | } 44 | 45 | //Generate a random number between 1 and 10 using Math.random() 46 | //Use that number to decrease health from player 2 47 | pl1AttackPl2() { 48 | 49 | } 50 | 51 | //Generate a random number between 1 and 10 using Math.random() 52 | //Use that number to decrease health from player 1 53 | pl2AttackPl1() { 54 | 55 | } 56 | 57 | //Generate a random number between 1 and 5 using Math.random() 58 | //Use that number to increase health of player 1 59 | pl1Heal() { 60 | 61 | } 62 | 63 | //Generate a random number between 1 and 5 using Math.random() 64 | //Use that number to increase health of player 2 65 | pl2Heal() { 66 | 67 | } 68 | } 69 | 70 | // Initialize the class here 71 | // Call the start function of the game 72 | 73 | -------------------------------------------------------------------------------- /projects/tip-calculator/exercise/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: 'M PLUS Rounded 1c', Avenir Next, Helvetica, sans-serif; 3 | color: white; 4 | } 5 | 6 | body { 7 | background: #8990ec; 8 | } 9 | 10 | .wrapper { 11 | height: 525px; 12 | width: 360px; 13 | color: white; 14 | background: #272639; 15 | border-radius: 1rem; 16 | padding: 1.2rem; 17 | margin: 100px auto; 18 | } 19 | 20 | #topContainer { 21 | margin-top: 4rem; 22 | } 23 | 24 | .container { 25 | margin-top: 1.4rem; 26 | } 27 | 28 | .title { 29 | font-weight: bold; 30 | margin-bottom: 0.6rem; 31 | } 32 | 33 | .inputContainer { 34 | background: #353959; 35 | border-radius: 1.4rem; 36 | padding: 0 0.8rem; 37 | display: flex; 38 | align-items: center; 39 | } 40 | 41 | #billTotalInput, 42 | #tipInput { 43 | font-size: 1.2rem; 44 | background: none; 45 | border: none; 46 | outline: none; 47 | padding: none; 48 | } 49 | 50 | .buttonContainer { 51 | background: #8990ec; 52 | display: grid; 53 | place-items: center; 54 | width: 1.6rem; 55 | height: 1.6rem; 56 | border-radius: 50%; 57 | } 58 | 59 | .splitButton { 60 | background: none; 61 | border: none; 62 | } 63 | 64 | .controls { 65 | display: flex; 66 | align-items: center; 67 | } 68 | 69 | .splitButton { 70 | font-size: 0.8rem; 71 | font-weight: bold; 72 | display: grid; 73 | place-items: center; 74 | } 75 | 76 | .buttonText { 77 | color: #353959 !important; 78 | } 79 | 80 | .splitAmount { 81 | font-size: 1.6rem; 82 | margin: 0.8rem; 83 | } 84 | 85 | #bottom { 86 | display: flex; 87 | justify-content: space-between; 88 | } 89 | 90 | .totalContainer { 91 | display: flex; 92 | flex-direction: column; 93 | align-items: end; 94 | } 95 | 96 | .total { 97 | font-size: 2rem; 98 | } 99 | -------------------------------------------------------------------------------- /projects/tip-calculator/solution/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: 'M PLUS Rounded 1c', Avenir Next, Helvetica, sans-serif; 3 | color: white; 4 | } 5 | 6 | body { 7 | background: #8990ec; 8 | } 9 | 10 | .wrapper { 11 | height: 525px; 12 | width: 360px; 13 | color: white; 14 | background: #272639; 15 | border-radius: 1rem; 16 | padding: 1.2rem; 17 | margin: 100px auto; 18 | } 19 | 20 | #topContainer { 21 | margin-top: 4rem; 22 | } 23 | 24 | .container { 25 | margin-top: 1.4rem; 26 | } 27 | 28 | .title { 29 | font-weight: bold; 30 | margin-bottom: 0.6rem; 31 | } 32 | 33 | .inputContainer { 34 | background: #353959; 35 | border-radius: 1.4rem; 36 | padding: 0 0.8rem; 37 | display: flex; 38 | align-items: center; 39 | } 40 | 41 | #billTotalInput, 42 | #tipInput { 43 | font-size: 1.2rem; 44 | background: none; 45 | border: none; 46 | outline: none; 47 | padding: none; 48 | } 49 | 50 | .buttonContainer { 51 | background: #8990ec; 52 | display: grid; 53 | place-items: center; 54 | width: 1.6rem; 55 | height: 1.6rem; 56 | border-radius: 50%; 57 | } 58 | 59 | .splitButton { 60 | background: none; 61 | border: none; 62 | } 63 | 64 | .controls { 65 | display: flex; 66 | align-items: center; 67 | } 68 | 69 | .splitButton { 70 | font-size: 0.8rem; 71 | font-weight: bold; 72 | display: grid; 73 | place-items: center; 74 | } 75 | 76 | .buttonText { 77 | color: #353959 !important; 78 | } 79 | 80 | .splitAmount { 81 | font-size: 1.6rem; 82 | margin: 0.8rem; 83 | } 84 | 85 | #bottom { 86 | display: flex; 87 | justify-content: space-between; 88 | } 89 | 90 | .totalContainer { 91 | display: flex; 92 | flex-direction: column; 93 | align-items: end; 94 | } 95 | 96 | .total { 97 | font-size: 2rem; 98 | } 99 | -------------------------------------------------------------------------------- /notes/promises-async-await-apis.js: -------------------------------------------------------------------------------- 1 | // Asynchronous Programming 2 | 3 | // ASYNC / AWAIT 4 | 5 | // You order 🍅 tomato soup 6 | // Meanwhile you continue your convo with a friend 7 | // RESOLVED - 🥣 Your server brings you soup 8 | // REJECTED - ❌ No soup today 9 | 10 | const orderSoup = () => console.log('soup is ready') 11 | 12 | // console.log('You start the convo with your 👧') 13 | 14 | // // start your request 15 | // setTimeout(orderSoup, 2000) // 1000 ms is 1s 16 | 17 | // console.log('Still speaking') 18 | 19 | const promise1 = new Promise((resolve, reject) => { 20 | setTimeout(() => { 21 | isReady = [true, false][Math.floor(Math.random() * 2)] 22 | isReady ? resolve('✅ soup is ready 🥣'): reject('❌ No soup today') 23 | }, 1000) 24 | }) 25 | 26 | // console.log( 27 | // promise1 28 | // .then(success => console.log({success})) 29 | // .catch(error => console.log({error})) 30 | // ) 31 | 32 | // RESOLVED - if waiter brings you soup 33 | // tip the waiter 34 | // you pay for soup 35 | 36 | // REJECTED - leave a bad review, no tip 37 | const getSoup = async () => { 38 | // null / undefined 39 | const data = {rating: 0, tip: 0, pay: 0, review: 0} 40 | try { 41 | const soup = await promise1 42 | console.log(soup) 43 | data.rating = 5 44 | data.tip = .2 45 | data.pay = 10 46 | data.review = 5 47 | return data 48 | } catch(error) { 49 | console.log(error) 50 | data.rating = 1 51 | data.tip = 0 52 | data.pay = 0 53 | data.review = 1 54 | return data 55 | } 56 | } 57 | 58 | console.log(getSoup().then(value => console.log(value))) 59 | 60 | const sum = async (a, b) => a+b 61 | 62 | // console.log('fetch:', fetch('https://dog.ceo/api/breeds/image/random') // promise 63 | // .then(response => response.json()) // promise 64 | // .then(data => console.log(data)) 65 | // ) 66 | 67 | // Rules for using async / await 68 | // 1. You must create a function 69 | // 2. You must use the keyword async 70 | // 3. Use the word await 71 | 72 | const getDog = async () => { 73 | const url = 'https://dog.ceo/api/breeds/image/random' 74 | const response = await fetch(url) 75 | const data = await response.json() 76 | console.log(data) 77 | } 78 | 79 | // getDog() -------------------------------------------------------------------------------- /projects/fightingGame/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | replit 8 | 9 | 10 | 11 | 12 | 13 |
The solution for Fighting Game
14 |
15 | 16 |
17 |
18 | 22 | 28 | 29 | 35 | 36 |
100
37 |
38 | 39 | 40 | 41 |
42 | 46 | 52 | 58 |
100
59 |
60 | 61 |
62 |
63 | 64 |
65 |
66 | 67 |
68 | 69 | 72 | 75 | 78 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /api/superHero/script.js: -------------------------------------------------------------------------------- 1 | // https://superheroapi.com/api/access-token/character-id 2 | 3 | const SUPERHERO_TOKEN = '10223569763528853' 4 | const BASE_URL = `https://superheroapi.com/api.php/${SUPERHERO_TOKEN}` 5 | 6 | const newHeroButton = document.getElementById('newHeroButton') 7 | 8 | const heroImageDiv = document.getElementById('heroImage') 9 | 10 | const searchButton = document.getElementById('searchButton') 11 | 12 | const searchInput = document.getElementById('searchInput') 13 | 14 | const getSuperHero = (id, name) => { 15 | // name 👉 base_url/search/batman 16 | // json.results[0].image.url 17 | // id: 👉 base_url/id 18 | // json.image.url 19 | fetch(`${BASE_URL}/${id}`) 20 | .then(response => response.json()) 21 | .then(json => { 22 | console.log(json.powerstats) 23 | const superHero = json 24 | showHeroInfo(superHero) 25 | }) 26 | } 27 | 28 | const statToEmoji = { 29 | intelligence: '🧠', 30 | strength: '💪', 31 | speed: '⚡', 32 | durability: '🏋️‍♂️', 33 | power: '📊', 34 | combat: '⚔️', 35 | } 36 | 37 | const showHeroInfo = (character) => { 38 | const name = `

${character.name}

` 39 | 40 | const img = `` 41 | 42 | const stats = Object.keys(character.powerstats).map(stat => { 43 | return `

${statToEmoji[stat]} ${stat.toUpperCase()}: ${character.powerstats[stat]}

` 44 | }).join('') 45 | 46 | heroImageDiv.innerHTML = `${name}${img}${stats}` 47 | } 48 | 49 | //

💪 Strength: ${json.powerstats.strength}

🧠 Intelligence: ${json.powerstats.intelligence}

🧠 Combat: ${json.powerstats.intelligence}

🧠 Speed: ${json.powerstats.intelligence}

🧠 Durability: ${json.powerstats.intelligence}

50 | 51 | const getSearchSuperHero = (name) => { 52 | console.log(searchInput.value) 53 | fetch(`${BASE_URL}/search/${name}`) 54 | .then(response => response.json()) 55 | .then(json => { 56 | const hero = json.results[0] 57 | showHeroInfo(hero) 58 | }) 59 | } 60 | 61 | const randomHero = () => { 62 | const numberOfHeroes = 731 63 | return Math.floor(Math.random() * numberOfHeroes) + 1 64 | } 65 | 66 | newHeroButton.onclick = () => getSuperHero(randomHero()) 67 | 68 | searchButton.onclick = () => getSearchSuperHero(searchInput.value) 69 | -------------------------------------------------------------------------------- /projects/tip-calculator/exercise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | Tip Calculator 15 | 16 | 17 |
18 |
19 |
Bill total
20 |
21 | $ 22 | 28 |
29 |
30 |
31 |
Tip
32 |
33 | % 34 | 40 |
41 |
42 |
43 |
44 |
People
45 |
46 | 47 | 50 | 51 | 1 52 | 53 | 56 | 57 |
58 |
59 |
60 |
Total per Person
61 |
$0.00
62 |
63 |
64 |
65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /projects/tip-calculator/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | Tip Calculator 15 | 16 | 17 |
18 |
19 |
Bill total
20 |
21 | $ 22 | 28 |
29 |
30 |
31 |
Tip
32 |
33 | % 34 | 40 |
41 |
42 |
43 |
44 |
People
45 |
46 | 47 | 50 | 51 | 1 52 | 53 | 56 | 57 |
58 |
59 |
60 |
Total per Person
61 |
$0.00
62 |
63 |
64 |
65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | replit 16 | 17 | 18 | 19 | 20 | 21 |

Official Github REPO (🌟 Go Star This ♥️)

22 |

👉 JavaScript Course by Clever Programmer (Github Repo)

23 |

Let's get this trending 🚀

24 |

Lessons

25 | DOM - Red Yellow Green Squares 26 |
27 | API - Get Random Dog 28 |
29 | API - Get Super Heroes
30 | Classes - Bank with Deposit & Withdraw Methods 31 | 32 |

Project Exercises

33 | Stopwatch
34 | Rock Paper Scissors
35 | Figthing Game
36 | Tip Calculator 37 |
38 | Weather App 39 | 40 |

Project Solutions

41 | Stopwatch
42 | Rock Paper Scissors
43 | Fighting Game
44 | Tip Calculator 45 |
46 | Weather App 47 |
48 | Create Netflix 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /projects/rockpaperscissors/exercise/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | Rock Paper Scissors 🚀🔥 3 | Concepts covered in this project 4 | 👉 For loops 5 | 👉 Dom Manipulation 6 | 👉 Variables 7 | 👉 Conditionals (if else if) 8 | 👉 Template Literals 9 | 👉 Event Listeners 10 | 👉 Higher order Function (Math.random()) 11 | */ 12 | 13 | // ** getComputerChoice randomly selects between `rock` `paper` `scissors` and returns that string ** 14 | // getComputerChoice() 👉 'Rock' 15 | // getComputerChoice() 👉 'Scissors' 16 | function getComputerChoice() { 17 | 18 | } 19 | 20 | // ** getResult compares playerChoice & computerChoice and returns the score accordingly ** 21 | // human wins - getResult('Rock', 'Scissors') 👉 1 22 | // human loses - getResult('Scissors', 'Rock') 👉 -1 23 | // human draws - getResult('Rock', 'Rock') 👉 0 24 | function getResult(playerChoice, computerChoice) { 25 | // return the result of score based on if you won, drew, or lost 26 | 27 | 28 | 29 | // All situations where human draws, set `score` to 0 30 | 31 | 32 | // All situations where human wins, set `score` to 1 33 | // make sure to use else ifs here 34 | 35 | 36 | // Otherwise human loses (aka set score to -1) 37 | 38 | 39 | // return score 40 | 41 | } 42 | 43 | // ** showResult updates the DOM to `You Win!` or `You Lose!` or `It's a Draw!` based on the score. Also shows Player Choice vs. Computer Choice** 44 | function showResult(score, playerChoice, computerChoice) { 45 | // Hint: on a score of -1 46 | // You should do result.innerText = 'You Lose!' 47 | // Don't forget to grab the div with the 'result' id! 48 | } 49 | 50 | // ** Calculate who won and show it on the screen ** 51 | function onClickRPS(playerChoice) { 52 | 53 | } 54 | 55 | 56 | // ** Make the RPS buttons actively listen for a click and do something once a click is detected ** 57 | function playGame() { 58 | // use querySelector to select all RPS Buttons 59 | 60 | // * Adds an on click event listener to each RPS button and every time you click it, it calls the onClickRPS function with the RPS button that was last clicked * 61 | 62 | // 1. loop through the buttons using a forEach loop 63 | // 2. Add a 'click' event listener to each button 64 | // 3. Call the onClickRPS function every time someone clicks 65 | // 4. Make sure to pass the currently selected rps button as an argument 66 | 67 | 68 | 69 | // Add a click listener to the end game button that runs the endGame() function on click 70 | 71 | } 72 | 73 | // ** endGame function clears all the text on the DOM ** 74 | function endGame() { 75 | 76 | } 77 | 78 | playGame() -------------------------------------------------------------------------------- /classes/carClass/script.js: -------------------------------------------------------------------------------- 1 | // classes: Main topic 2 | // methods 3 | // properties 4 | 5 | // this 6 | class Car { 7 | constructor(name, color, topSpeed) { 8 | // properties 9 | this.name = name 10 | this.color = color 11 | this.topSpeed = topSpeed 12 | this.currentSpeed = 0; 13 | } 14 | 15 | // getters & setters 16 | getCurrentSpeed() { 17 | return currentSpeed 18 | } 19 | 20 | zeroToSixty() { 21 | setTimeout(() => { 22 | console.log('pHEW! That was fast!') 23 | this.currentSpeed = 60; 24 | console.log(this.currentSpeed) 25 | }, 3000) 26 | } 27 | 28 | drive(speed=10) { 29 | // console.log('just drove 2 miles!') 30 | this.currentSpeed += speed 31 | console.log(`driving speed at ${this.currentSpeed} mph`) 32 | } 33 | 34 | brake() { 35 | console.log('braking!') 36 | this.currentSpeed -= 10 37 | } 38 | 39 | stop() { 40 | console.log('coming to a screeching halt!') 41 | this.currentSpeed = 0 42 | } 43 | } 44 | 45 | // porsche, 'yellow', 250 46 | 47 | const ferrari = new Car('ferrari', 'red', 250) 48 | ferrari.drive() 49 | ferrari.drive() 50 | ferrari.drive() 51 | ferrari.drive() 52 | ferrari.drive() 53 | console.log(ferrari.currentSpeed) 54 | ferrari.brake() 55 | ferrari.stop() 56 | console.log(ferrari.currentSpeed) 57 | 58 | const porsche = new Car('Porsche', 'yellow', 250) 59 | console.log(porsche.name) 60 | console.log(porsche.color) 61 | console.log(porsche.topSpeed) 62 | // const nums = [1, 2, 3, 4, 5] 63 | // nums.forEach(_ => porsche.drive()) 64 | porsche.drive(40) 65 | porsche.drive(80) 66 | console.log(porsche.currentSpeed) 67 | porsche.zeroToSixty() 68 | porsche.stop() 69 | console.log(porsche.currentSpeed) 70 | 71 | // console.log(ferrari.name) 72 | // console.log(ferrari.color) 73 | // console.log(ferrari.topSpeed) 74 | 75 | // console.log(ferrari.currentSpeed) 76 | 77 | // ferrari.drive() 78 | // ferrari.brake() 79 | 80 | // console.log(ferrari.currentSpeed) 81 | // ferrari.drive() 82 | // console.log(ferrari.currentSpeed) 83 | // ferrari.drive() 84 | // ferrari.drive() 85 | // console.log(ferrari.currentSpeed) 86 | // ferrari.zeroToSixty() 87 | // console.log(ferrari.currentSpeed) 88 | 89 | // console.log(ferrari) 90 | 91 | // you can only have methods inside of classes 92 | // const numbers = [1, 2, 3] 93 | // numbers.push(4) // method 94 | // // console.log(typeof ) 95 | // console.log(numbers) 96 | 97 | Array.prototype.myPush = function(item) { 98 | this[this.length] = item 99 | return this 100 | } 101 | 102 | const fruits = ['🍌', '🍓', '🍪', '🍐', '🍎'] 103 | fruits.myPush('🥝') 104 | fruits.myPush('🍪') 105 | fruits.myPush('🍓') 106 | fruits.myPush('🍊') 107 | console.log(fruits) -------------------------------------------------------------------------------- /projects/tip-calculator/solution/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | 🌟 APP: Tip Calculator 3 | 4 | These are the 3 functions you must use 👇 5 | ======================================== 6 | calculateBill() 7 | increasePeople() 8 | decreasePeople() 9 | 10 | These functions are hard coded in the HTML. So, you can't change their names. 11 | 12 | These are all the DIV ID's you're gonna need access to 👇 13 | ======================================================== 14 | #1 ID 👉 'billTotalInput' = User input for bill total 15 | #2 ID 👉 'tipInput' = User input for tip 16 | #3 ID 👉 'numberOfPeople' = Current number of people you're splitting the bill between 17 | #4 ID 👉 'perPersonTotal' = Total dollar value owed per person 18 | */ 19 | 20 | // Get global access to all inputs / divs here (you'll need them later 😘) 21 | // bill input, tip input, number of people div, and per person total div 22 | const billInput = document.getElementById('billTotalInput') 23 | const tipInput = document.getElementById('tipInput') 24 | const numberOfPeopleDiv = document.getElementById('numberOfPeople') 25 | const perPersonTotalDiv = document.getElementById('perPersonTotal') 26 | 27 | // Get number of people from number of people div 28 | let numberOfPeople = Number(numberOfPeopleDiv.innerText) 29 | 30 | // ** Calculate the total bill per person ** 31 | const calculateBill = () => { 32 | // get bill from user input & convert it into a number 33 | const bill = Number(billInput.value) 34 | 35 | // get the tip from user & convert it into a percentage (divide by 100) 36 | const tipPercent = Number(tipInput.value) / 100 37 | 38 | // get the total tip amount 39 | const tipAmount = bill * tipPercent 40 | 41 | // calculate the total (tip amount + bill) 42 | const total = tipAmount + bill 43 | 44 | // calculate the per person total (total divided by number of people) 45 | const perPersonTotal = total / numberOfPeople 46 | 47 | // update the perPersonTotal on DOM & show it to user 48 | perPersonTotalDiv.innerText = `$${perPersonTotal.toFixed(2)}` 49 | } 50 | 51 | // ** Splits the bill between more people ** 52 | const increasePeople = () => { 53 | // increment the amount 54 | numberOfPeople += 1 55 | 56 | // update the DOM with the new number of people 57 | numberOfPeopleDiv.innerText = numberOfPeople 58 | 59 | // calculate the bill based on the new number of people 60 | calculateBill() 61 | } 62 | 63 | // ** Splits the bill between fewer people ** 64 | const decreasePeople = () => { 65 | // guard clause 66 | // if amount is 1 or less simply return 67 | // (a.k.a you can't decrease the number of people to 0 or negative!) 68 | if (numberOfPeople <= 1) { 69 | return 70 | } 71 | 72 | // decrement the amount 73 | numberOfPeople -= 1 74 | 75 | // update the DOM with the new number of people 76 | numberOfPeopleDiv.innerText = numberOfPeople 77 | 78 | // calculate the bill based on the new number of people 79 | calculateBill() 80 | } -------------------------------------------------------------------------------- /projects/tip-calculator/exercise/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | 🌟 APP: Tip Calculator 3 | 4 | These are the 3 functions you must use 👇 5 | ========================================= 6 | calculateBill() 7 | increasePeople() 8 | decreasePeople() 9 | 10 | These functions are hard coded in the HTML. So, you can't change their names. 11 | 12 | These are all the DIV ID's you're gonna need access to 👇 13 | ======================================================== 14 | #1 ID 👉 'billTotalInput' = User input for bill total 15 | #2 ID 👉 'tipInput' = User input for tip 16 | #3 ID 👉 'numberOfPeople' = Current number of people you're splitting the bill between 17 | #4 ID 👉 'perPersonTotal' = Total dollar value owed per person 18 | */ 19 | 20 | // Get global access to all inputs / divs here (you'll need them later 😘) 21 | // bill input, tip input, number of people div, and per person total div 22 | const billInput = document.getElementById('billTotalInput') 23 | const tipInput = document.getElementById('tipInput') 24 | const numberOfPeopleDiv = document.getElementById('numberOfPeople') 25 | const perPersonTotalDiv = document.getElementById('perPersonTotal') 26 | 27 | 28 | // Get number of people from number of people div 29 | let numberOfPeople = Number(numberOfPeopleDiv.innerText) 30 | 31 | // ** Calculate the total bill per person ** 32 | const calculateBill = () => { 33 | // get bill from user input & convert it into a number 34 | const bill = Number(billInput.value) 35 | 36 | // get the tip from user & convert it into a percentage (divide by 100) 37 | const tipPercentage = Number(tipInput.value) / 100 38 | 39 | // get the total tip amount 40 | const tipAmount = bill * tipPercentage 41 | 42 | // calculate the total (tip amount + bill) 43 | const total = tipAmount + bill 44 | 45 | // calculate the per person total (total divided by number of people) 46 | const perPersonTotal = total / numberOfPeople 47 | 48 | // update the perPersonTotal on DOM & show it to user 49 | perPersonTotalDiv.innerText = `$${perPersonTotal.toFixed(2)}` 50 | } 51 | 52 | // ** Splits the bill between more people ** 53 | const increasePeople = () => { 54 | // increment the amount of people 55 | numberOfPeople += 1 56 | 57 | // update the DOM with the new number of people 58 | numberOfPeopleDiv.innerText = numberOfPeople 59 | 60 | // calculate the bill based on the new number of people 61 | calculateBill() 62 | } 63 | 64 | // ** Splits the bill between fewer people ** 65 | const decreasePeople = () => { 66 | // guard clause 67 | // if amount is 1 or less simply return 68 | // (a.k.a you can't decrease the number of people to 0 or negative!) 69 | if (numberOfPeople <= 1) { 70 | throw 'Hey! You cannot have less than 1 person!' 71 | return 72 | } 73 | 74 | // decrement the amount of people 75 | numberOfPeople -= 1 76 | 77 | // update the DOM with the new number of people 78 | numberOfPeopleDiv.innerText = numberOfPeople 79 | 80 | // calculate the bill based on the new number of people 81 | calculateBill() 82 | } -------------------------------------------------------------------------------- /notes/promise-examples.js: -------------------------------------------------------------------------------- 1 | /* 2 | 🌟 Promises 3 | 4 | What is a promise? 👇 5 | ======================================== 6 | 7 | - asking for data/information and it can come back to you or NOT. 8 | - Compare it to a promise in real life. 9 | 10 | Ex: 11 | - You are at a restaurant and you order soup. 12 | - The waiter PROMISES YOU that he will bring back the soup you ordered 13 | - What are the outcomes of his promise? 14 | - He gets you the soup (Resolved) 15 | - OR He does NOT give you the soup(Rejected) 16 | 17 | */ 18 | 19 | // Variables that describe the scenario 20 | let YourTip = 15; 21 | let waiterMoney = 0; 22 | let badReview = false; 23 | 24 | // ** Create a Promise object through javascript 25 | let promise = new Promise((resolve, reject) => { 26 | let hasSoup = true; 27 | 28 | if (hasSoup == true) { 29 | resolve('Success!'); 30 | } else { 31 | reject('Failed!'); 32 | } 33 | }); 34 | 35 | // What does this print IF hasSoup is true? What if it's false? 36 | console.log(promise) 37 | 38 | 39 | /* 40 | 41 | How do we handle a promise? 👇 42 | ======================================== 43 | 44 | - We just learned a promise can return value of resolved or rejected but we can then write code to do something with that return (resolved or rejected) 45 | - Below is the real world example 46 | 47 | Ex: 48 | - The waiter resolves his promise and gives us soup, we will THEN thank him and give him a nice tip! 49 | 50 | - The waiter rejects his prmise and does NOT give us soup, we THEN complain and leave a bad review of the restaurant. 51 | ======================================== 52 | 53 | - You can handle promises with .then() 54 | - .then() is a method that will handle a resolved promise 55 | - .then() takes in an arrow function with WHAT you want to do with the resolved promise! 56 | 57 | - .catch() method can get called whenever an error is encountered at any point in the promise resulting in the promise getting rejected 58 | - You can chain .catch() after a .then() if you want to handle for errors or log a message! 59 | 60 | 61 | */ 62 | 63 | // ** Get the promise variable again and handle the result by adding .then() after it 64 | 65 | // promise.then(()=> { 66 | // console.log("Thank you here's a tip!") 67 | // return waiterMoney += YourTip 68 | // }).catch(()=> { 69 | // console.log("This is terrible service!") 70 | // return badReview = true 71 | // }) 72 | 73 | /* 74 | 75 | Async Await + Try Catch? 👇 76 | ======================================== 77 | 78 | - If this is making sense to you let's start to use real coding example now using a promise to get back data from an api 79 | 80 | - async await is just "syntatical sugar" makes code easier to read/understand 81 | 82 | */ 83 | 84 | // Ex: 85 | async function getUserData () { 86 | // instead of .then and .catch we can use try and catch 87 | try { 88 | const userData = await fetch('https://jsonplaceholder.typicode.com/users/1') 89 | const user = await userData.json() 90 | 91 | // If you console log user what would get printed out? 92 | return user 93 | } 94 | 95 | catch (error) { 96 | console.error(error) 97 | } 98 | 99 | } 100 | 101 | console.log(getUserData()) 102 | 103 | // ** Test what you understand about getUserData() ** 104 | 105 | // What part of this function is the promise? 106 | 107 | // What part of this function is handling if the promise is resolved? 108 | 109 | // What part of this function is handling if the promise is rejected? 110 | 111 | // What does asynchronous mean and how does it affect the function? 112 | 113 | 114 | -------------------------------------------------------------------------------- /projects/fetchmovies/solution/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #111; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | margin: 0; 6 | } 7 | 8 | .dropdown-container { 9 | position: absolute; 10 | top: 100%; 11 | right: 0; 12 | padding-top: 3px; 13 | display: none; 14 | } 15 | 16 | .dropdown { 17 | background-color: black; 18 | padding: 8px; 19 | border-radius: 4px; 20 | width: 100px; 21 | } 22 | 23 | .dropdown span { 24 | cursor: pointer; 25 | } 26 | 27 | .original__movies { 28 | padding-top: 20px; 29 | padding-bottom: 20px; 30 | } 31 | 32 | .profile:hover .dropdown-container { 33 | display: block; 34 | } 35 | 36 | .original__movies, 37 | .movies__container { 38 | padding-left: 50px; 39 | display: flex; 40 | overflow-x: scroll; 41 | overflow: hidden; 42 | } 43 | 44 | .original__movies::-webkit-scrollbar { 45 | display: none; 46 | } 47 | 48 | .original__movies img { 49 | margin-right: 10px; 50 | height: 250px; 51 | width: auto; 52 | } 53 | 54 | .original__movies img, 55 | .movies__container img { 56 | transition: all 0.2s ease-out; 57 | cursor: pointer; 58 | } 59 | 60 | .original__movies img:hover, 61 | .movies__container img:hover { 62 | transform: scale(1.1); 63 | } 64 | 65 | .movies__container img { 66 | margin-right: 10px; 67 | width: 200px; 68 | } 69 | 70 | header { 71 | display: flex; 72 | justify-content: space-between; 73 | align-items: center; 74 | padding-left: 15px; 75 | padding-right: 15px; 76 | position: absolute; 77 | z-index: 100; 78 | top: 0; 79 | left: 0; 80 | right: 0; 81 | padding-top: 15px; 82 | } 83 | 84 | .logo > img { 85 | width: 120px; 86 | } 87 | 88 | .profile { 89 | position: relative; 90 | } 91 | 92 | .profile > img { 93 | width: 40px; 94 | } 95 | 96 | img { 97 | width: 100px; 98 | } 99 | 100 | .featured { 101 | height: 400px; 102 | position: relative; 103 | background-image: url('https://image.tmdb.org/t/p/original//3lBDg3i6nn5R2NKFCJ6oKyUo2j5.jpg'); 104 | background-size: cover; 105 | background-position: center; 106 | padding: 0 0 0 30px; 107 | display: flex; 108 | flex-direction: column; 109 | justify-content: center; 110 | } 111 | 112 | .featured::after { 113 | content: ''; 114 | position: absolute; 115 | bottom: 0; 116 | left: 0; 117 | right: 0; 118 | height: 7.4rem; 119 | background-image: linear-gradient( 120 | 180deg, 121 | transparent, 122 | rgba(37, 37, 37, 0.61), 123 | #111 124 | ); 125 | } 126 | 127 | .netflixOriginals h2, 128 | .movies__header h2 { 129 | padding-left: 30px; 130 | } 131 | 132 | .featured h2 { 133 | font-size: 50px; 134 | margin: 0; 135 | z-index: 10; 136 | } 137 | 138 | .featured .featured__buttons { 139 | z-index: 10; 140 | } 141 | 142 | .featured .featured__buttons button { 143 | font-size: 16px; 144 | color: white; 145 | background-color: rgba(109, 109, 110, 0.7); 146 | border: none; 147 | padding: 8px 24px; 148 | border-radius: 4px; 149 | } 150 | 151 | .featured::before { 152 | content: ''; 153 | position: absolute; 154 | top: 0; 155 | left: 0; 156 | right: 0; 157 | bottom: 0; 158 | background-color: rgba(0, 0, 0, 0.3); 159 | } 160 | 161 | .featured .featured__buttons .button__play { 162 | background-color: white; 163 | color: black; 164 | } 165 | 166 | .button__play i { 167 | margin-right: 6px; 168 | } 169 | 170 | .featured .featured__description { 171 | max-width: 350px; 172 | font-weight: 400; 173 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45); 174 | z-index: 10; 175 | } 176 | 177 | .modal-body iframe { 178 | width: 100%; 179 | } 180 | 181 | .modal-body span { 182 | color: #333; 183 | width: 100%; 184 | display: flex; 185 | height: 60px; 186 | justify-content: center; 187 | align-items: center; 188 | } 189 | -------------------------------------------------------------------------------- /projects/fetchmovies/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PWJ Netflix Clone 7 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 22 |
23 | 24 |
25 |
26 | Sign out 27 |
28 |
29 |
30 |
31 |
32 |
33 |

Title

34 |
35 | 36 | 37 |
38 |
39 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique 40 | magna magna, vit... 41 |
42 |
43 |
44 |
45 |

NETFLIX ORIGINALS

46 |
47 |
48 | 49 |
50 |
51 |
52 |
53 |

Wishlist

54 |
55 |
56 |
57 |

Trending Now

58 |
59 |
60 |
61 |

Top Rated

62 |
63 |
64 |
65 |
66 | 67 | 101 | 106 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /projects/rockpaperscissors/solution/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | Rock Paper Scissors SOLUTION 🚀🔥 3 | Concepts covered in this project 4 | 👉 For loops 5 | 👉 Dom Manipulation 6 | 👉 Variables 7 | 👉 Conditionals (if else if) 8 | 👉 Template Literals 9 | 👉 Event Listeners 10 | 👉 Higher order Function (Math.random()) 11 | */ 12 | 13 | // ** getComputerChoice randomly selects between `rock` `paper` `scissors` and returns that string ** 14 | // getComputerChoice() 👉 'Rock' 15 | // getComputerChoice() 👉 'Scissors' 16 | function getComputerChoice() { 17 | let rpsChoices = ['Rock', 'Paper', 'Scissors'] 18 | let computerChoice = rpsChoices[Math.floor(Math.random() * 3)] 19 | return computerChoice 20 | } 21 | 22 | // ** getResult compares playerChoice & computerChoice and returns the score accordingly ** 23 | // human wins - getResult('Rock', 'Scissors') 👉 1 24 | // human loses - getResult('Scissors', 'Rock') 👉 -1 25 | // human draws - getResult('Rock', 'Rock') 👉 0 26 | function getResult(playerChoice, computerChoice) { 27 | // return the result of score based on if you won, drew, or lost 28 | 29 | let score; 30 | 31 | // All situations where human draws, set `score` to 0 32 | if (playerChoice === computerChoice) { 33 | score = 0 34 | 35 | // All situations where human wins, set `score` to 1 36 | // make sure to use else ifs here 37 | } else if (playerChoice === 'Rock' && computerChoice === 'Scissors') { 38 | score = 1 39 | 40 | } else if (playerChoice === "Paper" && computerChoice === "Rock") { 41 | score = 1 42 | 43 | } else if (playerChoice === "Scissors" && computerChoice === "Paper") { 44 | score = 1 45 | 46 | // Otherwise human loses (aka set score to -1) 47 | } else { 48 | score = -1 49 | } 50 | 51 | // return score 52 | return score 53 | } 54 | 55 | // ** showResult updates the DOM to `You Win!` or `You Lose!` or `It's a Draw!` based on the score. Also shows Player Choice vs. Computer Choice** 56 | function showResult(score, playerChoice, computerChoice) { 57 | // Hint: on a score of -1 58 | // You should do result.innerText = 'You Lose!' 59 | // Don't forget to grab the div with the 'result' id! 60 | 61 | let result = document.getElementById('result') 62 | switch (score) { 63 | case -1: 64 | result.innerText = `You Lose!` 65 | break; 66 | case 0: 67 | result.innerText = `It's a Draw!` 68 | break; 69 | case 1: 70 | result.innerText = `You Win!` 71 | break; 72 | } 73 | 74 | let playerScore = document.getElementById('player-score') 75 | let hands = document.getElementById('hands') 76 | playerScore.innerText = `${Number(playerScore.innerText) + score}` 77 | hands.innerText = `👱 ${playerChoice} vs 🤖 ${computerChoice}` 78 | } 79 | 80 | // ** Calculate who won and show it on the screen ** 81 | function onClickRPS(playerChoice) { 82 | const computerChoice = getComputerChoice() 83 | const score = getResult(playerChoice.value, computerChoice) 84 | showResult(score, playerChoice.value, computerChoice) 85 | } 86 | 87 | // ** Make the RPS buttons actively listen for a click and do something once a click is detected ** 88 | function playGame() { 89 | // use querySelector to select all RPS Buttons 90 | let rpsButtons = document.querySelectorAll('.rpsButton') 91 | 92 | // * Adds an on click event listener to each RPS button and every time you click it, it calls the onClickRPS function with the RPS button that was last clicked * 93 | 94 | // 1. loop through the buttons using a forEach loop 95 | // 2. Add a 'click' event listener to each button 96 | // 3. Call the onClickRPS function every time someone clicks 97 | // 4. Make sure to pass the currently selected rps button as an argument 98 | 99 | rpsButtons.forEach(rpsButton => { 100 | rpsButton.onclick = () => onClickRPS(rpsButton) 101 | }) 102 | 103 | // Add a click listener to the end game button that runs the endGame() function on click 104 | let endGameButton = document.getElementById('endGameButton') 105 | endGameButton.onclick = () => endGame() 106 | } 107 | 108 | // ** endGame function clears all the text on the DOM ** 109 | function endGame() { 110 | let playerScore = document.getElementById('player-score') 111 | let hands = document.getElementById('hands') 112 | let result = document.getElementById('result') 113 | playerScore.innerText = '' 114 | hands.innerText = '' 115 | result.innerText = '' 116 | } 117 | 118 | playGame() -------------------------------------------------------------------------------- /projects/fightingGame/solution/solution.js: -------------------------------------------------------------------------------- 1 | /* 2 | 🌟 APP: Fighting Game 3 | 4 | Create an updateGame() function that will update the DOM with the state of the game 👇 5 | ======================================== 6 | 7 | - updateGame() 8 | 9 | These are the 2 classes you must create and their methods 👇 10 | ======================================== 11 | 12 | class Player { 13 | - strike() 14 | - heal() 15 | } 16 | 17 | class Game { 18 | - play() 19 | - checkIsOver() 20 | - declareWinner() 21 | - reset() 22 | } 23 | 24 | These functions are hard coded in the HTML. So, you can't change their names. 25 | 26 | These are all the DIV ID's you're gonna need access to 👇 27 | ======================================================== 28 | #1 ID 👉 'play' = Button to run simulation 29 | #2 ID 👉 'result' = Div that holds the winner of the match 30 | #3 ID 👉 'p1Health' = Div that holds player 1's health 31 | #4 ID 👉 'p2Health' = Div that holds player 2's health 32 | */ 33 | 34 | // ** Grabs elements from the DOM and stores them into variables ** 35 | let playButton = document.getElementById('play') 36 | let resultDiv = document.getElementById('result') 37 | let p1HealthDiv = document.getElementById('p1Health') 38 | let p2HealthDiv = document.getElementById('p2Health') 39 | 40 | // ** Check if either players health is 0 and if it is, then update isOver to true ** 41 | const updateGame = (p1,p2,p1HealthDiv,p2HealthDiv, gameState) => { 42 | // Update the DOM with the latest health of players 43 | console.log(p1.health, p1, "👈👈👈👈") 44 | p1HealthDiv.innerText = p1.health 45 | p2HealthDiv.innerText = p2.health 46 | if (p1.health <= 0 || p2.health <= 0) { 47 | game.isOver = true; 48 | gameState = game.isOver 49 | result.innerText = game.declareWinner(game.isOver,p1,p2) 50 | return gameState 51 | } 52 | } 53 | 54 | // ** Create the Player class which can create a player with all it's attributes and methods ** 55 | // qazi = Player('Qazi', 100, 7) 56 | // qazi.name 👉 'Qazi' 57 | // qazi.health 👉 100 58 | // qazi.attackDmg 👉 7 59 | class Player { 60 | constructor(name, health, attackDamage) { 61 | this.name = name; 62 | this.health = health; 63 | this.attackDmg = attackDamage; 64 | } 65 | // ** Attack an enemy with a random number from 0 to YOUR attackDmg bonus ** 66 | strike (player, enemy, attackDmg) { 67 | let damageAmount = Math.ceil(Math.random() * attackDmg) 68 | enemy.health -= damageAmount 69 | 70 | updateGame(p1,p2,p1HealthDiv,p2HealthDiv,gameState) 71 | 72 | return `${player.name} attacks ${enemy.name} for ${damageAmount}` 73 | } 74 | // ** Heal the player for random number from 1 to 5 ** 75 | heal (player) { 76 | let hpAmount = Math.ceil(Math.random() * 5) 77 | player.health += hpAmount 78 | 79 | updateGame(p1,p2,p1HealthDiv,p2HealthDiv,gameState) 80 | return `${player.name} heals for ${hpAmount} + HP!` 81 | } 82 | } 83 | 84 | // ** Create the Game class with all it's attributes and methods to run a match ** 85 | class Game { 86 | constructor(p1HealthDiv,p2HealthDiv) { 87 | this.isOver = false; 88 | this.p1HealthDiv = p1HealthDiv 89 | this.p2HealthDiv = p2HealthDiv 90 | } 91 | 92 | // ** If the game is over and a player has 0 health declare the winner! ** 93 | declareWinner(isOver,p1, p2) { 94 | let message 95 | if (isOver == true && p1.health <= 0) { 96 | message = `${p2.name} WINS!`; 97 | } 98 | else if(isOver == true && p2.health <= 0) { 99 | message = `${p1.name} WINS!` 100 | } 101 | console.log(isOver,message, "🧑‍🚀🧑‍🚀🧑‍🚀🧑‍🚀", p2.health, p1.health) 102 | return message 103 | } 104 | 105 | // ** Reset the players health back to it's original state and isOver to FALSE ** 106 | reset(p1,p2) { 107 | p1.health = 100 108 | p2.health = 100 109 | this.isOver = false 110 | resultDiv.innerText = '' 111 | updateGame(p1,p2,p1HealthDiv,p2HealthDiv) 112 | } 113 | 114 | // ** Simulates the whole match untill one player runs out of health ** 115 | play(p1, p2) { 116 | this.reset(p1,p2); 117 | // Make sure the players take turns untill isOver is TRUE 118 | while (!this.isOver) { 119 | p1.strike(p1,p2, p1.attackDmg) 120 | p2.heal(p2) 121 | p2.strike(p2,p1, p2.attackDmg); 122 | p1.heal(p1) 123 | updateGame(p1,p2,p1HealthDiv,p2HealthDiv); 124 | } 125 | // Once isOver is TRUE run the declareWinner() method 126 | return this.declareWinner(this.isOver,player1,player2); 127 | } 128 | 129 | } 130 | 131 | // ** Create 2 players using the player class ** 132 | let player1 = new Player('Lance', 100, 15) 133 | let player2 = new Player('Qazi', 100, 15) 134 | 135 | // ** Save original Player Data ** 136 | let p1 = player1 137 | let p2 = player2 138 | 139 | // ** Create the game object from the Game class ** 140 | let game = new Game(p1HealthDiv,p2HealthDiv); 141 | 142 | // ** Save original Game Data ** 143 | let gameState = game.isOver 144 | 145 | 146 | // ** Add a click listener to the simulate button that runs the play() method on click and pass in the players ** 147 | play.onclick = () => result.innerText = game.play(player1,player2); 148 | 149 | 150 | // ** BONUS ** 151 | // Add functionality where players can press a button to attack OR heal 152 | 153 | // ** Player 1 Controls ** 154 | document.addEventListener('keydown', function(e) { 155 | if (e.key == "q" && player2.health > 0 ){ 156 | player1.strike(player1, player2, player1.attackDmg) 157 | document.getElementById('p1attack').play(); 158 | } 159 | }); 160 | 161 | document.addEventListener('keydown', function(e) { 162 | if (e.key == "a" && player2.health > 0 ){ 163 | player1.heal(player1) 164 | document.getElementById('p1heal').play(); 165 | } 166 | }); 167 | 168 | // ** Player 2 Controls ** 169 | document.addEventListener('keydown', function(e) { 170 | if (e.key == "p" && player1.health > 0){ 171 | player2.strike(player2, player1, player2.attackDmg) 172 | document.getElementById('p2attack').play(); 173 | } 174 | }); 175 | 176 | document.addEventListener('keydown', function(e) { 177 | if (e.key == "l" && player2.health > 0 ){ 178 | player2.heal(player2) 179 | document.getElementById('p2heal').play(); 180 | } 181 | }); 182 | 183 | 184 | 185 | 186 | -------------------------------------------------------------------------------- /projects/fetchmovies/solution/script.js: -------------------------------------------------------------------------------- 1 | console.log("YOOO") 2 | var firstName = 'Nazariy' 3 | let apiUrl = 'http://localhost:3000' 4 | if (location.href.indexOf('netlify') != -1) { 5 | apiUrl = 'https://netflix-cp.herokuapp.com' 6 | } 7 | 8 | // Called whe the page is loaded 9 | window.onload = () => { 10 | getOriginals() 11 | getTrendingNow() 12 | getTopRated() 13 | getWishList() 14 | getGenres() 15 | letVarExample() 16 | } 17 | 18 | function getWishList() { 19 | fetch(`${apiUrl}/wishlist`, { 20 | headers: { 21 | Authorization: `${localStorage.getItem('token')}`, 22 | }, 23 | }) 24 | .then(response => { 25 | if (response.ok) { 26 | return response.json() 27 | } else { 28 | throw new Error('something went wrong') 29 | } 30 | }) 31 | .then(data => { 32 | showMovies(data, '#wishlist', 'backdrop_path') 33 | }) 34 | .catch(error_data => { 35 | logOut() 36 | console.log(error_data) 37 | }) 38 | } 39 | 40 | function letVarExample(firstName = 'Nazariy') { 41 | // Melissas Address 42 | const address = { 43 | street: '9879 Test rd.', 44 | city: 'Brooklyn', 45 | state: 'NY', 46 | } 47 | 48 | // address.state = "MI"; 49 | 50 | // let state = address.state; 51 | // state = "MI" 52 | // console.log(address); 53 | 54 | // let address2 = address; 55 | // address2.state = "MI"; 56 | 57 | // let address2 = { 58 | // ...address, 59 | // apartment: "MI" 60 | // } 61 | 62 | // let { street, city, state } = address; 63 | 64 | // console.log(street + city + state); 65 | } 66 | 67 | async function getMovieTrailer(id) { 68 | var url = `https://api.themoviedb.org/3/movie/${id}/videos?api_key=19f84e11932abbc79e6d83f82d6d1045&language=en-US` 69 | return await fetch(url).then(response => { 70 | if (response.ok) { 71 | return response.json() 72 | } else { 73 | throw new Error('something went wrong') 74 | } 75 | }) 76 | } 77 | 78 | const setTrailer = trailers => { 79 | const iframe = document.getElementById('movieTrailer') 80 | const movieNotFound = document.querySelector('.movieNotFound') 81 | if (trailers.length > 0) { 82 | movieNotFound.classList.add('d-none') 83 | iframe.classList.remove('d-none') 84 | iframe.src = `https://www.youtube.com/embed/${trailers[0].key}` 85 | } else { 86 | iframe.classList.add('d-none') 87 | movieNotFound.classList.remove('d-none') 88 | } 89 | } 90 | 91 | const handleMovieSelection = e => { 92 | const id = e.target.getAttribute('data-id') 93 | const iframe = document.getElementById('movieTrailer') 94 | // here we need the id of the movie 95 | getMovieTrailer(id).then(data => { 96 | const results = data.results 97 | const youtubeTrailers = results.filter(result => { 98 | if (result.site == 'YouTube' && result.type == 'Trailer') { 99 | return true 100 | } else { 101 | return false 102 | } 103 | }) 104 | setTrailer(youtubeTrailers) 105 | }) 106 | 107 | // open modal 108 | $('#trailerModal').modal('show') 109 | // we need to call the api with the ID 110 | } 111 | 112 | showMovies = (movies, element_selector, path_type) => { 113 | var moviesEl = document.querySelector(element_selector) 114 | for (var movie of movies.results) { 115 | var imageElement = document.createElement('img') 116 | imageElement.setAttribute('data-id', movie.id) 117 | 118 | imageElement.src = `https://image.tmdb.org/t/p/original${movie[path_type]}` 119 | 120 | imageElement.addEventListener('click', e => { 121 | handleMovieSelection(e) 122 | }) 123 | moviesEl.appendChild(imageElement) 124 | } 125 | } 126 | 127 | function fetchMoviesBasedOnGenre(genreId) { 128 | var url = 'https://api.themoviedb.org/3/discover/movie?' 129 | url += 130 | 'api_key=19f84e11932abbc79e6d83f82d6d1045&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1' 131 | url += `&with_genres=${genreId}` 132 | return fetch(url).then(response => { 133 | if (response.ok) { 134 | return response.json() 135 | } else { 136 | throw new Error('something went wrong') 137 | } 138 | }) // returns a promise already 139 | } 140 | 141 | function fetchMovies(url, element_selector, path_type) { 142 | fetch(url) 143 | .then(response => { 144 | if (response.ok) { 145 | return response.json() 146 | } else { 147 | throw new Error('something went wrong') 148 | } 149 | }) 150 | .then(data => { 151 | showMovies(data, element_selector, path_type) 152 | }) 153 | .catch(error_data => { 154 | console.log(error_data) 155 | }) 156 | } 157 | 158 | function showMoviesGenres(genres) { 159 | genres.genres.forEach(function (genre) { 160 | // get list of movies 161 | var movies = fetchMoviesBasedOnGenre(genre.id) 162 | movies 163 | .then(function (movies) { 164 | showMoviesBasedOnGenre(genre.name, movies) 165 | }) 166 | .catch(function (error) { 167 | console.log('BAD BAD', error) 168 | }) 169 | // show movies based on genre 170 | }) 171 | } 172 | 173 | function showMoviesBasedOnGenre(genreName, movies) { 174 | let allMovies = document.querySelector('.movies') 175 | let genreEl = document.createElement('div') 176 | genreEl.classList.add('movies__header') 177 | genreEl.innerHTML = ` 178 |

${genreName}

179 | ` 180 | let moviesEl = document.createElement('div') 181 | moviesEl.classList.add('movies__container') 182 | moviesEl.setAttribute('id', genreName) 183 | 184 | for (var movie of movies.results) { 185 | var imageElement = document.createElement('img') 186 | let { backdrop_path, id } = movie 187 | console.log('TESTING DESCONSTRUCT:', id, backdrop_path) 188 | imageElement.setAttribute('data-id', id) 189 | 190 | imageElement.src = `https://image.tmdb.org/t/p/original${backdrop_path}` 191 | 192 | imageElement.addEventListener('click', e => { 193 | handleMovieSelection(e) 194 | }) 195 | moviesEl.appendChild(imageElement) 196 | } 197 | 198 | allMovies.appendChild(genreEl) 199 | allMovies.appendChild(moviesEl) 200 | } 201 | 202 | function getGenres() { 203 | var url = 204 | 'https://api.themoviedb.org/3/genre/movie/list?api_key=19f84e11932abbc79e6d83f82d6d1045&language=en-US' 205 | fetch(url) 206 | .then(response => { 207 | if (response.ok) { 208 | return response.json() 209 | } else { 210 | throw new Error('something went wrong') 211 | } 212 | }) 213 | .then(data => { 214 | showMoviesGenres(data) 215 | }) 216 | .catch(error_data => { 217 | console.log(error_data) 218 | }) 219 | } 220 | 221 | function getOriginals() { 222 | var url = 223 | 'https://api.themoviedb.org/3/discover/tv?api_key=19f84e11932abbc79e6d83f82d6d1045&with_networks=213' 224 | fetchMovies(url, '.original__movies', 'poster_path') 225 | } 226 | 227 | function getTrendingNow() { 228 | var url = 229 | 'https://api.themoviedb.org/3/trending/movie/week?api_key=19f84e11932abbc79e6d83f82d6d1045' 230 | fetchMovies(url, '#trending', 'backdrop_path') 231 | } 232 | 233 | function getTopRated() { 234 | var url = 235 | 'https://api.themoviedb.org/3/movie/top_rated?api_key=19f84e11932abbc79e6d83f82d6d1045&language=en-US&page=1' 236 | fetchMovies(url, '#top_rated', 'backdrop_path') 237 | } 238 | 239 | // Loop through list of genres 240 | // Show genres in HTML 241 | // Fetch movies based on genre fetchMovies(url, genre, classInHTML) 242 | // Display the list of movies 243 | 244 | // https://api.themoviedb.org/3/discover/movie?api_key=19f84e11932abbc79e6d83f82d6d1045&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&with_genres=28 245 | 246 | // Movies genres 247 | // https://api.themoviedb.org/3/genre/movie/list?api_key=19f84e11932abbc79e6d83f82d6d1045&language=en-US 248 | -------------------------------------------------------------------------------- /.replit: -------------------------------------------------------------------------------- 1 | hidden=[".config"] 2 | 3 | # hosting is currently hardcoded for this language 4 | # [hosting] 5 | # route = "/" 6 | # directory= "/" 7 | 8 | [nix] 9 | channel = "stable-21_11" 10 | 11 | [languages.html] 12 | pattern = "**/*.html" 13 | [languages.html.languageServer] 14 | start = ["vscode-html-language-server", "--stdio"] 15 | [languages.html.languageServer.initializationOptions] 16 | provideFormatter = true 17 | [languages.html.languageServer.configuration.html] 18 | customData = [ ] 19 | autoCreateQuotes = true 20 | autoClosingTags = true 21 | mirrorCursorOnMatchingTag = false 22 | 23 | [languages.html.languageServer.configuration.html.completion] 24 | attributeDefaultValue = "doublequotes" 25 | 26 | [languages.html.languageServer.configuration.html.format] 27 | enable = true 28 | wrapLineLength = 120 29 | unformatted = "wbr" 30 | contentUnformatted = "pre,code,textarea" 31 | indentInnerHtml = false 32 | preserveNewLines = true 33 | indentHandlebars = false 34 | endWithNewline = false 35 | extraLiners = "head, body, /html" 36 | wrapAttributes = "auto" 37 | templating = false 38 | unformattedContentDelimiter = "" 39 | 40 | [languages.html.languageServer.configuration.html.suggest] 41 | html5 = true 42 | 43 | [languages.html.languageServer.configuration.html.validate] 44 | scripts = true 45 | styles = true 46 | 47 | [languages.html.languageServer.configuration.html.hover] 48 | documentation = true 49 | references = true 50 | 51 | [languages.html.languageServer.configuration.html.trace] 52 | server = "off" 53 | 54 | [languages.javascript] 55 | pattern = "**/{*.js,*.jsx,*.ts,*.tsx,*.mjs,*.cjs}" 56 | [languages.javascript.languageServer] 57 | start = ["typescript-language-server", "--stdio"] 58 | 59 | # TODO autocomplete relies on snippet support, which we don't advertise to LSP servers. 60 | # For now CSS autocomplete will use built-in codemirror, which is not perfect but good enough 61 | [languages.css] 62 | pattern = "**/{*.less,*.scss,*.css}" 63 | [languages.css.languageServer] 64 | start = ["vscode-css-language-server", "--stdio"] 65 | [languages.css.languageServer.configuration.css] 66 | customData = [ ] 67 | validate = true 68 | 69 | [languages.css.languageServer.configuration.css.completion] 70 | triggerPropertyValueCompletion = true 71 | completePropertyWithSemicolon = true 72 | 73 | [languages.css.languageServer.configuration.css.hover] 74 | documentation = true 75 | references = true 76 | 77 | [languages.css.languageServer.configuration.css.lint] 78 | # Configure linting 79 | # ignore = don't show any warning or error 80 | # warning = show yellow underline 81 | # error = show red underline 82 | argumentsInColorFunction = "error" # Invalid number of parameters 83 | boxModel = "ignore" # Do not use width or height when using padding or border 84 | compatibleVendorPrefixes = "ignore" # When using a vendor-specific prefix make sure to also include all other vendor-specific properties" 85 | duplicateProperties = "warning" # Do not use duplicate style definitions 86 | emptyRules = "warning" # Do not use empty rulesets 87 | float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes. 88 | fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties 89 | hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers 90 | idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML. 91 | ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older 92 | important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored. 93 | importStatement = "ignore" # Import statements do not load in parallel 94 | propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display 95 | universalSelector = "ignore" # The universal selector (*) is known to be slow 96 | unknownAtRules = "warning" # Unknown at-rule 97 | unknownProperties = "warning" # Unknown property. 98 | validProperties = [ ] # add some properties that the linter doesn't know about 99 | unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property. 100 | vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property 101 | zeroUnits = "ignore" # No unit for zero needed 102 | 103 | [languages.css.languageServer.configuration.css.trace] 104 | server = "off" 105 | 106 | [languages.css.languageServer.configuration.scss] 107 | validate = true 108 | 109 | [languages.css.languageServer.configuration.scss.completion] 110 | triggerPropertyValueCompletion = true 111 | completePropertyWithSemicolon = true 112 | 113 | [languages.css.languageServer.configuration.scss.hover] 114 | documentation = true 115 | references = true 116 | 117 | [languages.css.languageServer.configuration.scss.lint] 118 | # Configure linting 119 | # ignore = don't show any warning or error 120 | # warning = show yellow underline 121 | # error = show red underline 122 | argumentsInColorFunction = "error" # Invalid number of parameters 123 | boxModel = "ignore" # Do not use width or height when using padding or border 124 | compatibleVendorPrefixes = "ignore" # When using a vendor-specific prefix make sure to also include all other vendor-specific properties" 125 | duplicateProperties = "warning" # Do not use duplicate style definitions 126 | emptyRules = "warning" # Do not use empty rulesets 127 | float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes. 128 | fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties 129 | hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers 130 | idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML. 131 | ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older 132 | important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored. 133 | importStatement = "ignore" # Import statements do not load in parallel 134 | propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display 135 | universalSelector = "ignore" # The universal selector (*) is known to be slow 136 | unknownAtRules = "warning" # Unknown at-rule 137 | unknownProperties = "warning" # Unknown property. 138 | validProperties = [ ] # add some properties that the linter doesn't know about 139 | unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property. 140 | vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property 141 | zeroUnits = "ignore" # No unit for zero needed" 142 | 143 | [languages.css.languageServer.configuration.less] 144 | validate = true 145 | 146 | [languages.css.languageServer.configuration.less.completion] 147 | triggerPropertyValueCompletion = true 148 | completePropertyWithSemicolon = true 149 | 150 | [languages.css.languageServer.configuration.less.hover] 151 | documentation = true 152 | references = true 153 | 154 | [languages.css.languageServer.configuration.less.lint] 155 | # Configure linting 156 | # ignore = don't show any warning or error 157 | # warning = show yellow underline 158 | # error = show red underline 159 | argumentsInColorFunction = "error" # Invalid number of parameters 160 | boxModel = "ignore" # Do not use width or height when using padding or border 161 | compatibleVendorPrefixes = "ignore" # When using a vendor-specific prefix make sure to also include all other vendor-specific properties" 162 | duplicateProperties = "warning" # Do not use duplicate style definitions 163 | emptyRules = "warning" # Do not use empty rulesets 164 | float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes. 165 | fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties 166 | hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers 167 | idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML. 168 | ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older 169 | important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored. 170 | importStatement = "ignore" # Import statements do not load in parallel 171 | propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display 172 | universalSelector = "ignore" # The universal selector (*) is known to be slow 173 | unknownAtRules = "warning" # Unknown at-rule 174 | unknownProperties = "warning" # Unknown property. 175 | validProperties = [ ] # add some properties that the linter doesn't know about 176 | unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property. 177 | vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property 178 | zeroUnits = "ignore" # No unit for zero needed" 179 | -------------------------------------------------------------------------------- /playground.js: -------------------------------------------------------------------------------- 1 | // console.log('hello world') 2 | // console.log('Rafeh Qazi') 3 | 4 | // // variables (var, const, let) 5 | // let name = 'Peter Pan' 6 | // console.log(name) 7 | 8 | // let sentence = 'how are you doing today, nice to see you, hope you have a great day!' 9 | 10 | // operators 11 | // fruit = prompt('what is your favorite fruit?') 12 | 13 | // console.log(fruit) 14 | 15 | // * / ** + - 16 | 17 | // food = Number(prompt('how much was the food?')) 18 | // tipPercentage = Number(prompt('tip %?')) / 100 19 | // tipAmount = food * tipPercentage 20 | // total = food + tipAmount 21 | 22 | // console.log('tip amount', tipAmount) 23 | // console.log('total', total) 24 | // alert(tipAmount) 25 | 26 | // user input 27 | 28 | /* data types (strings, numbers) 29 | numbers 👉 1, 5, 10, 100, 2.5 30 | strings 👉 'hello', "what is up" 31 | arrays 👉 [] 32 | objects 👉 {} 33 | boolean 👉 true / false (banks) 34 | */ 35 | 36 | /* Math Operators 37 | Multiply * 38 | Divide / 39 | Exponents ** 40 | Modulo/Remainder % 5%2 = 1 41 | Add + 42 | Subtract - 43 | */ 44 | 45 | /* Math Methods 46 | Floor - Rounds down 47 | Ceil - Rounds up 48 | Random - gives you number between 0 and 1 49 | */ 50 | 51 | // Baby weather app (conditionals) 52 | // if rain 👉 'Grab your umbrella ☔' 53 | // else 👉 'Wear your sunglasses 😎' 54 | // let weather = prompt('How is the weather?') 55 | 56 | // if (weather == 'rainy') { 57 | // console.log('Grab your umbrella ☔') 58 | // } else { 59 | // console.log('Wear your sunglasses 😎') 60 | // } 61 | 62 | // conditional operators 63 | // ==, ===, >, <, <=, >=, !=, !== 64 | 65 | // Functions 66 | // this is a function called 'sayMyName' 67 | // and it has 0 arguments 68 | // does: it logs out your name to the console 69 | function sayMyName() { 70 | console.log('Qazi') 71 | } 72 | 73 | // sayMyName() 74 | 75 | // this is a function called "sayMyName2" 76 | // it has 1 argument called `name` 77 | // does: it logs out your name to console 78 | function sayMyName2(name) { 79 | console.log(name) 80 | } 81 | 82 | // sayMyName2('Kevin') 83 | 84 | function greeting(name) { 85 | // greet = 'hi ' + name + ', Nice to meet you!' 86 | // template literals `` 87 | greet = `hi ${name}, Nice to meet you!` 88 | console.log(greet) 89 | } 90 | 91 | // greeting('Johnny Depp') 92 | 93 | function sum(a, b) { 94 | // return 95 | return a + b 96 | } 97 | 98 | // num1 = sum(1, 2) 99 | // console.log(num1) 100 | 101 | function calculateFoodTotal(food, tip) { 102 | const tipPercentage = tip / 100 103 | const tipAmount = food * tipPercentage 104 | const total = sum(food, tipAmount) 105 | return total 106 | } 107 | 108 | // console.log(calculateFoodTotal(300, 20)) 109 | 110 | // ES6 111 | // Arrow Functions => 112 | // arrow function with explicit return 113 | const sumArrow = (a, b) => { 114 | return a + b 115 | } 116 | 117 | // arrow function with implicit return 118 | // IMPORTANT: For implicit return, remove curly braces 119 | const sumArrow2 = (a, b) => a + b 120 | 121 | // console.log(sumArrow2(10, 50)) 122 | 123 | // Arrays 124 | // const groceries = ['🍌', '🍎', '🍊', '🍐'] 125 | // console.log(groceries) 126 | 127 | // grab the 2nd index 128 | // console.log(groceries[2]) 129 | 130 | // Array methods 131 | // groceries.push('🍪') 132 | // console.log(groceries) 133 | 134 | // groceries.push('🫐') 135 | // console.log(groceries) 136 | 137 | // Array Slice 138 | // start from 0 INCLUSIVE and UP to 6 [0, 1, 2, 3, 4, 5] 139 | // console.log(groceries.slice(0, 6)) 140 | 141 | // console.log(groceries.slice(1, 4)) 142 | // array methods (slice, push, indexOf, length) 143 | // console.log(groceries.indexOf('🍐')) 144 | // console.log(groceries.length) 145 | 146 | // OBJECTS {} 147 | // key: value pairs 148 | // const person = { 149 | // name: 'Leonardo', 150 | // shirt: 'white' 151 | // } 152 | 153 | // access object: dot notation vs. bracket notation 154 | // console.log(person.name) 155 | // console.log(person.shirt) 156 | 157 | // // bracket notation 158 | // console.log(person['name']) 159 | // console.log(person['shirt']) 160 | 161 | // // assign object 162 | // person['phone'] = '1-222-333-4444' 163 | // console.log(person.phone) 164 | 165 | // console.log(person) 166 | 167 | // person2 168 | // const person2 = { 169 | // name: 'Qazi', 170 | // shirt: 'black' 171 | // } 172 | 173 | // console.log(person2) 174 | // console.log(person2.name) 175 | // console.log(person2.shirt) 176 | 177 | // es6 arrow function (2 arguments) 178 | // object 179 | // template literals 180 | // methods Math.floor() 181 | const introducer = (name, shirt) => { 182 | const person = { 183 | name: name, 184 | shirt: shirt, 185 | assets: 100000, 186 | liabilities: 50000, 187 | netWorth: function() { 188 | return this.assets - this.liabilities 189 | } 190 | } 191 | 192 | const intro = `Hi, my name is ${person.name} and the color of my shirt is ${person.shirt} and my net worth is $${person.netWorth()} USD` 193 | 194 | return intro 195 | } 196 | 197 | // console.log(introducer('Qazi', 'black')) 198 | // console.log(introducer('Leonardo', 'white')) 199 | 200 | let fruits = ['🍌', '🍎', '🍊', '🍐', '🍌', '🍎', '🍊', '🍐', '🍌', '🍎', '🍊', '🍐', '🍌', '🍎', '🍊', '🍐', '🍌', '🍎', '🍊', '🍐'] 201 | 202 | // console.log(fruits[0]) 203 | // console.log(fruits[1]) 204 | // console.log(fruits[2]) 205 | // console.log(fruits[3]) 206 | 207 | // for (let i=0; i < fruits.length; i++) { 208 | // console.log(fruits[i]) 209 | // } 210 | 211 | // for (const fruit of fruits) { 212 | // console.log(fruit) 213 | // } 214 | 215 | const numbers = [1, 2, 3, 4, 5, 6] 216 | // for (let i=0; i < numbers.length; i++) { 217 | // console.log(numbers[i]) 218 | // } 219 | 220 | const double = (numbers) => { 221 | let result = [] 222 | for (const number of numbers) { 223 | result.push(number * 2) 224 | } 225 | 226 | return result 227 | } 228 | 229 | // console.log(double([1, 2, 3, 4, 5, 6])) 230 | 231 | // [2, 4, 6, 8, 10, 12] 232 | 233 | const howManyLetters = (phrase) => { 234 | // counter 235 | let result = 0; 236 | 237 | for (const index in phrase) { 238 | console.log(Number(index) + 1) 239 | result = Number(index) + 1 240 | } 241 | 242 | return { result } 243 | } 244 | 245 | // const phrase = prompt('write your phrase') 246 | 247 | // console.log(howManyLetters(phrase)) 248 | 249 | // [1, 2, 3, 4] // 10 250 | // result = 0 251 | // result = 1 252 | // result = 3 253 | // result = 6 254 | // result = 10 255 | 256 | const sumArray = (numbers) => { 257 | let result = 0; 258 | // for loop 259 | for (const number of numbers) { 260 | console.log(number) 261 | result += number 262 | } 263 | return { result } 264 | } 265 | 266 | // const nums = [1, 2, 3, 4, 5] 267 | // console.log(sumArray(nums)) 268 | // sum up all numbers in array 269 | 270 | const max = (numbers) => { 271 | let result = numbers[0] 272 | 273 | // loop 274 | for (const number of numbers) { 275 | if (number > result) { 276 | result = number 277 | } 278 | } 279 | 280 | return { result } 281 | } 282 | 283 | // console.log(max([1, 2, 3, 4, 5])) 284 | 285 | const letterFrequency = (phrase) => { 286 | // letterFrequency('haha') 👉 {'h': 2, 'a': 2} 287 | console.log(phrase) 288 | // make a `frequency` object {} 289 | let frequency = {} 290 | for (const letter of phrase) { 291 | // check if letter exists in frequency 292 | if (letter in frequency) { 293 | // increment the value by +1 294 | frequency[letter] += 1 295 | // otherwise, set the value to 1 296 | } else { 297 | frequency[letter] = 1 298 | } 299 | } 300 | return frequency 301 | } 302 | 303 | // console.log(letterFrequency('lol, what are you doing later tonight lol, haha!')) 304 | 305 | // wordFrequency('lol what lol') 👉 {'lol': 2, 'what': 1} 306 | const wordFrequency = (phrase) => { 307 | const words = phrase.split(' ') 308 | return letterFrequency(words) 309 | } 310 | 311 | // const userInput = prompt('Write your sentence') 312 | // console.log(wordFrequency(userInput)) 313 | // incremental operators 314 | // ++, --, += 315 | 316 | // higher order functions 317 | // map - loops and returns an array 318 | // filter - loops and returns an array with matching conditions 319 | // reduce 320 | 321 | // MAP 322 | const doubleMap = (numbers) => { 323 | return numbers.map(number => number * 2) 324 | } 325 | 326 | // console.log(doubleMap([1, 2, 3])) 327 | 328 | // filter([1,2,3,4,5,6], 3) 👉 [4, 5, 6] 329 | const filter = (numbers, greaterThan) => { 330 | let result = [] 331 | for (const number of numbers) { 332 | if (number > greaterThan) { 333 | result.push(number) 334 | } 335 | } 336 | return result 337 | } 338 | 339 | // console.log(filter([1, 2, 3, 4, 5, 6], 2)) 340 | // const nums = [1, 2, 3, 4, 5, 6] 341 | // console.log(nums.filter(num => num > 4 || num < 2)) 342 | 343 | const actors = [ 344 | { name: 'johnny', netWorth: 2000000 }, 345 | { name: 'amber', netWorth: 10 }, 346 | { name: 'matt', netWorth: 170000000 }, 347 | { name: 'brad', netWorth: 300000000 }, 348 | { name: 'leonardo', netWorth: 10000000 }, 349 | ] 350 | 351 | // let result = actors.filter(actor => actor.netWorth > 10) 352 | // console.log(result) 353 | // let names = result.map(actor => actor.name).join(', ') 354 | // console.log(actors.reduce((prev, curr) => prev + curr.netWorth, 0)) 355 | 356 | // playground.innerHTML = `

${names}

` 357 | 358 | // const nums = [1, 2, 3, 4] 359 | // const result = nums.reduce((a, b) => a + b, 0) 360 | 361 | // console.log(result) 362 | 363 | // select a random element from an array 364 | // randomFruit([1, 2]) 👉 2 365 | // randomFruit([1, 2]) 👉 1 366 | const randomFruit = (fruits) => { 367 | const randomNumber = Math.floor(Math.random() * fruits.length) 368 | 369 | console.log(randomNumber) 370 | 371 | return fruits[randomNumber] 372 | } 373 | 374 | // fruits = ['🍌', '🍎', '🍊', '🍐'] 375 | // console.log(randomFruit(fruits)) 376 | 377 | // if else if else 378 | // rainy (1), sunny (-1), overcast (0) 379 | const weatherScorer = (weather, weather2) => { 380 | let score 381 | 382 | if (weather == 'rainy' && weather2 == 'overcast') { 383 | score = 2 384 | } else if (weather == 'rainy') { 385 | score = 1 386 | } else if (weather == 'sunny') { 387 | score = -1 388 | } else { 389 | score = 0 390 | } 391 | 392 | return score 393 | } 394 | 395 | // console.log(weatherScorer('rainy', 'sunny')) 396 | 397 | // DOG API 398 | // https://dog.ceo/api/breeds/image/random --------------------------------------------------------------------------------