diff --git a/02-Fundamentals-Part-2/starter/script.js b/02-Fundamentals-Part-2/starter/script.js index e69de29bb2..e6cd8af08a 100755 --- a/02-Fundamentals-Part-2/starter/script.js +++ b/02-Fundamentals-Part-2/starter/script.js @@ -0,0 +1,165 @@ +// Challenge #2 +// Old calculator +/* +const bill = 430; +const tip = bill <= 300 && bill >= 50 ? bill * 0.15 : bill * 0.2; +console.log( + `The bill was ${bill}, the tip was ${tip}, and the total value ${bill + tip}` +); + +// New calculator +const calcTip = function (bill) { + return bill <= 300 && bill >= 50 ? bill * 0.15 : bill * 0.2; +}; + +console.log(calcTip(100)); + +const bills = [125, 555, 44]; + +console.log(bills); + +const tips = [ + calcTip(bills[0]), + calcTip(bills[1]), + calcTip(bills[bills.length - 1]), +]; + +console.log(tips); + +const totals = [ + bills[0] + tips[0], + bills[1] + tips[1], + bills[bills.length - 1] + tips[tips.length - 1], +]; + +console.log(totals);*/ + +// const jonas = { +// firstName: "Jonas", +// lastName: "Schmedtmann", +// birthYear: 1991, +// job: "teacher", +// friends: ["Michael", "Peter", "Steven"], +// hasDriversLicense: false, +// calcAge: function () { +// this.age = 2037 - this.birthYear; +// return this.age; +// }, +// getSummary: function () { +// return `${this.firstName} is a ${this.calcAge()}-year-old ${ +// this.job +// }, and he ${ +// this.hasDriversLicense +// ? "has a driver's license" +// : "does not have a driver's license" +// }`; +// }, +// }; + +// console.log(jonas.getSummary()); + +// Challenge #3 +// const massMark = 78; +// const heightMark = 1.69; +// const massJohn = 92; +// const heightJohn = 1.95; + +// // const massMark = 95; +// // const heightMark = 1.88; +// // const massJohn = 85; +// // const heightJohn = 1.76; + +// const BMIMark = massMark / heightMark ** 2; +// const BMIJohn = massJohn / (heightJohn * heightJohn); +// console.log(BMIMark, BMIJohn); + +// if (BMIMark > BMIJohn) { +// console.log(`Mark's BMI (${BMIMark}) is higher than John's (${BMIJohn})!`); +// } else { +// console.log(`John's BMI (${BMIJohn}) is higher than Marks's (${BMIMark})!`); +// } + +// const mark = { +// fullName: "Mark Miller", +// mass: 78, +// height: 1.69, +// calcBMI: function () { +// return (this.bmi = this.mass / this.height ** 2); +// }, +// }; + +// const john = { +// fullName: "John Smith", +// mass: 92, +// height: 1.95, +// calcBMI: function () { +// return (this.bmi = this.mass / this.height ** 2); +// }, +// }; + +// mark.calcBMI(); +// john.calcBMI(); + +// if (john.bmi > mark.bmi) { +// console.log( +// `${john.fullName}'s BMI (${john.bmi}) is higher than ${mark.fullName}'s (${mark.bmi})!` +// ); +// } else { +// console.log( +// `${mark.fullName}'s BMI (${mark.bmi}) is higher than ${john.fullName}'s (${john.bmi})!` +// ); +// } + +// Old calculator +// const calcTip = function (bill) { +// return bill <= 300 && bill >= 50 ? bill * 0.15 : bill * 0.2; +// }; + +// console.log(calcTip(100)); + +// const bills = [125, 555, 44]; + +// console.log(bills); + +// const tips = [ +// calcTip(bills[0]), +// calcTip(bills[1]), +// calcTip(bills[bills.length - 1]), +// ]; + +// console.log(tips); + +// const totals = [ +// bills[0] + tips[0], +// bills[1] + tips[1], +// bills[bills.length - 1] + tips[tips.length - 1], +// ]; + +const bills = [22, 295, 176, 440, 37, 105, 10, 1100, 86, 52]; +const tips = []; +const totals = []; + +const calcTip = function (bill) { + return bill <= 300 && bill >= 50 ? bill * 0.15 : bill * 0.2; +}; + +for (let i = 0; i < bills.length; i++) { + tips.push(calcTip(bills[i])); + + totals.push(tips[i] + bills[i]); +} + +console.log(tips, totals); + +const calcAverage = function (arr) { + let sum = 0; + for (i = 0; i < arr.length; i++) { + sum += arr[i]; + } + sum = sum / arr.length; + return sum; +}; + +console.log(calcAverage(bills)); +console.log(calcAverage(tips)); +console.log(calcAverage(totals)); diff --git a/03-Developer-Skills/starter/script.js b/03-Developer-Skills/starter/script.js index 939b2a2446..1feb0f968b 100644 --- a/03-Developer-Skills/starter/script.js +++ b/03-Developer-Skills/starter/script.js @@ -1,3 +1,44 @@ // Remember, we're gonna use strict mode in all scripts now! -'use strict'; +"use strict"; +/* +4 steps to solve any problem: +1) Ask the right questions +2) Break the problem into smaller sub-problems +3) Research +4) Write pseudo-code +*/ + +/* +Challenge #1 +1. Create a function called printForecast which takes in an array +2. loop through the array +3. With every iteration, we need to create part of the string containing 3 dots, the temperature and the corresponding # of days. The # increases with every iteration. +4. If the # of days is 1, it should be "day" +5. At the end of the iteration, the part of the string should be added to the previous parts. +6. At the end of the loop, we log the full sentence. + +const printForecast = function (arr) { + let fullSentence; + for (let i = 0; i < arr.length; i++) { + 1. create part of the string + 2. Add it to the fullSentence variable + } + + console.log(fullSentence); +} +*/ + +const printForecast = function (arr) { + let fullSentence = "... "; + for (let i = 0; i < arr.length; i++) { + fullSentence += `${arr[i]}C in ${i + 1} days ... `; + } + + console.log(fullSentence); +}; + +const arr1 = [17, 21, 23]; +const arr2 = [12, 5, -5, 0, 4]; + +printForecast(arr2); diff --git a/05-Guess-My-Number/starter/script.js b/05-Guess-My-Number/starter/script.js index ad9a93a7c1..add0f7b53e 100644 --- a/05-Guess-My-Number/starter/script.js +++ b/05-Guess-My-Number/starter/script.js @@ -1 +1,71 @@ 'use strict'; + +// Variables +let secretNumber = Math.trunc(Math.random() * 20) + 1; +let score = 20; +let highScore = 0; + +// DOM objects in functions +const displayMessage = function (message) { + document.querySelector('.message').textContent = message; +}; + +const displayNumber = function (number) { + document.querySelector('.number').textContent = number; +}; + +const displayScore = function (score) { + document.querySelector('.score').textContent = score; +}; + +// Event listeners +document.querySelector('.check').addEventListener('click', function () { + const guess = Number(document.querySelector('.guess').value); + console.log(guess, typeof guess); + + // When there is no input + if (!guess) { + displayMessage('No number!'); + + // When player wins + } else if (guess === secretNumber) { + displayMessage('Correct number!'); + displayNumber(secretNumber); + + displayScore(score); + + document.querySelector('body').style.backgroundColor = '#60b347'; + document.querySelector('.number').style.width = '30rem'; + + if (score > highScore) { + highScore = score; + + document.querySelector('.highscore').textContent = highScore; + } + } else if (guess !== secretNumber) { + if (score > 1) { + displayMessage(guess > secretNumber ? 'Too high!' : 'Too low!'); + score--; + displayScore(score); + } else { + displayMessage('You lost the game!'); + displayScore(0); + } + } +}); + +document.querySelector('.again').addEventListener('click', function () { + // Restore score and regenerate new random number + score = 20; + secretNumber = Math.trunc(Math.random() * 20) + 1; + + // Restore guess input, number box and message + displayMessage('Start guessing...'); + displayScore(score); + displayNumber('?'); + document.querySelector('.guess').value = ''; + + // Restore bg and number width + document.querySelector('body').style.backgroundColor = '#222'; + document.querySelector('.number').style.width = '15rem'; +}); diff --git a/06-Modal/starter/script.js b/06-Modal/starter/script.js index ad9a93a7c1..2c36c8a240 100644 --- a/06-Modal/starter/script.js +++ b/06-Modal/starter/script.js @@ -1 +1,29 @@ 'use strict'; + +const modal = document.querySelector('.modal'); +const overlay = document.querySelector('.overlay'); +const btnCloseModal = document.querySelector('.close-modal'); +const btnsOpenModal = document.querySelectorAll('.show-modal'); + +const closeModal = function () { + modal.classList.add('hidden'); + overlay.classList.add('hidden'); +}; + +const openModal = function () { + modal.classList.remove('hidden'); + overlay.classList.remove('hidden'); +}; + +for (let i = 0; i < btnsOpenModal.length; i++) + btnsOpenModal[i].addEventListener('click', openModal); + +btnCloseModal.addEventListener('click', closeModal); + +overlay.addEventListener('click', closeModal); + +document.addEventListener('keydown', function (e) { + if (e.key === 'Escape' && !modal.classList.contains('hidden')) { + closeModal(); + } +}); diff --git a/07-Pig-Game/starter/script.js b/07-Pig-Game/starter/script.js index ad9a93a7c1..1f1358f5bd 100644 --- a/07-Pig-Game/starter/script.js +++ b/07-Pig-Game/starter/script.js @@ -1 +1,214 @@ 'use strict'; +/* Did this on my own */ +// Selecting elements +/* +const score0El = document.querySelector('#score--0'); +const score1El = document.querySelector('#score--1'); +const currentScore0El = document.querySelector('#current--0'); +const currentScore1El = document.querySelector('#current--1'); +const player0El = document.querySelector('.player--0'); +const player1El = document.querySelector('.player--1'); +const diceEl = document.querySelector('.dice'); +const btnNew = document.querySelector('.btn--new'); +const btnRoll = document.querySelector('.btn--roll'); +const btnHold = document.querySelector('.btn--hold'); + +// Starting conditions +score0El.textContent = 0; +score1El.textContent = 0; +diceEl.classList.add('hidden'); +let currentScore0 = 0; + +// Rolling dice functionality +btnRoll.addEventListener('click', function () { + // Generate number between 1 and 6 + let diceRoll = Math.trunc(Math.random() * 6) + 1; + + // Show correct dice image + if (diceEl.classList.contains('hidden')) { + diceEl.classList.remove('hidden'); + } + diceEl.src = `dice-${diceRoll}.png`; + + if (diceRoll === 1) { + currentScore0 = 0; + currentScore0El.textContent = currentScore0; + player1El.classList.add('player--active'); + player0El.classList.remove('player--active'); + } else { + currentScore0 += diceRoll; + currentScore0El.textContent = currentScore0; + } +}); + +// Hold dice functionality +btnHold.addEventListener('click', function () { + // 1. Add score in currentScore to the score variable of the active player + if (player0El.classList.contains('player--active')) { + if (scorePlayer0 < 20) { + scorePlayer0 += currentScore; + + // 2. Show the score in the scorebox on the FE + score0El.textContent = scorePlayer0; + + // 3. Reset the currentScore variable + currentScore = 0; + current0El.textContent = currentScore; + + // 5. Switch to the next player + activePlayer = activePlayer === 0 ? 1 : 0; + player0El.classList.toggle('player--active'); + player1El.classList.toggle('player--active'); + } else { + player0El.classList.toggle('player--winner'); + btnRoll.disabled = true; + btnHold.disabled = true; + } + } else { + if (scorePlayer0) scorePlayer1 += currentScore; + + score1El.textContent = scorePlayer1; + + // 3. Reset the currentScore variable + currentScore = 0; + current1El.textContent = currentScore; + + // 5. Switch to the next player + activePlayer = activePlayer === 0 ? 1 : 0; + player0El.classList.toggle('player--active'); + player1El.classList.toggle('player--active'); + + // 4. Check if the player has won, if true: toggle some bitches + if (scorePlayer1 >= 20) { + player1El.classList.toggle('player--winner'); + btnRoll.disabled = true; + btnHold.disabled = true; + } + } +}); +*/ + +/* +When you click "Roll dice", this should happen: +- Gerenate a random number between 1 and 6 +- If the random number is 1, the turn should go to the other user and the number in "current" becomes 0 again +- Dice image should show with the random number +- Random number is added to "current" + + +*/ + +/* Did this following the video */ +// Selecting elements +const player0El = document.querySelector('.player--0'); +const player1El = document.querySelector('.player--1'); +const score0El = document.querySelector('#score--0'); +const score1El = document.querySelector('#score--1'); +const current0El = document.querySelector('#current--0'); +const current1El = document.querySelector('#current--1'); +const diceEl = document.querySelector('.dice'); +const btnNew = document.querySelector('.btn--new'); +const btnRoll = document.querySelector('.btn--roll'); +const btnHold = document.querySelector('.btn--hold'); + +// Starting conditions +score0El.textContent = 0; +score1El.textContent = 0; +diceEl.classList.add('hidden'); + +let scores = [0, 0]; +let currentScore = 0; +let activePlayer = 0; +let playing = true; + +const init = function () { + scores = [0, 0]; + currentScore = 0; + activePlayer = 0; + playing = true; + + score0El.textContent = 0; + score1El.textContent = 0; + current0El.textContent = 0; + current1El.textContent = 0; + + player0El.classList.remove('player--winner'); + player1El.classList.remove('player--winner'); + + player0El.classList.add('player--active'); + player0El.classList.remove('player--active'); + + diceEl.classList.add('hidden'); +}; + +const switchPlayer = function () { + currentScore = 0; + document.querySelector(`#current--${activePlayer}`).textContent = + currentScore; + activePlayer = activePlayer === 0 ? 1 : 0; + player0El.classList.toggle('player--active'); + player1El.classList.toggle('player--active'); + + // diceEl.classList.add('hidden'); +}; + +// Rolling dice functionality +btnRoll.addEventListener('click', function () { + if (playing) { + // 1. Generating a random dice roll + const dice = Math.trunc(Math.random() * 6) + 1; + + // 2. Display dice + diceEl.classList.remove('hidden'); + diceEl.src = `dice-${dice}.png`; + + // 3. Check for rolled 1 + if (dice !== 1) { + // Add dice to current score + currentScore += dice; + document.querySelector(`#current--${activePlayer}`).textContent = + currentScore; + } else { + switchPlayer(); + } + } +}); + +btnHold.addEventListener('click', function () { + if (playing) { + // 1. Add current score to active player's score + scores[activePlayer] += currentScore; + + document.querySelector(`#score--${activePlayer}`).textContent = + scores[activePlayer]; + + // 2. Check if player's score is >= 100 + if (scores[activePlayer] >= 100) { + // Finish the game + playing = false; + diceEl.classList.add('hidden'); + document + .querySelector(`.player--${activePlayer}`) + .classList.remove('player--active'); + document + .querySelector(`.player--${activePlayer}`) + .classList.add('player--winner'); + } else { + // Switch to the next player + switchPlayer(); + } + } else { + } +}); + +btnNew.addEventListener('click', init); + +/* +When you click "New game": +- current score to 0 +- Global score to 0 +- Hide dice roll +- player 0 becomes the first player +- remove player--winner from winner +- give player 0 the player--active styles +*/ diff --git a/07-Pig-Game/starter/style.css b/07-Pig-Game/starter/style.css index dcf788f011..555ea263e0 100644 --- a/07-Pig-Game/starter/style.css +++ b/07-Pig-Game/starter/style.css @@ -165,3 +165,7 @@ main { font-weight: 700; color: #c7365f; } + +.hidden { + display: none; +} diff --git a/09-Data-Structures-Operators/starter/assignments.js b/09-Data-Structures-Operators/starter/assignments.js new file mode 100644 index 0000000000..6d3fa3a6a3 --- /dev/null +++ b/09-Data-Structures-Operators/starter/assignments.js @@ -0,0 +1,349 @@ +'use strict'; + +const books = [ + { + title: 'Algorithms', + author: ['Robert Sedgewick', 'Kevin Wayne'], + publisher: 'Addison-Wesley Professional', + publicationDate: '2011-03-24', + edition: 4, + keywords: [ + 'computer science', + 'programming', + 'algorithms', + 'data structures', + 'java', + 'math', + 'software', + 'engineering', + ], + pages: 976, + format: 'hardcover', + ISBN: '9780321573513', + language: 'English', + programmingLanguage: 'Java', + onlineContent: true, + thirdParty: { + goodreads: { + rating: 4.41, + ratingsCount: 1733, + reviewsCount: 63, + fiveStarRatingCount: 976, + oneStarRatingCount: 13, + }, + }, + highlighted: true, + }, + { + title: 'Structure and Interpretation of Computer Programs', + author: [ + 'Harold Abelson', + 'Gerald Jay Sussman', + 'Julie Sussman (Contributor)', + ], + publisher: 'The MIT Press', + publicationDate: '2022-04-12', + edition: 2, + keywords: [ + 'computer science', + 'programming', + 'javascript', + 'software', + 'engineering', + ], + pages: 640, + format: 'paperback', + ISBN: '9780262543231', + language: 'English', + programmingLanguage: 'JavaScript', + onlineContent: false, + thirdParty: { + goodreads: { + rating: 4.36, + ratingsCount: 14, + reviewsCount: 3, + fiveStarRatingCount: 8, + oneStarRatingCount: 0, + }, + }, + highlighted: true, + }, + { + title: "Computer Systems: A Programmer's Perspective", + author: ['Randal E. Bryant', "David Richard O'Hallaron"], + publisher: 'Prentice Hall', + publicationDate: '2002-01-01', + edition: 1, + keywords: [ + 'computer science', + 'computer systems', + 'programming', + 'software', + 'C', + 'engineering', + ], + pages: 978, + format: 'hardcover', + ISBN: '9780130340740', + language: 'English', + programmingLanguage: 'C', + onlineContent: false, + thirdParty: { + goodreads: { + rating: 4.44, + ratingsCount: 1010, + reviewsCount: 57, + fiveStarRatingCount: 638, + oneStarRatingCount: 16, + }, + }, + highlighted: true, + }, + { + title: 'Operating System Concepts', + author: ['Abraham Silberschatz', 'Peter B. Galvin', 'Greg Gagne'], + publisher: 'John Wiley & Sons', + publicationDate: '2004-12-14', + edition: 10, + keywords: [ + 'computer science', + 'operating systems', + 'programming', + 'software', + 'C', + 'Java', + 'engineering', + ], + pages: 921, + format: 'hardcover', + ISBN: '9780471694663', + language: 'English', + programmingLanguage: 'C, Java', + onlineContent: false, + thirdParty: { + goodreads: { + rating: 3.9, + ratingsCount: 2131, + reviewsCount: 114, + fiveStarRatingCount: 728, + oneStarRatingCount: 65, + }, + }, + }, + { + title: 'Engineering Mathematics', + author: ['K.A. Stroud', 'Dexter J. Booth'], + publisher: 'Palgrave', + publicationDate: '2007-01-01', + edition: 14, + keywords: ['mathematics', 'engineering'], + pages: 1288, + format: 'paperback', + ISBN: '9781403942463', + language: 'English', + programmingLanguage: null, + onlineContent: true, + thirdParty: { + goodreads: { + rating: 4.35, + ratingsCount: 370, + reviewsCount: 18, + fiveStarRatingCount: 211, + oneStarRatingCount: 6, + }, + }, + highlighted: true, + }, + { + title: 'The Personal MBA: Master the Art of Business', + author: 'Josh Kaufman', + publisher: 'Portfolio', + publicationDate: '2010-12-30', + keywords: ['business'], + pages: 416, + format: 'hardcover', + ISBN: '9781591843528', + language: 'English', + thirdParty: { + goodreads: { + rating: 4.11, + ratingsCount: 40119, + reviewsCount: 1351, + fiveStarRatingCount: 18033, + oneStarRatingCount: 1090, + }, + }, + }, + { + title: 'Crafting Interpreters', + author: 'Robert Nystrom', + publisher: 'Genever Benning', + publicationDate: '2021-07-28', + keywords: [ + 'computer science', + 'compilers', + 'engineering', + 'interpreters', + 'software', + 'engineering', + ], + pages: 865, + format: 'paperback', + ISBN: '9780990582939', + language: 'English', + thirdParty: { + goodreads: { + rating: 4.7, + ratingsCount: 253, + reviewsCount: 23, + fiveStarRatingCount: 193, + oneStarRatingCount: 0, + }, + }, + }, + { + title: 'Deep Work: Rules for Focused Success in a Distracted World', + author: 'Cal Newport', + publisher: 'Grand Central Publishing', + publicationDate: '2016-01-05', + edition: 1, + keywords: ['work', 'focus', 'personal development', 'business'], + pages: 296, + format: 'hardcover', + ISBN: '9781455586691', + language: 'English', + thirdParty: { + goodreads: { + rating: 4.19, + ratingsCount: 144584, + reviewsCount: 11598, + fiveStarRatingCount: 63405, + oneStarRatingCount: 1808, + }, + }, + highlighted: true, + }, +]; + +/* +// Destructuring arrays + +// 1.1 +const [firstBook, secondBook] = books; +// console.log(firstBook, secondBook); + +// 1.2 +const [, , thirdBook] = books; +// console.log(thirdBook); + +// 1.3 +const ratings = [ + ['rating', 4.19], + ['ratingsCount', 144584], +]; +const [[, rating], [, ratingsCount]] = ratings; +// console.log(rating, ratingsCount); + +// 1.4 +const ratingStars = [63405, 1808]; + +const [fiveStarRatings, oneStarRatings, threeStarRatings = 0] = ratingStars; +// console.log(fiveStarRatings, oneStarRatings, threeStarRatings); + +// AI exercise 1: +const numbers = [10, 20, 30, 40, 50]; + +const [n1, n2] = numbers; +// console.log(n1, n2); + +// AI exercise 2: +const colors = ['red', 'green', 'blue', 'yellow', 'purple']; + +const [color1, , color3, , color5] = colors; +// console.log(color1, color3, color5); + +// AI exercise 3: +const userInfo = ['John', undefined, 30]; + +const [var1 = -1, var2 = -1, var3 = -1] = userInfo; +// console.log(var1, var2, var3); + +// AI exercise 4 +const coordinates = [ + [1, 2], + [3, 4], + [5, 6], +]; + +const [[x, y]] = coordinates; +// console.log(x, y); + +// AI exercise 5 +const data = ['Alice', 25, 'Engineer', 'Blue', 'New York']; + +const [data1, data2, ...restOfData] = data; +// console.log(data1, data2, restOfData); + +// AI exercise 6 +const users = [ + { name: 'John', address: { city: 'London', zip: 'E1 6AN' } }, + { name: 'Sarah', address: { city: 'Paris', zip: '75001' } }, + { name: 'David', address: { city: 'Berlin', zip: '10115' } }, +]; + +const { + name, + address: { city }, +} = users[1]; +// console.log(name, city); + + +// Destructuring objects +// 2.1 +const { title, author, ISBN } = books[0]; +// console.log(title, author, ISBN); + +//2.2 +const { keywords: tags } = books[0]; +// console.log(tags); + +//2.3 +const { language, programmingLanguage = 'unknown' } = books[6]; +// console.log(language, programmingLanguage); + +//2.4 +let bookTitle = 'unknown'; +let bookAuthor = 'unknown'; + +({ title: bookTitle, author: bookAuthor } = books[0]); +// console.log(bookTitle, bookAuthor); + +//2.5 +const { + thirdParty: { + goodreads: { rating: bookRating }, + }, +} = books[0]; +// console.log(bookRating); + +//2.6 +const printBookInfo = function ({ title, author, year = 'year unknown' }) { + console.log(`${title} by ${author}, ${year}`); +}; + +printBookInfo(books[0]); +*/ + +// AI exercise 1 +// const { title, author, publisher, publicationDate, ISBN } = books[0]; + +// console.log(title, author[0], publisher, publicationDate); + +// const { +// thirdParty: { +// goodreads: { rating, ratingsCount, reviewsCount, fiveStarRatingCount }, +// }, +// } = books[1]; +// // console.log(rating, ratingsCount, reviewsCount, fiveStarRatingCount); + +// const {title, keywords[k1, k2]} = books[0]; diff --git a/09-Data-Structures-Operators/starter/index.html b/09-Data-Structures-Operators/starter/index.html index 7d248b95f5..bc3f587d0a 100644 --- a/09-Data-Structures-Operators/starter/index.html +++ b/09-Data-Structures-Operators/starter/index.html @@ -34,6 +34,7 @@