├── .replit ├── .vscode └── settings.json ├── Asynchronous Programming ├── index.html ├── script.js └── style.css ├── DOM Manipulation ├── Capture.PNG ├── index.html ├── script.js └── style.css ├── README.md ├── api ├── exercise │ ├── Random Dog │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ └── Super Hero API │ │ ├── images │ │ ├── 360_F_303367473_rTRc0Cux44BK2qyMLZhLzyzLT0t9J8Y0.jpg │ │ └── istockphoto-1146894154-612x612.jpg │ │ ├── index.html │ │ ├── script.js │ │ └── style.css └── solution │ ├── 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 ├── exercises ├── arraysorting.js ├── converthourstoseconds.js ├── daysinamonth.js ├── findMax.js ├── index.html ├── 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 ├── promise-examples.js ├── promises-async-await-apis.js ├── redBlueGreenSquares.js ├── tip-calculator.js └── variables.js ├── playground.js ├── projects ├── fetchmovies │ └── solution │ │ ├── index.html │ │ ├── script.js │ │ └── style.css ├── fightingGame │ ├── exercise │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ └── solution │ │ ├── index.html │ │ ├── solution.js │ │ ├── sounds │ │ ├── fastheal.mp3 │ │ ├── fastpunch.mp3 │ │ ├── quickheal.mp3 │ │ └── quickhit.mp3 │ │ └── 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 └── weather-app │ ├── 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 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Asynchronous Programming/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Aysnchronous Programming 8 | 9 | 10 | 11 |
12 |

Getting started with Asynchronous Programming

13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Asynchronous Programming/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyushSoni86/JavaScript-Course-by-Clever-Programmer-/58c991495a98fd958ca6b2ea124645dd368f91bc/Asynchronous Programming/script.js -------------------------------------------------------------------------------- /Asynchronous Programming/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: coral; 3 | color: rgb(124, 64, 20); 4 | font-family: cursive; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | height: 300px; 10 | width: auto; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | -------------------------------------------------------------------------------- /DOM Manipulation/Capture.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyushSoni86/JavaScript-Course-by-Clever-Programmer-/58c991495a98fd958ca6b2ea124645dd368f91bc/DOM Manipulation/Capture.PNG -------------------------------------------------------------------------------- /DOM Manipulation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |

DOM manipulation

13 |
14 |
15 | 16 | 17 | 18 |
19 | 20 |
21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /DOM Manipulation/script.js: -------------------------------------------------------------------------------- 1 | // console.log('Hello') 2 | 3 | // let title = document.getElementById('title'); 4 | 5 | // console.log(title.innerText); 6 | 7 | // let message = "Nikal Bhosdike" 8 | 9 | 10 | // title.innerText = message 11 | // console.log(title.innerText); 12 | 13 | // title.innerHTML = `

${message}

