├── .replit ├── classes └── fightingGame │ ├── exercise │ ├── index.html │ ├── script.js │ └── style.css │ └── solution │ ├── index.html │ ├── solution.js │ └── style.css ├── dom └── red-yellow-green │ ├── index.html │ └── script.js ├── exercises ├── arraysorting.js ├── converthourstoseconds.js ├── daysinamonth.js ├── findMax.js ├── palindromechecker.js └── savingsstrategy.js ├── functions └── sum │ ├── exercise │ ├── index.html │ └── script.js │ └── solution │ ├── index.html │ └── script.js ├── index.html ├── notes ├── arrays.js ├── baby-capstone.js ├── conditions.js ├── console-log.js ├── functions.js ├── mini-weather-app.js ├── objects.js ├── redBlueGreenSquares.js ├── tip-calculator.js └── variables.js ├── playground.js ├── projects ├── fetchmovies │ └── solution │ │ ├── index.html │ │ ├── script.js │ │ └── style.css ├── rockpaperscissors │ ├── exercise │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ └── solution │ │ ├── index.html │ │ ├── script.js │ │ └── style.css ├── stopwatch │ ├── exercise │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ └── solution │ │ ├── index.html │ │ ├── script.js │ │ └── style.css └── tip-calculator │ ├── exercise │ ├── index.html │ ├── script.js │ └── style.css │ └── solution │ ├── index.html │ ├── script.js │ └── style.css ├── replit.nix ├── style.css └── yourPlayground.js /.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 | -------------------------------------------------------------------------------- /classes/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 | -------------------------------------------------------------------------------- /classes/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 | -------------------------------------------------------------------------------- /classes/fightingGame/exercise/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: 'red'; 3 | } 4 | 5 | #result { 6 | background:'blue'; 7 | } -------------------------------------------------------------------------------- /classes/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 |
19 |
20 |
Hi
21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /classes/fightingGame/solution/solution.js: -------------------------------------------------------------------------------- 1 | let playButton = document.getElementById('play') 2 | let resultDiv = document.getElementById('result') 3 | 4 | 5 | 6 | class Player { 7 | constructor(name, health, atkDamage) { 8 | this.name = name; 9 | this.health = health; 10 | this.attack = atkDamage; 11 | } 12 | 13 | 14 | attack(player, enemy) { 15 | let damageAmount = Math.ceil(Math.random() * 10) 16 | enemy.health -= damageAmount 17 | 18 | return `${player} attacks ${enemy} for ${damageAmount} damage!` 19 | } 20 | //Generate a random number between 1 and 5 using Math.random() 21 | //Use that number to increase health of player 1 22 | heal(player) { 23 | let hpAmount = Math.ceil(Math.random() * 5) 24 | player.health += hpAmount 25 | 26 | return `${player} heals for ${hpAmount} + HP!` 27 | } 28 | } 29 | 30 | class Game { 31 | // default arugments 32 | constructor(player1, player2) { 33 | // Flag that indicates if the game is over or not 34 | this.isOver = false; 35 | } 36 | 37 | // Starts the game and logs out the status of players 38 | play(player1, player2) { 39 | // this.reset(); 40 | 41 | // while loops 42 | console.log(player1.attack()) 43 | // while (!this.isOver) { 44 | // player1.attack(player1,player2) 45 | // player1.heal(player1) 46 | // player2.attack(player2,player1); 47 | // player2.heal(player2) 48 | // this.checkTheEnd(player1,player2); 49 | // } 50 | // return this.declareWinner(this.isOver,this.player1,this.player2); 51 | } 52 | 53 | // Console log the winner of the battle 54 | declareWinner(isOver,p1, p2) { 55 | let message 56 | if (isOver == true && p1.health <= 0) { 57 | message = `${p2.name} WINS!`; 58 | console.log(message) 59 | } 60 | else if(isOver == true && p2.health <= 0) { 61 | message = `${p1.name} WINS!` 62 | } 63 | return message 64 | } 65 | 66 | // If player 1 or player 2 health is below 0 67 | // Mark theEnd true, to stop the game 68 | checkTheEnd(p1,p2) { 69 | if (p1.health <= 0 || p2.health <= 0) { 70 | this.isOver = true; 71 | return this.isOver 72 | } 73 | 74 | } 75 | 76 | // Console log the name and health of both players 77 | // Ex: Player 1: 100 | Player 2: 50 78 | playerStatus() { 79 | // console.log( 80 | // 'Player 1: ' + this.player1.name + ',' + ' Health: ' + this.player1.health 81 | // ); 82 | // console.log( 83 | // 'Player 2: ' + this.player2.name + ',' + ' Health: ' + this.player2.health 84 | // ); 85 | } 86 | 87 | //Reset health of player 1 and player 2 to 100 88 | //Reset theEnd to false 89 | // reset() { 90 | // this.player1.health = 100; 91 | // this.player2.health = 100; 92 | // this.isOver = false; 93 | // } 94 | // ** pl1AttackPl2 allows you to attack another player & deplete their health ** 95 | //Generate a random number between 1 and 10 using Math.random() 96 | //Use that number to decrease health from player 2 97 | // Problem: trying to do 2 things 98 | 99 | } 100 | 101 | // Initialize the class here 102 | // Call the start function of the game 103 | let player1 = new Player('Lance', 75, 25) 104 | let player2 = new Player('Qazi', 200, 0) 105 | let game = new Game(); 106 | 107 | play.onclick = () => result.innerText = game.play(player1,player2) 108 | ; 109 | 110 | 111 | -------------------------------------------------------------------------------- /classes/fightingGame/solution/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: 'red'; 3 | } 4 | 5 | #result { 6 | background:'blue'; 7 | } -------------------------------------------------------------------------------- /dom/red-yellow-green/index.html: -------------------------------------------------------------------------------- 1 |
2 |

Hello Night!

3 |
4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /exercises/arraysorting.js: -------------------------------------------------------------------------------- 1 | // Write a function that takes in an array and sort the numbers inside from least to greatest 2 | 3 | function sortArray (array) { 4 | 5 | } 6 | 7 | // BONUS sort the array without using .sort() 8 | 9 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /exercises/daysinamonth.js: -------------------------------------------------------------------------------- 1 | // Create a function that takes the month and year (as integers) 2 | // and returns the number of DAYS in that month 3 | 4 | // Hints: 5 | // Don't forget about leap year! 6 | // Keep in mind which month has 30 days, 31 days, and 28 days 7 | // Use everything you learned to get to the answer 8 | 9 | const daysInMonth = (month,year) => { 10 | 11 | } 12 | 13 | // Example: 14 | // daysInMonth(2,2018) -> 28 15 | // days(4,654) -> 30 16 | // days(2,2020) -> 29 -------------------------------------------------------------------------------- /exercises/findMax.js: -------------------------------------------------------------------------------- 1 | // Write a function that takes in an array of numbers and returns the largest number 2 | 3 | function findMax (array) { 4 | 5 | } 6 | 7 | //Topics: loops, arrays, conditions, -------------------------------------------------------------------------------- /exercises/palindromechecker.js: -------------------------------------------------------------------------------- 1 | // Write a function that takes in string and checks if it is a Palindrome 2 | // A palindrome is a word that is the same forwards and backwards! 3 | // Ex: racecar -> racecar 4 | 5 | function isPalindrome (string) { 6 | // Should return true IF it's a palindrome 7 | } 8 | 9 | 10 | //Topics: Strings, loops -------------------------------------------------------------------------------- /exercises/savingsstrategy.js: -------------------------------------------------------------------------------- 1 | // The 50-30-20 strategy is a simple way to budget 2 | // which involves spending 50% of after-tax income on needs, 3 | // 30% after tax income on wants, 4 | // 20% after-tax income on savings or paying off debt. 5 | 6 | // Create a function that takes an income amount and return an OBJECT with what they have for needs, wants, and savings 7 | 8 | function savingsStrategy (income) { 9 | 10 | } 11 | 12 | // Ex: 13 | // Input: fiftyThirtyTwenty(10000) 14 | // Output: { "Needs": 5000, "Wants": 3000, "Savings": 2000 } 15 | 16 | 17 | //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 | -------------------------------------------------------------------------------- /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 | */ -------------------------------------------------------------------------------- /functions/sum/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | Sum - Solution 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /functions/sum/solution/script.js: -------------------------------------------------------------------------------- 1 | console.log("Sum solution")) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | replit 14 | 15 | 16 | 17 | 18 | 19 | 20 |

Lessons

21 | DOM - Red Yellow Green Squares 22 | 23 |

Project Exercises

24 | Stopwatch
25 | Rock Paper Scissors
26 | Figthing Game
27 | Tip Calculator 28 | 29 |

Project Solutions

30 | Stopwatch
31 | Rock Paper Scissors
32 | Fighting Game
33 | Tip Calculator 34 |
35 | Fetch Movies 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /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/baby-capstone.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammer/JavaScript-Course-by-Clever-Programmer-/ad9c1b6c8d7986eb5088283a8573cf868eaac636/notes/baby-capstone.js -------------------------------------------------------------------------------- /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 '=='? -------------------------------------------------------------------------------- /notes/console-log.js: -------------------------------------------------------------------------------- 1 | console.log('hello world') 2 | console.log('Rafeh Qazi') -------------------------------------------------------------------------------- /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) -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /notes/redBlueGreenSquares.js: -------------------------------------------------------------------------------- 1 | // Go to the link below 👇 2 | 3 | // https://replit.com/@cleverprogrammer/DOM-Manipulation-Lesson#index.html -------------------------------------------------------------------------------- /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) -------------------------------------------------------------------------------- /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!' -------------------------------------------------------------------------------- /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')) -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/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/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() -------------------------------------------------------------------------------- /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/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/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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/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 | } -------------------------------------------------------------------------------- /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/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/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/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 | -------------------------------------------------------------------------------- /replit.nix: -------------------------------------------------------------------------------- 1 | { pkgs }: { 2 | deps = [ 3 | pkgs.nodePackages.vscode-langservers-extracted 4 | pkgs.nodePackages.typescript-language-server 5 | nodejs-16_x 6 | ]; 7 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-family: 'Inter', sans-serif; 3 | font-family: 'Lato', sans-serif; 4 | } -------------------------------------------------------------------------------- /yourPlayground.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammer/JavaScript-Course-by-Clever-Programmer-/ad9c1b6c8d7986eb5088283a8573cf868eaac636/yourPlayground.js --------------------------------------------------------------------------------