Jeanine

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));

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);

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';
+});

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();
+  }
+});