`; 14 | 15 | // title.style.color = 'red' 16 | 17 | // let redDiv = document.getElementById('red'); 18 | // let greenDiv = document.getElementById('green'); 19 | // let blue = document.getElementById('blue'); 20 | 21 | // redDiv.onclick = () => console.log('red') 22 | // greenDiv.onclick = () => console.log('green') 23 | // blue.onclick = () => console.log('blue') 24 | 25 | let squares = document.querySelectorAll('.colorSquare') 26 | // console.log(squares) 27 | 28 | // console.log(squares[0].value) 29 | // console.log(squares[1].value) 30 | // console.log(squares[2].value) 31 | 32 | // using a foreach loop 33 | const timesClicked = { 'red': 0, 'blue': 0, 'green': 0 } 34 | 35 | squares.forEach(squares => { 36 | squares.onclick = () => { 37 | timesClicked[squares.value] += 1; 38 | squares.innerText = timesClicked[squares.value]; 39 | } 40 | }) 41 | 42 | function clearScore() { 43 | timesClicked.red = 0; 44 | timesClicked.green = 0; 45 | timesClicked.blue = 0; 46 | squares.forEach(squares => { 47 | squares.innerText = ""; 48 | }); 49 | } 50 | const clearGame = document.getElementById('clear-score'); 51 | // clearGame.onclick = () => clearScore() 52 | 53 | const randomSelectFromArray = (fruits) => { 54 | const randomNumber = Math.floor(Math.random() * fruits.length); 55 | return fruits[randomNumber]; 56 | } 57 | 58 | 59 | let fruits = ['banana', 'apple', 'orange', 'guava'] 60 | // console.log(randomSelectFromArray(fruits)); 61 | 62 | const weatherScore =(wheather) =>{ 63 | let score; 64 | if (wheather == 'rainy') { 65 | score = 1; 66 | }else if (wheather == 'sunny') { 67 | score = -1; 68 | } else { 69 | score = 0; 70 | } 71 | return score; 72 | } -------------------------------------------------------------------------------- /DOM Manipulation/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | justify-content: center; 4 | gap: 50px; 5 | } 6 | 7 | #red, 8 | #blue, 9 | #green { 10 | width: 100px; 11 | height: 100px; 12 | } 13 | 14 | #red { 15 | background-color: red; 16 | } 17 | #blue { 18 | background-color: blue; 19 | } 20 | #green { 21 | background-color: green; 22 | } 23 | #clear-score{ 24 | margin-top: 20px; 25 | } 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript-Course-by-Clever-Programmer- 2 | This is a full JavaScript course by Clever Programmer 3 | -------------------------------------------------------------------------------- /api/exercise/Random Dog/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | API's 8 | 9 | 10 | 11 |
12 |
13 |

API calls in Javascript

14 |
15 |
16 |
17 | 18 |
19 |
20 |
21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /api/exercise/Random Dog/script.js: -------------------------------------------------------------------------------- 1 | // https://dog.ceo/api/breeds/image/random 2 | 3 | const dogImageDiv = document.getElementById('dogImage'); 4 | const dogBtn = document.getElementById('dogButton') 5 | 6 | // stuff you have to wait for 7 | // asynchronous programming 8 | // .then - promises 9 | const getDog = () => { 10 | fetch('https://dog.ceo/api/breeds/image/random') 11 | .then(response => response.json()) 12 | .then(json => { 13 | // console.log(json.message); 14 | dogImageDiv.innerHTML = 15 | `
` 16 | }); 17 | } 18 | 19 | 20 | dogBtn.onclick = () => getDog(); -------------------------------------------------------------------------------- /api/exercise/Random Dog/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-image: linear-gradient( 9 | to right, 10 | rgb(80, 80, 209), 11 | rgb(80, 179, 80) 12 | ); 13 | } 14 | 15 | .apiCall { 16 | color: white; 17 | font-size: 50px; 18 | font-family: cursive; 19 | } 20 | 21 | .container { 22 | display: flex; 23 | flex-direction: column; 24 | gap: 30px; 25 | margin-top: 100px; 26 | } 27 | 28 | #dogButton { 29 | margin: 10px 60px; 30 | padding: 20px; 31 | border: none; 32 | background-color: rgba(63, 207, 135, 0.925); 33 | border-radius: 13px; 34 | box-shadow: 4px 3px 11px 0px; 35 | size: 10px; 36 | font-size: 32px; 37 | font-weight: bold; 38 | } 39 | 40 | img { 41 | max-width: 80%; 42 | height: auto; 43 | border-radius: 10px; 44 | box-shadow: 4px 3px 11px 0px; 45 | transition: transform 0.2s; 46 | } 47 | 48 | img:hover { 49 | transform: scale(1.08); 50 | box-shadow: 6px 3px 11px 0px; 51 | } 52 | 53 | #dogImage { 54 | justify-content: center; 55 | align-items: center; 56 | } 57 | 58 | button:cli{ 59 | 60 | } 61 | 62 | button:hover{ 63 | transform: scale(1.03); 64 | } -------------------------------------------------------------------------------- /api/exercise/Super Hero API/images/360_F_303367473_rTRc0Cux44BK2qyMLZhLzyzLT0t9J8Y0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyushSoni86/JavaScript-Course-by-Clever-Programmer-/58c991495a98fd958ca6b2ea124645dd368f91bc/api/exercise/Super Hero API/images/360_F_303367473_rTRc0Cux44BK2qyMLZhLzyzLT0t9J8Y0.jpg -------------------------------------------------------------------------------- /api/exercise/Super Hero API/images/istockphoto-1146894154-612x612.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyushSoni86/JavaScript-Course-by-Clever-Programmer-/58c991495a98fd958ca6b2ea124645dd368f91bc/api/exercise/Super Hero API/images/istockphoto-1146894154-612x612.jpg -------------------------------------------------------------------------------- /api/exercise/Super Hero API/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random SuperHero 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /api/exercise/Super Hero API/script.js: -------------------------------------------------------------------------------- 1 | // 837972860711403 my token 2 | // https://superheroapi.com/api/access-token/character-id/ 3 | 4 | const SUPERHERO_TOKEN = '837972860711403'; 5 | const BASE_URL = `https://www.superheroapi.com/api.php/${SUPERHERO_TOKEN}`; 6 | 7 | const heroImageDiv = document.getElementById('heroImage'); 8 | 9 | const searchButton = document.getElementById('searchBtn'); 10 | 11 | const searchInput = document.getElementById('heroName'); 12 | 13 | const statToEmoji = { 14 | intelligence: '🧠', 15 | strength: '💪', 16 | speed: '⚡', 17 | durability: '🏋️‍♂️', 18 | power: '📊', 19 | combat: '⚔️', 20 | } 21 | 22 | const showHeroInfo = (character) => { 23 | const name = `

