├── .gitignore ├── Challenges ├── JavaScript in the Browser DOM and Events │ ├── .prettierrc │ ├── index.html │ ├── style.css │ └── script.js ├── Pig Game │ ├── images │ │ ├── dice-1.png │ │ ├── dice-2.png │ │ ├── dice-3.png │ │ ├── dice-4.png │ │ ├── dice-5.png │ │ ├── dice-6.png │ │ └── pig-game-flowchart.png │ ├── index.html │ ├── script.js │ └── style.css ├── Javascript fundamentals - part 2 │ ├── index.html │ └── script.js ├── Javascript fundamentals - part 1 │ ├── index.html │ └── script.js ├── Developer Skills & Editor │ ├── index.html │ └── script.js └── Modal Window │ ├── index.html │ ├── script.js │ └── style.css ├── Javascript fundamentals - part 2 ├── index.html └── script.js ├── Javascript fundamentals - part 1 ├── index.html └── script.js └── Class practice ├── index.html └── app.js /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode -------------------------------------------------------------------------------- /Challenges/JavaScript in the Browser DOM and Events/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "arrowParens": "avoid" 4 | } -------------------------------------------------------------------------------- /Challenges/Pig Game/images/dice-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/codewithsadee-The-complete-javascript-course-sourceCode/HEAD/Challenges/Pig Game/images/dice-1.png -------------------------------------------------------------------------------- /Challenges/Pig Game/images/dice-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/codewithsadee-The-complete-javascript-course-sourceCode/HEAD/Challenges/Pig Game/images/dice-2.png -------------------------------------------------------------------------------- /Challenges/Pig Game/images/dice-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/codewithsadee-The-complete-javascript-course-sourceCode/HEAD/Challenges/Pig Game/images/dice-3.png -------------------------------------------------------------------------------- /Challenges/Pig Game/images/dice-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/codewithsadee-The-complete-javascript-course-sourceCode/HEAD/Challenges/Pig Game/images/dice-4.png -------------------------------------------------------------------------------- /Challenges/Pig Game/images/dice-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/codewithsadee-The-complete-javascript-course-sourceCode/HEAD/Challenges/Pig Game/images/dice-5.png -------------------------------------------------------------------------------- /Challenges/Pig Game/images/dice-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/codewithsadee-The-complete-javascript-course-sourceCode/HEAD/Challenges/Pig Game/images/dice-6.png -------------------------------------------------------------------------------- /Challenges/Pig Game/images/pig-game-flowchart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/codewithsadee-The-complete-javascript-course-sourceCode/HEAD/Challenges/Pig Game/images/pig-game-flowchart.png -------------------------------------------------------------------------------- /Challenges/Javascript fundamentals - part 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Javascript fundamentals - part 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Challenges/Javascript fundamentals - part 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Challenges 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Javascript fundamentals - part 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Fundamentals-part 1 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Challenges/Developer Skills & Editor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Developer Skills & Editor Setup 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Challenges/Developer Skills & Editor/script.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | /* 4 | Given an array of forecasted maximum temperatures, the thermometer displays a 5 | string with the given temperatures. Example: [17, 21, 23] will print "... 17ºC in 1 6 | days ... 21ºC in 2 days ... 23ºC in 3 days ..." 7 | 8 | Your tasks: 9 | 1. Create a function 'printForecast' which takes in an array 'arr' and logs a 10 | string like the above to the console. Try it with both test datasets. 11 | 2. Use the problem-solving framework: Understand the problem and break it up 12 | into sub-problems! 13 | 14 | Test data: 15 | Data 1: [17, 21, 23] 16 | Data 2: [12, 5, -5, 0, 4] 17 | */ 18 | 19 | const testData = [ 12, 5, -5, 0, 4 ]; 20 | const printForecast = function (arr) { 21 | let str = '...'; 22 | for (let i = 0; i < arr.length; i++) { 23 | if (typeof arr[i] !== 'number') continue; 24 | str += ` ${arr[i]}ºC in ${i + 1} days ... `; 25 | } 26 | // console.log(str); 27 | return str; 28 | } 29 | const temperatures = printForecast(testData); 30 | console.log(temperatures); 31 | -------------------------------------------------------------------------------- /Challenges/JavaScript in the Browser DOM and Events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Guess My Number! 10 | 11 | 12 | 13 |
14 |

Guess My Number!

15 |

(Between 1 and 20)

16 | 17 |
?
18 |
19 |
20 |
21 | 22 | 23 |
24 |
25 |

Start guessing...

26 |

💯 Score: 20

27 |

28 | 🥇 Highscore: 0 29 |

30 |
31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Class practice/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 41 | 42 | 43 | 44 | 45 |
HEX: #FFFFFF
46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /Challenges/Modal Window/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Modal window 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Challenges/Modal Window/script.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | /* 3 | Understanding the problem 4 | What i am to doing? 5 | --> creat a modal window for 3 buttons 6 | 7 | Where will the modal window be? 8 | --> Center of the web page 9 | How will close modal window? 10 | --> 1st click on the close button 11 | --> 2nd click on the outside of modal window 12 | --> 3rd press on the escape key 13 | 14 | Breaking into the sub problem 15 | defined all elements 16 | diclare a loop to add multiple event handler 17 | */ 18 | 19 | 20 | const modalBtn = document.querySelectorAll('.show-modal'), 21 | hidden = document.querySelector('.hidden'), 22 | closeModal = document.querySelector('.close-modal'), 23 | modal = document.querySelector('.modal'), 24 | overLay = document.querySelector('.overlay'), 25 | container = document.querySelector('.container'); 26 | const hiddenArr = [modal, overLay]; 27 | 28 | const modalOpen = () => { 29 | for (let y = 0; y < hiddenArr.length; y++) 30 | hiddenArr[y].classList.remove('hidden'); 31 | } 32 | const modalClose = function () { 33 | modal.classList.add('hidden'); 34 | overLay.classList.add('hidden'); 35 | } 36 | for (let i = 0; i < modalBtn.length; i++) { 37 | modalBtn[i].addEventListener('click', modalOpen); 38 | } 39 | overLay.addEventListener('click', modalClose); 40 | closeModal.addEventListener('click', modalClose); 41 | 42 | document.addEventListener('keydown', function (e) { 43 | if (e.key === 'Escape' && !modal.classList.contains('hidden')) modalClose(); 44 | }); -------------------------------------------------------------------------------- /Challenges/Modal Window/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: inherit; 5 | } 6 | 7 | html { 8 | font-size: 62.5%; 9 | box-sizing: border-box; 10 | } 11 | 12 | body { 13 | font-family: sans-serif; 14 | color: #333; 15 | line-height: 1.5; 16 | height: 100vh; 17 | position: relative; 18 | display: flex; 19 | align-items: flex-start; 20 | justify-content: center; 21 | background: linear-gradient(to top left, #28b487, #7dd56f); 22 | } 23 | 24 | .show-modal { 25 | font-size: 2rem; 26 | font-weight: 600; 27 | padding: 1.75rem 3.5rem; 28 | margin: 5rem 2rem; 29 | border: none; 30 | background-color: #fff; 31 | color: #444; 32 | border-radius: 10rem; 33 | cursor: pointer; 34 | } 35 | 36 | .close-modal { 37 | position: absolute; 38 | top: 1.2rem; 39 | right: 2rem; 40 | font-size: 5rem; 41 | color: #333; 42 | cursor: pointer; 43 | border: none; 44 | background: none; 45 | } 46 | 47 | h1 { 48 | font-size: 2.5rem; 49 | margin-bottom: 2rem; 50 | } 51 | 52 | p { 53 | font-size: 1.8rem; 54 | } 55 | 56 | /* -------------------------- */ 57 | /* CLASSES TO MAKE MODAL WORK */ 58 | .hidden { 59 | display: none; 60 | } 61 | 62 | .modal { 63 | position: absolute; 64 | top: 50%; 65 | left: 50%; 66 | transform: translate(-50%, -50%); 67 | width: 70%; 68 | 69 | background-color: white; 70 | padding: 6rem; 71 | border-radius: 5px; 72 | box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3); 73 | z-index: 100; 74 | } 75 | 76 | .overlay { 77 | position: absolute; 78 | top: 0; 79 | left: 0; 80 | width: 100%; 81 | height: 100%; 82 | background-color: rgba(0, 0, 0, 0.6); 83 | backdrop-filter: blur(3px); 84 | z-index: 5; 85 | } -------------------------------------------------------------------------------- /Challenges/Pig Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pig Game 10 | 11 | 12 | 13 |
14 |
15 |
16 |

Player 1

17 |

0

18 |
19 |

Current

20 |

0

21 |
22 |
23 |
24 |

Player 2

25 |

0

26 |
27 |

Current

28 |

0

29 |
30 |
31 | 32 | 33 |
🔄 New game
34 |
🎲 Roll dice
35 |
📥 Hold
36 |
37 | 38 |
39 |

Keyboard Shorcut

40 |
41 | Space - Roll dice 42 |
43 |
44 | Enter - Hold score 45 |
46 |
47 | Ctrl + Enter - New game 48 |
49 |
50 | 51 |
52 |

Player Name

53 | 56 | 57 | 60 | 61 | 62 |
63 |
Cancel
64 |
Confirm
65 |
66 |
67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /Challenges/JavaScript in the Browser DOM and Events/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: inherit; 7 | } 8 | 9 | html { 10 | font-size: 62.5%; 11 | box-sizing: border-box; 12 | } 13 | 14 | body { 15 | font-family: 'Press Start 2P', sans-serif; 16 | color: #eee; 17 | background-color: #222; 18 | /* background-color: #60b347; */ 19 | } 20 | 21 | /* LAYOUT */ 22 | header { 23 | position: relative; 24 | height: 35vh; 25 | border-bottom: 7px solid #eee; 26 | } 27 | 28 | main { 29 | height: 65vh; 30 | color: #eee; 31 | display: flex; 32 | align-items: center; 33 | justify-content: space-around; 34 | } 35 | 36 | .left { 37 | width: 52rem; 38 | display: flex; 39 | flex-direction: column; 40 | align-items: center; 41 | } 42 | 43 | .right { 44 | width: 52rem; 45 | font-size: 2rem; 46 | } 47 | 48 | /* ELEMENTS STYLE */ 49 | h1 { 50 | font-size: 4rem; 51 | text-align: center; 52 | position: absolute; 53 | width: 100%; 54 | top: 52%; 55 | left: 50%; 56 | transform: translate(-50%, -50%); 57 | } 58 | 59 | .number { 60 | background: #eee; 61 | color: #333; 62 | font-size: 6rem; 63 | width: 15rem; 64 | padding: 3rem 0rem; 65 | text-align: center; 66 | position: absolute; 67 | bottom: 0; 68 | left: 50%; 69 | transform: translate(-50%, 50%); 70 | } 71 | 72 | .between { 73 | font-size: 1.4rem; 74 | position: absolute; 75 | top: 2rem; 76 | right: 2rem; 77 | } 78 | 79 | .again { 80 | position: absolute; 81 | top: 2rem; 82 | left: 2rem; 83 | } 84 | 85 | .guess { 86 | background: none; 87 | border: 4px solid #eee; 88 | font-family: inherit; 89 | color: inherit; 90 | font-size: 5rem; 91 | padding: 2.5rem; 92 | width: 25rem; 93 | text-align: center; 94 | display: block; 95 | margin-bottom: 3rem; 96 | } 97 | 98 | .btn { 99 | border: none; 100 | background-color: #eee; 101 | color: #222; 102 | font-size: 2rem; 103 | font-family: inherit; 104 | padding: 2rem 3rem; 105 | cursor: pointer; 106 | } 107 | 108 | .btn:hover { 109 | background-color: #ccc; 110 | } 111 | 112 | .message { 113 | margin-bottom: 8rem; 114 | height: 3rem; 115 | } 116 | 117 | .label-score { 118 | margin-bottom: 2rem; 119 | } -------------------------------------------------------------------------------- /Challenges/Javascript fundamentals - part 1/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | //------------------------- conding challenge #1------------------------------- 3 | // ---------------------------------------------------------------------------- 4 | 5 | const markMass = 78; 6 | const markHeight = 1.69; 7 | const johnMass = 92; 8 | const johnHeight = 1.95; 9 | 10 | const markBMI = markMass / markHeight ** 2; 11 | const johnBMI = johnMass / johnHeight ** 2; 12 | console.log(markBMI, johnBMI); 13 | 14 | const markHigherBMI = markBMI > johnBMI; 15 | console.log(markHigherBMI); 16 | 17 | // ---------------------------------------------------------------------------- 18 | 19 | 20 | //------------------------- conding challenge #2------------------------------- 21 | // ---------------------------------------------------------------------------- 22 | 23 | const markMass = 78; 24 | const markHeight = 1.69; 25 | const johnMass = 92; 26 | const johnHeight = 1.95; 27 | 28 | const markBMI = markMass / markHeight ** 2; 29 | const johnBMI = johnMass / johnHeight ** 2; 30 | 31 | const isMarkHigherBMI = markBMI > johnBMI; 32 | 33 | if (isMarkHigherBMI) { 34 | console.log(`Mark's BMI (${markBMI}) is higher than John's (${johnBMI})!`); 35 | } else { 36 | console.log(`John's BMI (${johnBMI}) is higher than Mark's (${markBMI})!`); 37 | } 38 | 39 | // ---------------------------------------------------------------------------- 40 | 41 | 42 | 43 | //------------------------- conding challenge #3------------------------------- 44 | // ---------------------------------------------------------------------------- 45 | 46 | const dolphinsAverage = (96 + 108 + 89) / 2; 47 | const koalasAverage = (88 + 91 + 110) / 2; 48 | if (dolphinsAverage > koalasAverage) { 49 | console.log(`Dolphin is winner🏆. Score: ${dolphinsAverage}`); 50 | } else if (dolphinsAverage < koalasAverage) { 51 | console.log(`Koalas is winner🏆. Score: ${koalasAverage}`); 52 | } else { 53 | console.log(`Match is drow.`); 54 | } 55 | 56 | //------> Bonus #1 57 | 58 | const dolphinsAverage = (97 + 112 + 101) / 2; 59 | const koalasAverage = (109 + 95 + 123) / 2; 60 | const minScore = 100; 61 | if (dolphinsAverage > koalasAverage && dolphinsAverage >= minScore) { 62 | console.log(`Dolphin is winner🏆. Score: ${dolphinsAverage}`); 63 | } else if (koalasAverage > dolphinsAverage && koalasAverage >= minScore) { 64 | console.log(`Koalas is winner🏆. Score: ${koalasAverage}`); 65 | } else { 66 | console.log(`Match is Draw`); 67 | } 68 | 69 | //------> Bonus #2 70 | 71 | const dolphinsAverage = (97 + 112 + 101) / 2; 72 | const koalasAverage = (109 + 95 + 106) / 2; 73 | const minScore = 100; 74 | if (dolphinsAverage === koalasAverage && dolphinsAverage >= minScore && koalasAverage >= minScore) { 75 | console.log(`Math is draw. 76 | Dolphins Score: ${dolphinsAverage} 77 | Koalas Score: ${koalasAverage}`); 78 | } else { 79 | console.log(`No winners! 🙁`); 80 | } 81 | 82 | // ---------------------------------------------------------------------------- 83 | 84 | */ 85 | 86 | //------------------------- conding challenge #3------------------------------- 87 | // ---------------------------------------------------------------------------- 88 | 89 | const bill = 275; 90 | const tip = bill * (bill > 50 && bill < 300 ? 15 : 20) / 100; 91 | console.log(`The bill was ${bill} 💰 & tip is ${tip} 💴`); 92 | 93 | 94 | // ---------------------------------------------------------------------------- 95 | -------------------------------------------------------------------------------- /Challenges/JavaScript in the Browser DOM and Events/script.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | /* 3 | Understanding the problem 4 | 5 | 1 +Get a number from user 6 | 2 +Compare the number with machine number 7 | 3 +Give an output besed on user input 8 | 9 | 10 | Breaking into the sub problem 11 | 12 | Get a number from user: 13 | +select input element 14 | +collect the value 15 | 16 | Compare the number with machine number: 17 | 18 | +create the machine number between 1 to 20 19 | +store in a variable 20 | -create a condition to check user input 21 | |check equality 22 | |check greater than 23 | |check less than 24 | |check falsy value 25 | 26 | Give an output based on user input: 27 | 28 | -condition is falsy: 29 | |print '⛔️ No number' 30 | 31 | -condition is truthy: 32 | -condition is equal: 33 | |print '🎉 Correct number' in messageBox 34 | |change body background color 'green' 35 | |show machine number in hiddenNumberBox 36 | |change hiddenNumberBox size to '30rem' 37 | |if score is greater than highscore, print highscore value 38 | 39 | -condition is not equal: 40 | |decrease score by 1 41 | | -condition is greater than: 42 | |print '📈 Too high!' in messageBox 43 | | -condition is less than: 44 | |print '📉 Too low!' in messageBox 45 | | -if score is 0: 46 | |print '💥 You lose the game' 47 | 48 | 49 | 50 | */ 51 | 52 | let 53 | againBtn = document.querySelector('.again'), 54 | userNumber = document.querySelector('.guess'), 55 | checkBtn = document.querySelector('.check'), 56 | hiddenNumberBox = document.querySelector('.number'), 57 | messageBox = document.querySelector('.message'), 58 | scoreBox = document.querySelector('.score'), 59 | highScoreBox = document.querySelector('.highscore'), 60 | hiddenNumber = Math.trunc(Math.random() * 20) + 1, 61 | score = Number(scoreBox.textContent); 62 | 63 | // When check button is clicked 64 | checkBtn.addEventListener('click', function () { 65 | const collectedUserNumber = Number(userNumber.value); 66 | const message = displayMessage(collectedUserNumber, hiddenNumber); 67 | messageBox.textContent = message; 68 | }); 69 | 70 | const displayMessage = function (userNumber, hiddenNumber) { 71 | // When there will be no number 72 | if (!userNumber) { 73 | return '⛔️ No number'; 74 | // When win 75 | } else if (userNumber === hiddenNumber) { 76 | winCelebration(); 77 | highScoreBox.textContent = isHighscore(score); 78 | checkBtn.setAttribute('disabled', ''); 79 | return '🎉 Correct number'; 80 | } else { 81 | scoreBox.textContent = --score; 82 | // When lose 83 | if (score === 0) { 84 | checkBtn.setAttribute('disabled', ''); 85 | hiddenNumberBox.textContent = '😈'; 86 | document.body.style.backgroundColor = '#b34747'; 87 | return '💥 You lose the game'; 88 | } 89 | return userNumber > hiddenNumber ? '📈 Too high!' : '📉 Too low!'; 90 | } 91 | } 92 | const winCelebration = function () { 93 | document.body.style.backgroundColor = '#60b347'; 94 | hiddenNumberBox.textContent = hiddenNumber; 95 | hiddenNumberBox.style.width = '30rem'; 96 | } 97 | const isHighscore = function (score) { 98 | if (score > highScoreBox.textContent) return score; 99 | } 100 | 101 | // Game restart event 102 | againBtn.addEventListener('click', function () { 103 | hiddenNumber = Math.trunc(Math.random() * 20) + 1; 104 | document.body.style.backgroundColor = '#222222'; 105 | hiddenNumberBox.textContent = '?'; 106 | hiddenNumberBox.style.width = '15rem'; 107 | scoreBox.textContent = score = 20; 108 | messageBox.textContent = 'Start guessing...'; 109 | checkBtn.removeAttribute('disabled'); 110 | userNumber.value = ''; 111 | }); -------------------------------------------------------------------------------- /Challenges/Javascript fundamentals - part 2/script.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | //---------------------------------Chellage #1--------------------------------- 3 | //----------------------------------------------------------------------------- 4 | /* 5 | const calcAverage = (a, b, c) => (a + b + c) / 3; 6 | //test data 1 7 | const dolphinsScore1 = calcAverage(44, 23, 71); 8 | const koalasScore1 = calcAverage(65, 54, 49); 9 | 10 | //test data 2 11 | const dolphinsScore2 = calcAverage(85, 54, 41); 12 | const koalasScore2 = calcAverage(23, 34, 27); 13 | 14 | const checkWinner = function (avgDolphins, avgKoalas) { 15 | if ( avgDolphins >= 2 * avgKoalas) { 16 | console.log(`Dolphins win 🏆 (${avgDolphins} vs. ${avgKoalas})`); 17 | } else if ( avgKoalas >= 2 * avgDolphins) { 18 | console.log(`Koalas win 🏆 (${avgKoalas} vs. ${avgDolphins})`); 19 | } else { 20 | console.log(`No Winner....`); 21 | } 22 | } 23 | 24 | checkWinner(dolphinsScore1, koalasScore1); 25 | checkWinner(dolphinsScore2, koalasScore2); 26 | 27 | //----------------------------------------------------------------------------- 28 | 29 | 30 | //---------------------------------Chellage #2--------------------------------- 31 | //----------------------------------------------------------------------------- 32 | 33 | const calcTip = function(bill) { 34 | return bill * (bill >=50 && bill <= 300 ? 15: 20) / 100; 35 | } 36 | 37 | const bills = [125, 555, 44]; 38 | console.log(bills); 39 | const tips = [calcTip(bills[0]), calcTip(bills[1]), calcTip(bills[bills.length -1])]; 40 | console.log(tips); 41 | 42 | const total = [bills[0]+tips[0], bills[1]+tips[1],bills[2]+tips[2]]; 43 | console.log(total); 44 | 45 | //----------------------------------------------------------------------------- 46 | 47 | 48 | //---------------------------------Chellage #3--------------------------------- 49 | //----------------------------------------------------------------------------- 50 | 51 | const mark = { 52 | fullName: `Mark Miller`, 53 | mess: 78, 54 | height:1.69, 55 | calcBMI: function(){ 56 | return this.BMI = this.mess / this.height ** 2; 57 | } 58 | } 59 | 60 | const john = { 61 | fullName: `John Smith`, 62 | mess: 92, 63 | height:1.95, 64 | calcBMI: function(){ 65 | return this.BMI = this.mess / this.height ** 2; 66 | } 67 | } 68 | if (mark.calcBMI() > john.calcBMI()){ 69 | console.log(`${mark.fullName}'s BMI (${mark.calcBMI()}) is heigher than ${john.fullName}s (${john.calcBMI()})`); 70 | } else { 71 | console.log(`${john.fullName}'s BMI (${john.calcBMI()}) is heigher than ${mark.fullName}'s (${mark.calcBMI()})`); 72 | } 73 | 74 | //----------------------------------------------------------------------------- 75 | */ 76 | 77 | 78 | //---------------------------------Chellage #4--------------------------------- 79 | //----------------------------------------------------------------------------- 80 | 81 | const bills = [22, 295, 176, 440, 37, 105, 10, 1100, 86, 52]; 82 | const tips = []; 83 | const totals = []; 84 | 85 | const calcTip = function (bill) { 86 | for (let x = 0; x < bill.length; x++) { 87 | let tip = bill[x] * (bill[x] >= 50 && bill[x] <= 300 ? 15 : 20) / 100; 88 | tips.push(tip); 89 | 90 | totals.push(bill[x] + tip); 91 | } 92 | } 93 | calcTip(bills); 94 | console.log(tips) 95 | console.log(totals); 96 | 97 | //----Bonus Chellange---- 98 | 99 | const calcAverage = function (arr) { 100 | let sum = 0; 101 | for (let i = 0; i < arr.length; i++) { 102 | sum += arr[i]; 103 | } 104 | return sum / arr.length; 105 | } 106 | let billAverage = calcAverage(totals); 107 | console.log(billAverage); 108 | //----------------------------------------------------------------------------- -------------------------------------------------------------------------------- /Challenges/Pig Game/script.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const rollDiceBtn = document.querySelector('.btn--roll'); 4 | const newGameBtn = document.querySelector('.btn--new'); 5 | const holdBtn = document.querySelector('.btn--hold'); 6 | const diceImg = document.querySelector('.dice'); 7 | const scoreElems = document.querySelectorAll('.score'); 8 | const players = document.querySelectorAll('.player'); 9 | const currentScoreElems = document.querySelectorAll('.current-score'); 10 | 11 | const playerNameElems = document.querySelectorAll('.name'); 12 | const setNameInput = document.querySelectorAll('.player-name'); 13 | const cancelBtn = document.querySelector('.cancel'); 14 | const confirmBtn = document.querySelector('.confirm'); 15 | const overlay = document.querySelector('.overlay'); 16 | const setNameElem = document.querySelector('.set-name'); 17 | 18 | let currentScore = 0; 19 | let activePlayer = 0; 20 | let totalScore = [0, 0]; 21 | let isPlaying = false; 22 | 23 | // player switching function 24 | const switchPlayer = function () { 25 | // currentscore reassign to 0 and show currentscore in active player currentscore elem 26 | currentScore = 0; 27 | currentScoreElems[activePlayer].textContent = currentScore; 28 | // change active player value 29 | activePlayer = activePlayer === 0 ? 1 : 0; 30 | // switch player--active class in player card elem 31 | players[0].classList.toggle('player--active'); 32 | players[1].classList.toggle('player--active'); 33 | } 34 | 35 | // dice rolling function 36 | const rollDice = function () { 37 | if (isPlaying) { 38 | // Genarate a random dice roll 1 to 6 39 | const randomDice = Math.trunc(Math.random() * 6) + 1; 40 | diceImg.classList.remove('hidden'); 41 | diceImg.src = `./images/dice-${randomDice}.png`; 42 | 43 | if (randomDice !== 1) { 44 | // add random dice to currentscore and show in active player current socre 45 | currentScore += randomDice; 46 | currentScoreElems[activePlayer].textContent = currentScore; 47 | } else { 48 | // switch into the next player 49 | switchPlayer(); 50 | } 51 | } 52 | } 53 | 54 | // score holding function 55 | const holdScore = function () { 56 | if (isPlaying) { 57 | // add currentscore to active player totalscore 58 | totalScore[activePlayer] += currentScore; 59 | // and show totalscore to active player elem 60 | scoreElems[activePlayer].textContent = totalScore[activePlayer]; 61 | // checking win condition 62 | if (totalScore[activePlayer] >= 100) { 63 | // add player--winner class to active player elem 64 | players[activePlayer].classList.add('player--winner'); 65 | // hide the dice elem 66 | diceImg.classList.add('hidden'); 67 | // change play status 68 | isPlaying = false; 69 | } else { 70 | switchPlayer(); 71 | } 72 | } 73 | } 74 | 75 | const restartGame = function () { 76 | // remove player--winner class from active player elem 77 | players[activePlayer].classList.remove('player--winner'); 78 | // change play status 79 | isPlaying = true 80 | // set player1 by default 81 | activePlayer = 0; 82 | players[0].classList.add('player--active'); 83 | players[1].classList.remove('player--active'); 84 | // reset all player totalscore and currentscore to 0 85 | currentScore = 0; 86 | totalScore = [0, 0]; 87 | // and show 88 | for (let i = 0; i < scoreElems.length; i++) { 89 | scoreElems[i].textContent = totalScore[i]; 90 | currentScoreElems[i].textContent = currentScore; 91 | } 92 | } 93 | 94 | // User rolls dice 95 | rollDiceBtn.addEventListener('click', rollDice); 96 | // User holds score 97 | holdBtn.addEventListener('click', holdScore); 98 | // Start new game 99 | newGameBtn.addEventListener('click', restartGame); 100 | 101 | // Keyboard accessibility 102 | document.addEventListener('keydown', e => { 103 | if (e.code === 'Space') { 104 | rollDice(); 105 | } else if (e.code === 'Enter' && !e.ctrlKey) { 106 | holdScore(); 107 | } else if (e.code === 'Enter' && e.ctrlKey) { 108 | restartGame(); 109 | } 110 | }); 111 | 112 | const setName = function () { 113 | for (let i = 0; i < playerNameElems.length; i++) { 114 | if (this.textContent === 'Confirm') { 115 | playerNameElems[i].textContent = setNameInput[i].value ? setNameInput[i].value : `Player ${i + 1}`; 116 | } else { 117 | playerNameElems[i].textContent = `Player ${i + 1}`; 118 | } 119 | } 120 | 121 | overlay.classList.add('hidden'); 122 | setNameElem.classList.add('hidden'); 123 | isPlaying = true; 124 | } 125 | 126 | confirmBtn.addEventListener('click', setName); 127 | 128 | cancelBtn.addEventListener('click', setName); 129 | -------------------------------------------------------------------------------- /Challenges/Pig Game/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: inherit; 7 | } 8 | 9 | html { 10 | font-size: 62.5%; 11 | box-sizing: border-box; 12 | user-select: none; 13 | } 14 | 15 | body { 16 | font-family: 'Nunito', sans-serif; 17 | font-weight: 400; 18 | height: 100vh; 19 | color: #333; 20 | background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%); 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | /* overflow: hidden; */ 25 | } 26 | 27 | /* LAYOUT */ 28 | main { 29 | position: relative; 30 | width: 100rem; 31 | height: 55rem; 32 | background-color: rgba(255, 255, 255, 0.35); 33 | /* backdrop-filter: blur(200px); */ 34 | filter: blur(); 35 | box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25); 36 | border-radius: 9px; 37 | overflow: hidden; 38 | display: flex; 39 | } 40 | 41 | .player { 42 | flex: 50%; 43 | padding: 9rem; 44 | display: flex; 45 | flex-direction: column; 46 | align-items: center; 47 | } 48 | 49 | /* ELEMENTS */ 50 | .name { 51 | position: relative; 52 | font-size: 4rem; 53 | text-transform: uppercase; 54 | letter-spacing: 1px; 55 | word-spacing: 2px; 56 | font-weight: 300; 57 | margin-bottom: 1rem; 58 | } 59 | 60 | .score { 61 | font-size: 8rem; 62 | font-weight: 300; 63 | color: #c7365f; 64 | margin-bottom: auto; 65 | } 66 | 67 | .player--active { 68 | background-color: rgba(255, 255, 255, 0.4); 69 | } 70 | .player--active .name { 71 | font-weight: 700; 72 | } 73 | .player--active .score { 74 | font-weight: 400; 75 | } 76 | 77 | .player--active .current { 78 | opacity: 1; 79 | } 80 | 81 | 82 | .current { 83 | background-color: #c7365f; 84 | opacity: 0.8; 85 | border-radius: 9px; 86 | color: #fff; 87 | width: 65%; 88 | padding: 2rem; 89 | text-align: center; 90 | } 91 | 92 | .current-label { 93 | text-transform: uppercase; 94 | margin-bottom: 1rem; 95 | font-size: 1.7rem; 96 | color: #ddd; 97 | } 98 | 99 | .current-score { 100 | font-size: 3.5rem; 101 | } 102 | 103 | /* ABSOLUTE POSITIONED ELEMENTS */ 104 | .btn { 105 | position: absolute; 106 | left: 50%; 107 | transform: translateX(-50%); 108 | color: #444; 109 | background: none; 110 | border: none; 111 | font-family: inherit; 112 | font-size: 1.8rem; 113 | text-transform: uppercase; 114 | cursor: pointer; 115 | font-weight: 400; 116 | 117 | background-color: white; 118 | background-color: rgba(255, 255, 255, 0.74); 119 | 120 | padding: 0.7rem 2.5rem; 121 | border-radius: 50rem; 122 | box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1); 123 | } 124 | 125 | .btn::first-letter { 126 | font-size: 2.4rem; 127 | display: inline-block; 128 | margin-right: 0.7rem; 129 | } 130 | 131 | .btn--new { 132 | top: 4rem; 133 | } 134 | .btn--roll { 135 | top: 39.3rem; 136 | } 137 | .btn--hold { 138 | top: 46.1rem; 139 | } 140 | 141 | .btn:active { 142 | transform: translate(-50%, 3px); 143 | box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15); 144 | } 145 | 146 | .btn:focus { 147 | outline: none; 148 | border: 2px solid #2093ff; 149 | } 150 | 151 | .dice { 152 | position: absolute; 153 | left: 50%; 154 | top: 16.5rem; 155 | transform: translateX(-50%); 156 | height: 10rem; 157 | box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2); 158 | } 159 | 160 | .player--winner { 161 | background-image: linear-gradient(to top left, #28142c 0%, #3b1012 100%); 162 | } 163 | 164 | .player--winner .name { 165 | font-weight: 700; 166 | color: #c7365f; 167 | } 168 | 169 | 170 | .overlay { 171 | position: absolute; 172 | width: 100%; 173 | height: 100vh; 174 | backdrop-filter: blur(2px); 175 | background: #000000b9; 176 | z-index: 10; 177 | } 178 | 179 | .keyboard-shorcut { 180 | position: absolute; 181 | bottom: 20px; 182 | right: 20px; 183 | padding: 10px 20px; 184 | background: rgba(0, 0, 0, 0.438); 185 | font-size: 14px; 186 | color: #ffffff; 187 | border-radius: 5px; 188 | display: flex; 189 | flex-direction: column; 190 | } 191 | 192 | .keyboard-shorcut h3 { 193 | margin: 10px; 194 | } 195 | 196 | .keyboard-shorcut .enter, 197 | .keyboard-shorcut .space, 198 | .keyboard-shorcut .ctrl-enter { 199 | margin: 5px; 200 | padding: 2px 5px; 201 | } 202 | 203 | kbd { 204 | padding: 2px 5px; 205 | border-radius: 4px; 206 | font-family: monospace; 207 | background: #000000; 208 | } 209 | 210 | .set-name { 211 | position: absolute; 212 | top: 50%; 213 | left: 50%; 214 | transform: translate(-50%, -50%); 215 | display: flex; 216 | flex-direction: column; 217 | background: #ffffff; 218 | padding: 50px; 219 | border-radius: 10px; 220 | font-size: 18px; 221 | /* transition: all 1s; */ 222 | z-index: 20; 223 | } 224 | 225 | .set-name h2 { 226 | text-align: center; 227 | margin: 0 0 20px; 228 | } 229 | 230 | .set-name input { 231 | padding: 10px 15px; 232 | margin: 10px 0; 233 | font-size: 18px; 234 | border: 1px solid #b8b8b8; 235 | border-radius: 5px; 236 | } 237 | 238 | .set-name label { 239 | font-weight: bold; 240 | } 241 | 242 | .set-name input:focus { 243 | outline: none; 244 | border: 1px solid #2093ff; 245 | } 246 | 247 | .buttons { 248 | display: flex; 249 | margin-top: 20px; 250 | justify-content: center; 251 | align-items: center; 252 | } 253 | 254 | .buttons .cancel, 255 | .buttons .confirm { 256 | margin: 0 10px; 257 | padding: 8px 20px; 258 | border-radius: 100px; 259 | color: #ffffff; 260 | cursor: pointer; 261 | user-select: none; 262 | } 263 | 264 | .cancel { 265 | background: #db2b2b; 266 | } 267 | 268 | .confirm { 269 | background: #24b14e; 270 | } 271 | 272 | .cancel:active, 273 | .confirm:active { 274 | transform: scale(0.98); 275 | } 276 | 277 | .hidden { 278 | display: none; 279 | } -------------------------------------------------------------------------------- /Javascript fundamentals - part 1/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | //---------------------LECTURE: values and variebles--------------------------- 3 | // ---------------------------------------------------------------------------- 4 | 5 | let country = 'Bangladesh'; 6 | let continent = 'Asia'; 7 | let population = 16100000; 8 | 9 | console.log(country); 10 | console.log(continent); 11 | console.log(population); 12 | // ---------------------------------------------------------------------------- 13 | 14 | 15 | //---------------------------LECTURE: data types------------------------------- 16 | // ---------------------------------------------------------------------------- 17 | 18 | let isIsland = false; 19 | let langueage; 20 | 21 | console.log(typeof isIsland); 22 | console.log(typeof population); 23 | console.log(typeof country); 24 | console.log(typeof langueage); 25 | // ---------------------------------------------------------------------------- 26 | 27 | 28 | //--------------------------LECTURE: let, const, var--------------------------- 29 | // ---------------------------------------------------------------------------- 30 | 31 | const country = 'Bangladesh'; 32 | const continent = 'Asia'; 33 | let population = 16100000; 34 | const language = "Bangla"; 35 | // ---------------------------------------------------------------------------- 36 | 37 | 38 | //-----------------------LECTURE: bacsic operator------------------------------ 39 | // ---------------------------------------------------------------------------- 40 | 41 | const halfPopulation = population / 2; 42 | console.log(population + 1); 43 | 44 | //Finland has a population of 6 million. Does your country have more people than Finland? 45 | 46 | const findlandPopulation = 600000; 47 | console.log(population > findlandPopulation); 48 | 49 | //The average population of a country is 33 million people. Does your country have less people than the average country? 50 | 51 | const avarageCountryPopulation = 3300000; 52 | console.log(population > avarageCountryPopulation); 53 | 54 | // create a new variable 'description' which contains a string with this format: 'Portugal is in Europe, 55 | //and its 11 million people speak portuguese' 56 | 57 | const description = 'Portugal is in Europe, and its 11 million people speak portuguese'; 58 | 59 | // ---------------------------------------------------------------------------- 60 | 61 | 62 | // -----------------Lecture: string and template literals---------------------- 63 | // ---------------------------------------------------------------------------- 64 | 65 | const description = `Purtogal is in Europe, and its 11 million people speak 66 | portuguese`; 67 | 68 | // ---------------------------------------------------------------------------- 69 | 70 | 71 | //----------LECTURE: Taking Decisions: if / else Statements ------------------- 72 | // ---------------------------------------------------------------------------- 73 | 74 | const population = 161000000; 75 | const isHigherThan33 = population > 33000000; 76 | if (isHigherThan33) { 77 | console.log(`Purtogal's population is above average`); 78 | } else { 79 | console.log(`Purtogal's population is 22 million below average`); 80 | } 81 | // ---------------------------------------------------------------------------- 82 | 83 | 84 | //-----------LECTURE: Type conversion and coercion Statements ---------------- 85 | // ---------------------------------------------------------------------------- 86 | 87 | `9` - `5` //4 88 | `19` - `13` + `17`; //617 89 | `19` - `13` + 17; // 23 90 | `123` < 57; // false 91 | 5 + 6 + `4` + 9 - 4 - 2; // 1143 92 | 93 | // ---------------------------------------------------------------------------- 94 | 95 | 96 | //----------------LECTURE: Equality Operators: == vs. === --------------------- 97 | // ---------------------------------------------------------------------------- 98 | 99 | const numNeighbours = Number(prompt(`How many neighbour countries does your country have?`)); 100 | const neighboursIsOne = numNeighbours === 1; 101 | const neighboursIsMoreThanOne = numNeighbours > 1; 102 | if (neighboursIsOne) { 103 | console.log(`only ${numNeighbours} border`); 104 | } else if (neighboursIsMoreThanOne) { 105 | console.log(`${numNeighbours} is grater than 1`); 106 | } else { 107 | console.log(`No border`); 108 | } 109 | 110 | // ---------------------------------------------------------------------------- 111 | 112 | 113 | //------------------------LECTURE: Logical Operators -------------------------- 114 | // ---------------------------------------------------------------------------- 115 | 116 | let country = 'Bangladesh'; 117 | let population = 16100000; 118 | let isIsland = false; 119 | let langueage = `bangla`; 120 | 121 | if (langueage === `english` && population < 5000000 && !isIsland) { 122 | console.log(`You should live in ${country} 😁`); 123 | } else { 124 | console.log(`${country} does not meet your criteria 😔`); 125 | } 126 | 127 | //----------------------------------------------------------------------------- 128 | 129 | //--------------------LECTURE: The switch Statement--------------------------- 130 | //----------------------------------------------------------------------------- 131 | 132 | const language = `Chinese`; 133 | switch (language) { 134 | case `Chinese`: 135 | case `Mandarin`: 136 | console.log(`${language} is MOST number of native speakers`); 137 | break; 138 | case `Spanish`: 139 | console.log(`${language} is 2nd place of number of native speakers`); 140 | break; 141 | case `English`: 142 | console.log(`${language} is 3rd place of native speakers`); 143 | break; 144 | case `Hindi`: 145 | console.log(`${language} is 4rth place of native speakers`); 146 | break; 147 | case `Arabic`: 148 | console.log(`${language} is 5th place of native speakers`); 149 | break; 150 | default: 151 | console.log(`${language} is Great laguage too 😁`); 152 | } 153 | //----------------------------------------------------------------------------- 154 | */ 155 | 156 | //----------------Lecture: The conditional (ternary) operator------------------ 157 | //----------------------------------------------------------------------------- 158 | 159 | let country = 'Bangladesh'; 160 | let population = 16100000; 161 | const result = `${country}'s population is ${population > 33000000 ? `above` : `below`} average`; 162 | console.log(result); 163 | 164 | //----------------------------------------------------------------------------- -------------------------------------------------------------------------------- /Javascript fundamentals - part 2/script.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | /* 3 | //----------------------------Lecture: function-------------------------------- 4 | //----------------------------------------------------------------------------- 5 | 6 | function describeCountry(country, population, capitalCity) { 7 | return `${country} has ${population} million people and it's capital city is 8 | ${capitalCity}.`; 9 | } 10 | const bd = describeCountry(`Bangladesh`, 163, `Dhaka`); 11 | const ind = describeCountry(`India`, 1366, `New Delhi`); 12 | const ru = describeCountry(`Russia`, 144, `Moscow`); 13 | 14 | console.log(bd); 15 | console.log(ind); 16 | console.log(ru); 17 | //----------------------------------------------------------------------------- 18 | 19 | 20 | 21 | //----------------LECTURE: Function Declarations vs. Expressions -------------------- 22 | //----------------------------------------------------------------------------- 23 | 24 | function percentageOfWorld1 (population, country) { 25 | const peoplePercentageOfWorld = population / 7900 * 100; 26 | console.log(`${country} has ${population} million people it's about 27 | ${peoplePercentageOfWorld}% of the world population`); 28 | } 29 | 30 | 31 | percentageOfWorld1(161, `Bangladesh`); 32 | percentageOfWorld1(1366, `India`); 33 | percentageOfWorld1(21.8, `Sri-Lanka`); 34 | 35 | // Function Expression 36 | const percentageOfWorld2 = function(population, country) { 37 | const peoplePercentageOfWorld2 = population / 7900 * 100; 38 | console.log(`${country} has ${population} million people it's about 39 | ${peoplePercentageOfWorld2}% of the world population`); 40 | } 41 | 42 | percentageOfWorld2(161, `Bangladesh`); 43 | percentageOfWorld2(1366, `India`); 44 | percentageOfWorld2(21.8, `Sri-Lanka`); 45 | //----------------------------------------------------------------------------- 46 | 47 | 48 | //-------------------------LECTURE: Arrow Functions---------------------------- 49 | //----------------------------------------------------------------------------- 50 | 51 | const percentageOfWorld3 = (population, country) => { 52 | const peoplePercentageOfWorld3 = population / 7900 * 100; 53 | console.log(`${country} has ${population} million people it's about 54 | ${peoplePercentageOfWorld3}% of the world population`); 55 | } 56 | 57 | percentageOfWorld3(161, `Bangladesh`); 58 | percentageOfWorld3(1366, `India`); 59 | percentageOfWorld3(21.8, `Sri-Lanka`); 60 | 61 | //----------------------------------------------------------------------------- 62 | 63 | //---------------Lecture: function calling other function--------------------- 64 | //----------------------------------------------------------------------------- 65 | 66 | function percentageOfWorld1(population) { 67 | return population / 7900 * 100; 68 | } 69 | 70 | 71 | const describePopulation = function (country, population) { 72 | const peoplePercentageOfWorld = percentageOfWorld1(population); 73 | const countryDetails = `${country} has ${population} million pepole. which is about ${peoplePercentageOfWorld}%`; 74 | return countryDetails; 75 | } 76 | 77 | console.log(describePopulation(`Bangladesh`, 161)); 78 | console.log(describePopulation(`India`, 1366)); 79 | console.log(describePopulation(`Sri Lanka`, 21.8)); 80 | //----------------------------------------------------------------------------- 81 | 82 | 83 | 84 | //-------------------LECTURE: Introduction to Arrays--------------------------- 85 | //----------------------------------------------------------------------------- 86 | 87 | function percentageOfWorld1(population) { 88 | return population / 7900 * 100; 89 | } 90 | 91 | const population = [161, 1366, 21, 66]; 92 | console.log( population.length === 4 ); 93 | 94 | const persentages = [ 95 | percentageOfWorld1(population[0]), 96 | percentageOfWorld1(population[1]), 97 | percentageOfWorld1(population[2]), 98 | percentageOfWorld1(population[3]) 99 | ]; 100 | console.log(persentages); 101 | 102 | //----------------------------------------------------------------------------- 103 | 104 | 105 | //-------------LECTURE: Basic Array Operations (Methods)----------------------- 106 | //----------------------------------------------------------------------------- 107 | 108 | const neighbours = [`India`, `Sri Lanka`, `Pakistan`]; 109 | neighbours.push(`Utopia`); 110 | console.log(neighbours); 111 | 112 | neighbours.pop(); 113 | console.log(neighbours); 114 | 115 | if (!neighbours.includes(`Germamy`)) { 116 | console.log(`Probably not a central European country ☺`); 117 | } 118 | 119 | neighbours[neighbours.indexOf(`Pakistan`)] = `Chaina`; 120 | console.log(neighbours); 121 | 122 | //----------------------------------------------------------------------------- 123 | 124 | //--------------------LECTURE: Introduction to Objects------------------------- 125 | //----------------------------------------------------------------------------- 126 | 127 | const myCountry = { 128 | country: `Bangladesh`, 129 | capital: `Dhaka`, 130 | language: `Bangla`, 131 | populations: 163, 132 | neighbours: [`India`, `Sri Lanka`, `Pakistan`] 133 | }; 134 | console.log(myCountry); 135 | 136 | //----------------------------------------------------------------------------- 137 | 138 | 139 | //---------------------LECTURE: Dot vs. Bracket Notation----------------------- 140 | //----------------------------------------------------------------------------- 141 | 142 | const myCountry = { 143 | country: `Bangladesh`, 144 | capital: `Dhaka`, 145 | language: `Bangla`, 146 | populations: 163, 147 | neighbours: [`India`, `Sri Lanka`, `Pakistan`] 148 | }; 149 | 150 | console.log(`${myCountry.country} has ${myCountry.populations} 151 | Bangali-speaking people, ${myCountry.neighbours.length} neighboring countries 152 | and a capital called ${myCountry.capital}`); 153 | 154 | myCountry.populations += 2; 155 | console.log(myCountry.populations); 156 | 157 | myCountry[`populations`] -= 2; 158 | console.log(myCountry.populations); 159 | 160 | //----------------------------------------------------------------------------- 161 | 162 | 163 | //-------------------------LECTURE: Object Methods----------------------------- 164 | //----------------------------------------------------------------------------- 165 | 166 | const myCountry = { 167 | country: `Bangladesh`, 168 | capital: `Dhaka`, 169 | language: `Bangla`, 170 | populations: 163, 171 | neighbours: [`India`, `Sri Lanka`, `Pakistan`], 172 | describe: function() { 173 | console.log(`${this.country} has ${this.populations} million bagali-speaking people, 174 | ${this.neighbours.length} neighbores countries and a capital called ${this.capital}`) 175 | }, 176 | checkIsland: function() { 177 | return this.isIslan = this.neighbours.length === 0 ? true : false; 178 | } 179 | }; 180 | 181 | 182 | myCountry.describe(); 183 | console.log(myCountry.checkIsland()); 184 | 185 | //----------------------------------------------------------------------------- 186 | 187 | 188 | 189 | //---------------------LECTURE: Iteration: The for Loop------------------------ 190 | //----------------------------------------------------------------------------- 191 | 192 | for (let i = 1; i < 51; i++) { 193 | console.log(`voter number ${i} currently votting 👨`); 194 | } 195 | 196 | //----------------------------------------------------------------------------- 197 | 198 | 199 | 200 | //--------------LECTURE: Looping Arrays, Breaking and Continuing--------------- 201 | //----------------------------------------------------------------------------- 202 | 203 | const population = [161, 1366, 21, 66]; 204 | const percentage2 = []; 205 | 206 | function percentageOfWorld1(population) { 207 | return population / 7900 * 100; 208 | } 209 | for (let i = 0; i < population.length; i++) { 210 | percentage2.push(percentageOfWorld1(population[i])); 211 | } 212 | console.log(percentage2); 213 | 214 | //----------------------------------------------------------------------------- 215 | 216 | 217 | 218 | //---------------LECTURE: Looping Backwards and Loops in Loops----------------- 219 | //----------------------------------------------------------------------------- 220 | 221 | const listOfNeighbours = [ 222 | ['Canada', 'Maxico'], 223 | ['Spain'], 224 | ['Norway', 'Sweden', 'Russia'] 225 | ]; 226 | for( let i = 0; i < listOfNeighbours.length; i++){ 227 | for(let x = 0; x < listOfNeighbours[i].length; x++){ 228 | console.log(`Neighbour: ${listOfNeighbours[i][x]}`); 229 | } 230 | } 231 | 232 | //----------------------------------------------------------------------------- 233 | */ 234 | 235 | 236 | //--------------------------LECTURE: the while loop---------------------------- 237 | //----------------------------------------------------------------------------- 238 | 239 | const population = [161, 1366, 21, 66]; 240 | const percentage3 = []; 241 | 242 | function percentageOfWorld1(population) { 243 | return population / 7900 * 100; 244 | } 245 | 246 | let i = 0; 247 | while (i < population.length) { 248 | const perc = percentageOfWorld1(population[i]); 249 | percentage3.push(perc); 250 | 251 | i++; 252 | } 253 | console.log(percentage3); 254 | 255 | //----------------------------------------------------------------------------- 256 | -------------------------------------------------------------------------------- /Class practice/app.js: -------------------------------------------------------------------------------- 1 | `use strict`; 2 | 3 | // const userInput = document.querySelector('#userInput'); 4 | // const submitBtn = document.querySelector('#submit'); 5 | // const resultBox = document.querySelector('#result'); 6 | 7 | // let key = ''; 8 | 9 | // // Random number machine 10 | // const start = () => { 11 | // const machine = Math.ceil(Math.random() * 5); 12 | // // return machine; 13 | // const inputValue = Number(userInput.value); 14 | // const chackUserInput = machine === inputValue ? true : false; 15 | // return chackUserInput; 16 | // } 17 | 18 | // document.addEventListener('keypress', e => { 19 | // key = e.key; 20 | // if (key === 'Enter') { 21 | // const showResult = start(); 22 | // resultBox.innerText = `${String(showResult).toUpperCase()} ${showResult ? '💪' : '👿'}`; 23 | // resultBox.style.background = showResult ? '#0dc426' : '#c40d0d'; 24 | // } 25 | // }); 26 | 27 | // const arr = [ 28 | // ['Bangladesh', 'India', 'Pakistan', 'Egypt'] 29 | // ]; 30 | 31 | // for (let x = 0; x < arr.length; x++) { 32 | // for (let y = 0; y < arr[x].length; y++) { 33 | // console.log(`${arr[x][y]} is a beautiful country`); 34 | // } 35 | // } 36 | 37 | // const mult = (num1, num2) => num1 * num2; 38 | 39 | // for( let y = 1; y < 11; y++) { 40 | // const result = mult(5, y); 41 | // console.log(`${5} * ${y} = ${result}`) 42 | // } 43 | 44 | 45 | // let userPassword = prompt('Enter a Password: '); 46 | 47 | // const userInput = 'Mdtokee.892238'; 48 | 49 | // let totalCount = 0; 50 | 51 | // let isNumber = false; 52 | // let isCapital = false; 53 | // let isSpecial = false; 54 | 55 | // const allChar = ['1234567890', 'QWERTYUIOPASDFGHJKLZXCVBNM', '_-.']; 56 | 57 | // for (let i = 0; i < userInput.length; i++) { 58 | // if (userInput.length < 8) { 59 | // break; 60 | // } else if (userInput.length > 20) { 61 | // break; 62 | // } 63 | // let password = userInput[i]; // 1 64 | 65 | // for (let a = 0; a < allChar.length; a++) { // allChar.length: 3 66 | // for (let b = 0; b < allChar[a].length; b++) { 67 | // totalCount++; 68 | // if (a === 0 && password === allChar[a][b]) { 69 | // isNumber = true; 70 | // } else if (a === 1 && password === allChar[a][b]) { 71 | // isCapital = true; 72 | // } else if (a === 2 && password === allChar[a][b]) { 73 | // isSpecial = true; 74 | // } 75 | // } 76 | 77 | // } 78 | 79 | // } 80 | 81 | // console.log(isNumber, isCapital, isSpecial, totalCount); 82 | 83 | // personFriends = function (friend1, friend2, friend3) { 84 | // const arr = [friend1, friend2, friend3]; 85 | // return arr; 86 | // } 87 | 88 | // const info = { 89 | // fullName: 'Mohammad Sadee', 90 | // job: 'Programmer', 91 | // location: 'Bangladesh', 92 | // birthYear: 1996, 93 | // calcAge: function () { 94 | // this.age = 2021 - this.birthYear; 95 | // }, 96 | // friends: personFriends('Amit', 'Shakib', 'Rashed'), 97 | // } 98 | // info.friends[info.friends.indexOf('Shakib')] = 'Kashmir'; 99 | 100 | // info.calcAge(); 101 | // console.log(info); 102 | 103 | // for (let i = 0; i < info.friends.length; i++) { 104 | // if (info.friends.includes('Kashmir')) { 105 | // console.log(`You haven't friend called Kashmir`); 106 | // } else if (info.friends.includes(info.friends[i])) { 107 | // console.log(`you've friend called ${info.friends[i]} and he is your good friend`); 108 | // } 109 | // } 110 | 111 | 112 | 113 | 114 | // const userInput = prompt('Enter your friends name : ').toLowerCase(); 115 | // const inputFriendsBirthYear = prompt('Enter frinds birsth year : '); 116 | 117 | // const agesCalc = birthYear => 2021 - inputFriendsBirthYear; 118 | 119 | // const friends = ['jonas', 'anisul islam', 'shakib hossain', 'md rashed']; 120 | 121 | // if (friends.includes(userInput)) { 122 | // console.log(`You've ${agesCalc()} year old friend called ${userInput}`); 123 | // } else { 124 | // console.log(`No friend called ${userInput}`); 125 | // } 126 | 127 | 128 | // number string boolean undefined null BigInt symbol 129 | 130 | // let num = 1; 131 | // console.log(typeof num) 132 | // num = '1'; 133 | // console.log(typeof num) 134 | // num = 1n; 135 | // console.log(typeof num) 136 | // num = true; 137 | // console.log(typeof num) 138 | // num = undefined; 139 | // console.log(typeof num) 140 | // num = null; 141 | // console.log(typeof num) 142 | // num = new Object(); 143 | // console.log(typeof num) 144 | // num.name = 'hello'; 145 | // console.log(typeof num.name) 146 | 147 | // num = [20, ['sadee', 'tokee'], '89']; 148 | // console.log((num[2] * 5 + true)) 149 | // num = typeof num[2]; 150 | // num = '20' / -0; 151 | // console.log(num) 152 | // num = [20, 44, 55, 1, 2, 30]; 153 | // let maxToMin; 154 | // maxToMin = (num.splice(num.indexOf(Math.max(...num)), 1)); 155 | // console.log(Math.max(...num)); 156 | // maxToMin.push((num.splice(num.indexOf(Math.max(...num)), 1))); 157 | // maxToMin 158 | 159 | // console.log(+'', +undefined, +NaN, +null, +0); 160 | // console.log(-'', -undefined, -NaN, -null, -0); 161 | // let String = '-20'; 162 | // console.log(-String) 163 | 164 | // let str = 'codewithsadee'; 165 | // let rStr = ''; 166 | // for (let i = str.length; i >= 0; i--) { 167 | // rStr += str.charAt(i); 168 | // } 169 | // console.log(rStr); 170 | 171 | // const birthYear = [1996, 1992, 1995, 2005]; 172 | 173 | // const friendsAges = []; 174 | // for (let y = 0; y < birthYear.length; y++) { 175 | // const ages = 2021 - birthYear[y]; 176 | // friendsAges.push(ages); 177 | // } 178 | 179 | // console.log(friendsAges); 180 | 181 | // const kass = { 182 | // fullName: 'Kassandra Sanch', 183 | // followers: 26.2, 184 | // postLikes: 3.5 185 | // } 186 | // const parcentOfLike = function (followers, likes) { 187 | // const postLikePercentage = (likes / followers * 100).toFixed(2); 188 | // return `${kass.fullName} got ${postLikePercentage}% (${kass.postLikes}k) likes out of ${kass.followers}k followers `; 189 | // } 190 | 191 | // console.log(parcentOfLike(kass.followers, kass.postLikes)); 192 | 193 | // for (let x = 0; x <= 8; x++) { 194 | // console.log(x); 195 | // } 196 | 197 | // let num = 350; 198 | // if (num !== 300){ 199 | // console.log('unlucky number'); 200 | // } 201 | 202 | // const computerRam = 8; 203 | // const bitsString = []; 204 | 205 | // const calculateBits = function (gigabyte) { 206 | // let totaBitsN = gigabyte * 1000 * 1000 * 1000 * 1000; 207 | // totaBitsN = totaBitsN.toString(); 208 | 209 | // for (let i = totaBitsN.length; i >= 0; i -= 3) { // 000 000 000 000 8 -> 000 000 000 800 210 | // bitsString.push(totaBitsN.slice(i - 3, i)); // 8 0 211 | // console.log(i); 212 | // } 213 | // } 214 | 215 | // calculateBits(computerRam); 216 | // console.log(bitsString); 217 | 218 | // const totalBits = calculateBits(computerRam).toString().length; 219 | // console.log(totalBits); 220 | 221 | // let result = ''; // ,000,000,000,000,8 222 | 223 | // // 8,000,000,000,000 224 | 225 | // const separateNumbers = function (numStr) { 226 | 227 | // for (let i = numStr.length - 1; i >= 0; i -= 3) { 228 | // result += `,${numStr.slice(i - 3, i)}` 229 | // } 230 | 231 | // return result; 232 | // } 233 | 234 | // separateNumbers(totalBits); 235 | 236 | // console.log(result); 237 | 238 | 239 | 240 | // const twitterUser = 'Everyone'; 241 | // console.log(`Hi ${twitterUser} welcome to my profile 💖`); 242 | 243 | // const info = { 244 | // fullName: 'Sadee 🧔', 245 | // recentActivity: 'JS advence consept 📖', 246 | // work: 'Author of Web Explorer', 247 | // skills: ['JavaScript', 'CSS3', 'MySQL', 'React', 'Sass', 'Nodejs'], 248 | // dateOfBirth: '5th september 🍼', 249 | // hobby: 'coding 💻', 250 | // followMe: twitterUser === 'Programmer' ? true : false, 251 | // } 252 | 253 | // const person = bio => { 254 | // console.log(`I'm ${bio.fullName} 255 | // Twitting about my jurney, ${bio.hobby} & ${bio.recentActivity}`); 256 | // } 257 | // person(info); 258 | 259 | // const fullName0 = 'tokee'; 260 | // const fullName1 = 'sadee'; 261 | // console.log(fullName0 > fullName1); 262 | 263 | // console.log( 10 < 20 < 30 ); 264 | // console.log( 30 > 20 > 60 ); 265 | 266 | // const bills = [20, 50, 100, 10, 301]; 267 | // const tips = []; 268 | 269 | // const averageFunc = arr => { 270 | // let sum = 0; 271 | // for (let i = 0; i < arr.length; i++) { 272 | // const calcTip = arr[i] * (arr[i] >= 50 && arr[i] <= 300 ? 15: 20) / 100; 273 | // tips.push(calcTip); 274 | // sum += tips[i]; 275 | // } 276 | // return sum / arr.length; 277 | // } 278 | // const billAverage = averageFunc(bills).toFixed(2); 279 | // console.log(tips); // [ 4, 7.5, 15, 2, 60.2 ] 280 | // console.log(billAverage); // 17.74 281 | 282 | 283 | 284 | // let people = 0; 285 | // for (let x = 0; x < 10; x++) { 286 | // people += x; 287 | // console.log(``); 288 | // } 289 | // const myBoi = { 290 | // fullName: 'mohammad sadee', 291 | // birthYear: 1996, 292 | // location: 'Chandpur, Bangladesh', 293 | // calcAge: function(){ 294 | // return this.age = 2021 - this.birthYear; 295 | // } 296 | // } 297 | // myBoi.calcAge(); 298 | // console.log(myBoi.age) 299 | 300 | // console.log(`hello world! hello world hello wolrd i'm from bd`); 301 | // const personWhoCode = 'sadee'; 302 | 303 | 304 | // let colorHex = '#'; 305 | 306 | 307 | // function backgroundGenerator() { 308 | // colorHex += Math.trunc(Math.random() * 10); 309 | // colorHex.length === 7 ? document.body.style.background = colorHex : backgroundGenerator(); 310 | // document.querySelector('.hex').textContent = colorHex; 311 | // colorHex = '#'; 312 | // } 313 | 314 | // backgroundGenerator(); 315 | 316 | const generateHex = () => { 317 | let hex = '#'; 318 | for (let i = 0; i < 6; i++) { 319 | hex += Math.trunc(Math.random() * 10); 320 | } 321 | document.body.style.background = hex; 322 | document.querySelector('.hex').textContent = hex; 323 | }; 324 | 325 | document.querySelector('button').addEventListener('click', generateHex); 326 | document.addEventListener('keydown', e => { 327 | console.log(e.keyCode) 328 | if (e.keyCode === 32) { 329 | generateHex(); 330 | } 331 | }); 332 | --------------------------------------------------------------------------------