${character.name}

` 24 | 25 | const img = `` 26 | 27 | const stats = Object.keys(character.powerstats).map(stat => { 28 | return `

${statToEmoji[stat]} ${stat}: ${character.powerstats[stat]}

` 29 | }).join('') 30 | 31 | heroImageDiv.innerHTML = 32 | `
33 |
${img}
34 |
${name}
${stats.toUpperCase()}
35 |
` 36 | } 37 | 38 | const getRandomSuperHero = (id) => { 39 | fetch(`${BASE_URL}/${id}`) 40 | .then(response => response.json()) 41 | .then(json => { 42 | const hero = json 43 | showHeroInfo(hero); 44 | }) 45 | } 46 | 47 | const getSearchSuperHero = (name) => { 48 | fetch(`${BASE_URL}/search/${name}`) 49 | .then(response => response.json()) 50 | .then(json => { 51 | const hero = json.results[0]; 52 | console.log(hero); 53 | showHeroInfo(hero); 54 | }) 55 | } 56 | 57 | 58 | const getRandom = () => Math.ceil(Math.random() * 731); 59 | 60 | getHero.onclick = () => getRandomSuperHero(getRandom()); 61 | 62 | searchButton.onclick = () => getSearchSuperHero(searchInput.value); 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /api/exercise/Super Hero API/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: cursive; 6 | font-size: 20px; 7 | } 8 | body { 9 | background-image: url(images/360_F_303367473_rTRc0Cux44BK2qyMLZhLzyzLT0t9J8Y0.jpg); 10 | background-position: center; 11 | background-repeat: no-repeat; 12 | background-attachment: fixed; 13 | background-size: cover; 14 | margin-bottom: 60px; 15 | } 16 | 17 | h2 { 18 | /* color: white; */ 19 | font-size: 35px; 20 | align-items: center; 21 | justify-content: center; 22 | } 23 | 24 | .container { 25 | margin: 20px; 26 | padding: 10px; 27 | display: flex; 28 | flex-direction: column; 29 | gap: 15px; 30 | align-items: center; 31 | justify-content: center; 32 | } 33 | 34 | .inputDiv { 35 | margin: 10px; 36 | padding: 5px; 37 | } 38 | 39 | #heroName { 40 | padding: 10px 30px; 41 | font-size: 20px; 42 | } 43 | .wrapper { 44 | display: flex; 45 | gap: 30px; 46 | } 47 | 48 | .btn { 49 | margin: 10px; 50 | padding: 10px 20px; 51 | font-size: 16px; 52 | color: white; 53 | background-image: linear-gradient(to right, #868f96 0%, #596164 100%); 54 | border: none; 55 | border-radius: 4px; 56 | } 57 | 58 | img { 59 | /* box-shadow: 20px 20px 50px 15px grey; */ 60 | border-radius: 10px; 61 | } 62 | 63 | .heroInfo { 64 | display: flex; 65 | gap: 30px; 66 | } 67 | 68 | .hero-stat { 69 | display: flex; 70 | flex-direction: column; 71 | gap: 30px; 72 | } 73 | -------------------------------------------------------------------------------- /api/solution/dogRandom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | replit 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /api/solution/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/solution/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 | -------------------------------------------------------------------------------- /api/solution/superHero/script.js: -------------------------------------------------------------------------------- 1 | // https://superheroapi.com/api/access-token/character-id 2 | 3 | const SUPERHERO_TOKEN = '837972860711403' 4 | const BASE_URL = `https://www.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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) -------------------------------------------------------------------------------- /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 | // Test you code by forking this repl: 2 | // 👉 3 | 4 | // Write a function that takes in an array and sort the numbers inside from least to greatest 5 | 6 | function sortArray(arr) { 7 | for (let i = 0; i < arr.length; i++) { 8 | for (let j = 0; j < arr.length; j++) { 9 | if (arr[j] > arr[j + 1]) { 10 | temp = arr[j]; 11 | arr[j] = arr[j + 1]; 12 | arr[j + 1] = temp; 13 | } 14 | } 15 | } 16 | } 17 | 18 | // let arr = [2, 5, 8, 3, 6, 9, 1, 4, 7]; 19 | // console.log(arr); 20 | // sortArray(arr); 21 | // console.log(arr); 22 | // BONUS sort the array without using .sort() 23 | -------------------------------------------------------------------------------- /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 | let min = hours * 60; 13 | let sec = min * 60; 14 | return sec; 15 | } 16 | 17 | // console.log(howManySeconds(10)); 18 | //Topics: Variables,functions, Math 19 | 20 | -------------------------------------------------------------------------------- /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 -------------------------------------------------------------------------------- /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 | let max = array[0]; 8 | for(const num of array){ 9 | if(num > max){ 10 | max = num; 11 | } 12 | } 13 | return max; 14 | } 15 | 16 | let array = [1,4,72,5,83,6,9]; 17 | console.log(findMax(array)); 18 | //Topics: loops, arrays, conditions, -------------------------------------------------------------------------------- /exercises/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Loop and Array Assignment 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /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 | let i = 0; 11 | let j = string.length -1 ; 12 | while(i < j){ 13 | if(string.charAt(i) != string.charAt(j)){ 14 | return false; 15 | } 16 | else{ 17 | i++; 18 | j--; 19 | } 20 | } 21 | return true; 22 | // Should return true IF it's a palindrome 23 | } 24 | 25 | let string = 'hellolleh'; 26 | console.log(isPalindrome(string)); 27 | 28 | //Topics: Strings, loops -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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(a, b) { 12 | return a + b; 13 | } 14 | 15 | function sub(a, b) { 16 | return a - b; 17 | } 18 | 19 | function div(a, b) { 20 | if(b==0){ 21 | console.log("cannot divide by 0") 22 | return; 23 | } 24 | return a / b; 25 | } 26 | 27 | function mul(a, b) { 28 | return a * b; 29 | } 30 | 31 | // ES6 version of functions 32 | 33 | const addArrow = (a, b) => a + b; 34 | 35 | 36 | const subArrow = (a, b) => a - b; 37 | 38 | 39 | const divArrow = (a, b) => a / b; 40 | 41 | 42 | const mulArrow = (a, b) => a * b; 43 | 44 | 45 | console.log('hello from the SUM exercise') 46 | /* 47 | TODO: create a function that console logs the result of any of the above operations. 48 | */ 49 | 50 | console.log(addArrow(20, 50)); 51 | console.log(subArrow(20, 50)); 52 | console.log(mulArrow(20, 50)); 53 | console.log(div(20, 0)); -------------------------------------------------------------------------------- /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 | 14 | 15 | JavaScript by CleverProgrammer 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 | -------------------------------------------------------------------------------- /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/AyushSoni86/JavaScript-Course-by-Clever-Programmer-/58c991495a98fd958ca6b2ea124645dd368f91bc/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/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 | -------------------------------------------------------------------------------- /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() -------------------------------------------------------------------------------- /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')) 396 | 397 | // DOG API 398 | // https://dog.ceo/api/breeds/image/random -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/fightingGame/exercise/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: 'red'; 3 | } 4 | 5 | #result { 6 | background:'blue'; 7 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/fightingGame/solution/sounds/fastheal.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyushSoni86/JavaScript-Course-by-Clever-Programmer-/58c991495a98fd958ca6b2ea124645dd368f91bc/projects/fightingGame/solution/sounds/fastheal.mp3 -------------------------------------------------------------------------------- /projects/fightingGame/solution/sounds/fastpunch.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyushSoni86/JavaScript-Course-by-Clever-Programmer-/58c991495a98fd958ca6b2ea124645dd368f91bc/projects/fightingGame/solution/sounds/fastpunch.mp3 -------------------------------------------------------------------------------- /projects/fightingGame/solution/sounds/quickheal.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyushSoni86/JavaScript-Course-by-Clever-Programmer-/58c991495a98fd958ca6b2ea124645dd368f91bc/projects/fightingGame/solution/sounds/quickheal.mp3 -------------------------------------------------------------------------------- /projects/fightingGame/solution/sounds/quickhit.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyushSoni86/JavaScript-Course-by-Clever-Programmer-/58c991495a98fd958ca6b2ea124645dd368f91bc/projects/fightingGame/solution/sounds/quickhit.mp3 -------------------------------------------------------------------------------- /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/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 | const totalScore = { computerScore: 0, playerScore: 0 }; 13 | // ** getComputerChoice randomly selects between `rock` `paper` `scissors` and returns that string ** 14 | // getComputerChoice() 👉 'Rock' 15 | // getComputerChoice() 👉 'Scissors' 16 | function getComputerChoice() { 17 | const choices = ['Rock', 'Paper', 'Scissors']; 18 | let rand = Math.floor(Math.random() * choices.length); 19 | return choices[rand]; 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 | let score; 29 | 30 | 31 | // All situations where human draws, set `score` to 0 32 | if (playerChoice == computerChoice) { 33 | score = 0; 34 | } 35 | 36 | // All situations where human wins, set `score` to 1 37 | // make sure to use else ifs here 38 | else if ((playerChoice == 'Rock' && computerChoice == 'Scissors') || 39 | (playerChoice == 'Paper' && computerChoice == 'Rock') || 40 | (playerChoice == 'Scissors' && computerChoice == 'Paper')) { 41 | score = 1; 42 | } 43 | 44 | // Otherwise human loses (aka set score to -1) 45 | else { 46 | score = -1; 47 | } 48 | 49 | // return score 50 | return score; 51 | } 52 | 53 | // ** 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** 54 | function showResult(score, playerChoice, computerChoice) { 55 | const resultDiv = document.getElementById('result'); 56 | const handsDiv = document.getElementById('hands'); 57 | const playerScoreDiv = document.getElementById('player-score'); 58 | // Hint: on a score of -1 59 | // You should do result.innerText = 'You Lose!' 60 | // Don't forget to grab the div with the 'result' id! 61 | if (score == -1) { 62 | resultDiv.innerText = '🏳️ You Lose ! 😭' 63 | } else if (score == 0) { 64 | resultDiv.innerText = "😅 It's a tie ! 😑" 65 | } else { 66 | resultDiv.innerText = '🙌🎯 You Won ! 🏆🥇' 67 | } 68 | 69 | handsDiv.innerText = `👱${playerChoice} vs 🤖${computerChoice}`; 70 | playerScoreDiv.innerText = `Your Score : ${totalScore['playerScore']} \n 71 | Computer Score :${totalScore['computerScore']}` 72 | 73 | } 74 | 75 | // ** Calculate who won and show it on the screen ** 76 | function onClickRPS(playerChoice) { 77 | const computerChoice = getComputerChoice(); 78 | const score = getResult(playerChoice, computerChoice); 79 | totalScore['playerScore'] += score; 80 | totalScore['computerScore'] -= score; 81 | showResult(score, playerChoice, computerChoice) 82 | } 83 | 84 | 85 | // ** Make the RPS buttons actively listen for a click and do something once a click is detected ** 86 | function playGame() { 87 | // use querySelector to select all RPS Buttons 88 | const rpsButtons = document.querySelectorAll('.rpsButton'); 89 | // * 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 * 90 | // 1. loop through the buttons using a forEach loop 91 | // 2. Add a 'click' event listener to each button 92 | // 3. Call the onClickRPS function every time someone clicks 93 | // 4. Make sure to pass the currently selected rps button as an argument 94 | rpsButtons.forEach(rpsButton => { 95 | rpsButton.onclick = () => onClickRPS(rpsButton.value); 96 | }) 97 | 98 | // Add a click listener to the end game button that runs the endGame() function on click 99 | 100 | const endGameButton = document.getElementById('endGameButton'); 101 | endGameButton.onclick = () => endGame(); 102 | 103 | } 104 | 105 | // ** endGame function clears all the text on the DOM ** 106 | function endGame() { 107 | totalScore['playerScore'] = 0; 108 | totalScore['computerScore'] = 0; 109 | 110 | const resultDiv = document.getElementById('result'); 111 | const handsDiv = document.getElementById('hands'); 112 | const playerScoreDiv = document.getElementById('player-score'); 113 | 114 | resultDiv.innerText = ''; 115 | handsDiv.innerText = ''; 116 | playerScoreDiv.innerText = '' 117 | } 118 | 119 | 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 | 20 |
21 |
Bill total
22 |
23 | $ 24 | 30 |
31 |
32 | 33 |
34 |
Tip
35 |
36 | % 37 | 43 |
44 |
45 | 46 |
47 |
48 |
People
49 |
50 | 51 | 54 | 55 | 1 56 | 57 | 60 | 61 |
62 |
63 |
64 |
Total per Person
65 |
$0.00
66 |
67 |
68 | 69 |
70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /projects/tip-calculator/exercise/script.js: -------------------------------------------------------------------------------- 1 | // 🌟 APP: Tip Calculator 2 | 3 | const billInput = document.getElementById('billTotalInput'); 4 | const tipInputDiv = document.getElementById('tipInput'); 5 | const numberOfPeopleDiv = document.getElementById('numberOfPeople'); 6 | const perPersonTotalDiv = document.getElementById('perPersonTotal'); 7 | 8 | let people = Number(numberOfPeopleDiv.innerText); 9 | 10 | const calculateBill = () => { 11 | const bill = Number(billInput.value); 12 | const tipPercentage = Number(tipInputDiv.value) / 100; 13 | const tip = bill * tipPercentage; 14 | const totalBill = bill + tip; 15 | const perPersonAmount = totalBill / people; 16 | perPersonTotalDiv.innerText = `$${perPersonAmount.toFixed(2)}`; 17 | } 18 | 19 | const increasePeople = () => { 20 | people += 1; 21 | numberOfPeopleDiv.innerText = people 22 | calculateBill() 23 | } 24 | 25 | const decreasePeople = () => { 26 | if (people <= 1) return 27 | people -= 1; 28 | calculateBill() 29 | numberOfPeopleDiv.innerText = people 30 | } -------------------------------------------------------------------------------- /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-size: 20px; 30 | font-weight: bold; 31 | margin-bottom: 0.6rem; 32 | } 33 | 34 | .inputContainer { 35 | background: #353959; 36 | border-radius: 1.4rem; 37 | padding: 0 0.8rem; 38 | display: flex; 39 | align-items: center; 40 | } 41 | 42 | #billTotalInput, 43 | #tipInput { 44 | font-size: 1.2rem; 45 | background: none; 46 | border: none; 47 | outline: none; 48 | padding: 10px; 49 | } 50 | 51 | .buttonContainer { 52 | background: #8990ec; 53 | display: grid; 54 | place-items: center; 55 | width: 1.6rem; 56 | height: 1.6rem; 57 | border-radius: 50%; 58 | } 59 | 60 | .splitButton { 61 | background: none; 62 | border: none; 63 | } 64 | 65 | .controls { 66 | display: flex; 67 | align-items: center; 68 | } 69 | 70 | .splitButton { 71 | font-size: 0.8rem; 72 | font-weight: bold; 73 | display: grid; 74 | place-items: center; 75 | } 76 | 77 | .buttonText { 78 | color: #353959 !important; 79 | } 80 | 81 | .splitAmount { 82 | font-size: 1.6rem; 83 | margin: 0.8rem; 84 | } 85 | 86 | #bottom { 87 | display: flex; 88 | justify-content: space-between; 89 | } 90 | 91 | .totalContainer { 92 | display: flex; 93 | flex-direction: column; 94 | align-items: end; 95 | } 96 | 97 | .total { 98 | font-size: 2rem; 99 | } 100 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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/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/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/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 | } -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-family: 'Inter', sans-serif; 3 | font-family: 'Lato', sans-serif; 4 | } -------------------------------------------------------------------------------- /yourPlayground.js: -------------------------------------------------------------------------------- 1 | 2 | // user input 3 | // fruit = prompt("what is your favourite fruit ?"); 4 | // console.log(fruit); 5 | 6 | // console.log(Math.floor(Math.random() * 30)); 7 | 8 | // Automatic tip calculator 9 | function tipCalculate() { 10 | food = prompt("How much was the food ?"); 11 | tipPercentage = prompt("Tip %") / 100; 12 | tipAmount = food * tipPercentage; 13 | alert("The tip amount is " + tipAmount); 14 | 15 | console.log("The total amount is ", Number(tipAmount) + Number(food)); 16 | } 17 | 18 | // simple wheater practice code 19 | function wheatherApp() { 20 | let wheather = prompt("What is the weather ?"); 21 | if (wheather == "rain") { 22 | console.log("Grab your umbrella"); 23 | } else { 24 | console.log("Wear your sunglasses"); 25 | } 26 | } 27 | 28 | // this function prints my name 29 | function greeting(name) { 30 | console.log(`Hey ${name}, how are you?`); 31 | } 32 | // greeting("Ayush") 33 | 34 | function sum(a, b) { 35 | return a + b; 36 | } 37 | // Basic tip calculator 38 | function tipCalculator(food, tip) { 39 | const tipPercentage = tip / 100; 40 | const tipAmount = tipPercentage * food; 41 | const total = sum(tipAmount, food); 42 | return total; 43 | } 44 | const tipCalculatorArrow = (food, tip) => { 45 | const tipPercentage = tip / 100; 46 | const tipAmount = tipPercentage * food; 47 | const total = sum(tipAmount, food); 48 | return total; 49 | }; 50 | // console.log("The total amount pof food is ", tipCalculatorArrow(10000, 5)); 51 | 52 | // Arrow functions 53 | const sumArrow = (a, b) => { 54 | return a + b; 55 | }; 56 | 57 | // Arrays 58 | 59 | // let groceries= ['apple', 'banana', 'pear', 'orange','berry']; 60 | // console.log(groceries); 61 | // groceries.push("pineapple"); 62 | // console.log(groceries) 63 | // console.log(groceries.length); 64 | // slicedArray = groceries.slice(1,3); 65 | // console.log(slicedArray); 66 | 67 | // Objects 68 | // dot notation and bracket notation in objects 69 | const person = { 70 | name: "Ayush", 71 | shirt: "black", 72 | email: "ayusoni86@gmail.com", 73 | }; 74 | person.phone = "9588422464"; 75 | 76 | // console.log(person.name) 77 | // console.log(person.shirt) 78 | // console.log(person.email) 79 | 80 | // console.log(person['name']) 81 | // console.log(person['shirt']) 82 | // console.log(person['email']) 83 | 84 | // console.log(person) 85 | 86 | const introducer = (name, shirt, mobile) => { 87 | const person = { 88 | name: name, 89 | shirt: shirt, 90 | mobile: mobile, 91 | assets: 100000, 92 | liability: 50000, 93 | networth: function () { 94 | return this.assets - this.liability; 95 | }, 96 | }; 97 | return `Hi my name is ${person.name} and the color of my shirt is ${person.shirt} 98 | and I have ${person.mobile} and my nte worth is ${person.networth()} USD `; 99 | }; 100 | // console.log(introducer("Ayush", "Blue", "iPhone 13")); 101 | 102 | // for loop in javascript 103 | const fruits = [ 104 | "apple", 105 | "banana", 106 | "pear", 107 | "orange", 108 | "berry", 109 | "banana", 110 | "pear", 111 | "orange", 112 | "berry", 113 | "banana", 114 | "pear", 115 | "orange", 116 | "berry", 117 | "banana", 118 | "pear", 119 | "orange", 120 | "berry", 121 | ]; 122 | 123 | // for (let index = 0; index < fruits.length; index++) { 124 | // console.log(index , fruits[index]); 125 | // } 126 | 127 | // for (const fruit of fruits) { 128 | // console.log(fruit); 129 | // } 130 | 131 | const number = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 132 | // for (let i = 0; i < number.length; i++) { 133 | // console.log(number[i]); 134 | // } 135 | // for (nums of number){ 136 | // console.log(nums); 137 | // } 138 | 139 | // let res = []; 140 | // for (const nums of number) { 141 | // res.push(nums * 2); 142 | // } 143 | // console.log(res); 144 | 145 | // function to double the array elements 146 | const double = (number) => { 147 | let res = []; 148 | for (nums of number) { 149 | res.push(nums * 2); 150 | } 151 | return res; 152 | }; 153 | 154 | // console.log(double([1,2,3,4,5,8,9])); 155 | // function to square the array elements 156 | const square = (number) => { 157 | let result = []; 158 | for (const num of number) { 159 | result.push(num * num); 160 | } 161 | return result; 162 | }; 163 | 164 | // console.log(square([2,3,4,5,6])); 165 | 166 | //letter counter using loops 167 | const letterCounter = () => { 168 | const phrase = "hey, can you come to grocery store with me"; 169 | let cnt = 0; 170 | for (letter in phrase) { 171 | cnt++; 172 | } 173 | return cnt; 174 | }; 175 | // console.log(letterCounter()); 176 | 177 | // sum of array elements 178 | const sumArray = (number) => { 179 | let res = 0; 180 | for (const num of number) { 181 | res = res + num; 182 | } 183 | return res; 184 | }; 185 | const num = [10, 2, 3, 4]; 186 | // console.log(sumArray(num)); 187 | 188 | // finding max element from array 189 | const maxElement = (number) => { 190 | max = number[0]; 191 | for (const num of number) { 192 | if (num > max) { 193 | max = num; 194 | } 195 | } 196 | return max; 197 | }; 198 | // console.log(maxElement(num)); 199 | 200 | 201 | //continuing the loops questions 202 | // letter frequency calculator 203 | const letterFrequency = (phrase) => { 204 | let frequency = {}; 205 | // console.log(phrase); 206 | for (const letter of phrase) { 207 | if (letter in frequency) { 208 | frequency[letter] += 1; 209 | } else { 210 | frequency[letter] = 1; 211 | } 212 | } 213 | return frequency; 214 | } 215 | // console.log(letterFrequency(phrase)); 216 | 217 | // word frequency calculator 218 | const wordFrequency = (phrase) => { 219 | let frequency = {}; 220 | words = phrase.split(' '); 221 | // console.log(words); 222 | for (const word of words) { 223 | if (word in frequency) { 224 | frequency[word] += 1; 225 | } else { 226 | frequency[word] = 1; 227 | } 228 | } 229 | return frequency; 230 | } 231 | 232 | // words frequency using pre created function 233 | const wordFrequency2 = (phrase) => { 234 | words = phrase.split(' '); 235 | return letterFrequency(words); 236 | } 237 | 238 | // let phrase = 'hello world hello hey there hey hello'; 239 | // phrase= prompt('Write your sentecne : '); 240 | // console.log(wordFrequency2(phrase)); 241 | 242 | 243 | // higher order functions 244 | // map, reduce and filter 245 | 246 | // map 247 | let array = [1, 2, 3, 4, 5, 6]; 248 | array.map(number => { 249 | number = number * 2; 250 | // console.log(number) 251 | }); 252 | 253 | let array2 = [1, 2, 3, 4, 5, 6].map(number => 254 | number = number * 2 255 | ); 256 | 257 | // console.log(array); 258 | // console.log(array2); 259 | 260 | const doubleMap = (number) => { 261 | return number.map(number => number * 2); 262 | } 263 | // console.log(doubleMap([1, 2, 3, 4, 5, 6])); 264 | 265 | // filter 266 | const filter = (number, gt) => { 267 | let result = []; 268 | for (const num of number) { 269 | if (num > gt) { 270 | result.push(num); 271 | } 272 | } 273 | return result; 274 | } 275 | const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 276 | // console.log(arr.filter(num => num >= 3 && num < 7)); 277 | 278 | const actor = [ 279 | { name: 'Vaibhavi', networth: 12 }, 280 | { name: 'Kshitij', networth: 150 }, 281 | { name: 'Amardeep', networth: 32 }, 282 | { name: 'Ayush', networth: 999 }, 283 | { name: 'Abhishek', networth: 21 }, 284 | ]; 285 | 286 | let result = actor.filter(actor => actor.networth > 12); 287 | // console.log(result); 288 | 289 | // this line creates an array of names from the actor object and join them by using join method 290 | let names = result.map(actor => actor.name).join(', '); 291 | 292 | // playground.innerHTML = `

${result[0].name}

`; 293 | // playground.innerHTML = `

${names}

`; 294 | 295 | 296 | // reduce 297 | 298 | 299 | 300 | 301 | --------------------------------------------------------------------------------