Java script core 2 homework week3/osagie o

Week-1/InClass/E-arrays-of-objects/exercise-2.js

@@ -40,11 +40,25 @@ WRITE YOUR CODE BELOW
 */
 
 
-let destinationNamesWithin500Kms = // Complete here
+let destinationNamesWithin500Kms = travelDestinations.filter((item) => {
+  return item.distanceKms < 500
+}).map((item) => {return item.destinationName});// Complete here
 
-let destinationNameReachableByFerry = // Complete here
+let destinationNameReachableByFerry = travelDestinations
+  .filter((item) => {
+    return item.transportations.includes("ferry");
+  })
+  .map((item) => {
+    return item.destinationName;
+  });// Complete here
 
-let destinationNamesMoreThan300KmsAwayByTrain = // Complete here (PRINT THE RESULT IN THE CONSOLE USING FOREACH)
+let destinationNamesMoreThan300KmsAwayByTrain = travelDestinations
+  .filter((item) => {
+    return item.distanceKms > 300 && item.transportations.includes('train');
+  })
+  .map((item) => {
+    return item.destinationName;
+  });// Complete here (PRINT THE RESULT IN THE CONSOLE USING FOREACH)
 
 
 /*

Week-1/InClass/E-arrays-of-objects/exercise-3.js

@@ -15,36 +15,36 @@ and returns the number of restaurants in this area.
 */
 
 let restaurant1 = {
-    name: "Paesano",
-    totalSeats: 10,
-    numberOfCustomers: 8,
-    address: {
-        city: "Glasgow",
-        area: "center"
-    },
-    menu: ["pizza", "calzone", "salad"]
+  name: "Paesano",
+  totalSeats: 10,
+  numberOfCustomers: 8,
+  address: {
+    city: "Glasgow",
+    area: "center",
+  },
+  menu: ["pizza", "calzone", "salad"],
 };
 
 let restaurant2 = {
-    name: "Ubiquitous Chip",
-    totalSeats: 20,
-    numberOfCustomers: 10,
-    address: {
-        city: "Glasgow",
-        area: "west"
-    },
-    menu: ["salad", "chocolate cake", "roast lamb"]
+  name: "Ubiquitous Chip",
+  totalSeats: 20,
+  numberOfCustomers: 10,
+  address: {
+    city: "Glasgow",
+    area: "west",
+  },
+  menu: ["salad", "chocolate cake", "roast lamb"],
 };
 
 let restaurant3 = {
-    name: "Monkeyz",
-    totalSeats: 15,
-    numberOfCustomers: 8,
-    address: {
-        city: "Glasgow",
-        area: "center"
-    },
-    menu: ["stew", "chocolate cake", "panini"]
+  name: "Monkeyz",
+  totalSeats: 15,
+  numberOfCustomers: 8,
+  address: {
+    city: "Glasgow",
+    area: "center",
+  },
+  menu: ["stew", "chocolate cake", "panini"],
 };
 
 let restaurants = [restaurant1, restaurant2, restaurant3];
@@ -54,32 +54,52 @@ DO NOT EDIT ANYTHING ABOVE THIS LINE
 WRITE YOUR CODE BELOW
 */
 
-
 let restaurantFinderApplication = {
-    applicationName: "Restaurant Finder",
-    applicationVersion: "1.0",
-    restaurants: restaurants,
-    findAvailableRestaurants: function (numberOfPeople) {
-        // Complete here
-    },
-    findRestaurantServingDish: function (dishName) {
-        // Complete here
-    },
-    countNumberOfRestaurantsInArea: function (area) {
-        // Complete here
+  applicationName: "Restaurant Finder",
+  applicationVersion: "1.0",
+  restaurants: restaurants,
+  findAvailableRestaurants: function (numberOfPeople) {
+    // Complete here
+   return restaurants.filter((item) => {
+     if(item.totalSeats - item.numberOfCustomers >= numberOfPeople) {return item.totalSeats}
+    }).map((item) => {return item.name})
+  },
+
+  findRestaurantServingDish: function (dishName) {
+    // Complete here
+    return restaurants.filter((item) => {
+        if(item.menu.includes(dishName)) {return item.menu}
+    }).map((item) => {return item.name})
+  },
+
+  countNumberOfRestaurantsInArea: function (area) {
+    // Complete here
+    return restaurants.filter((item) => {
+        if(item.address.area.includes(area)) {return item.address.area}
+    }).map((item) => {return item.name}).length
     }
-};
-
-
+  }
 /*
 DO NOT EDIT ANYTHING BELOW THIS LINE
 */
 
-let restaurantsAvailableFor5People = restaurantFinderApplication.findAvailableRestaurants(5);
-console.log(`Find available restaurants for 5 people: Expected result: Ubiquitous Chip,Monkeyz, actual result: ${restaurantsAvailableFor5People}`);
-
-let restaurantsServingSalad = restaurantFinderApplication.findRestaurantServingDish("salad");
-console.log(`Find restaurants serving salad: Expected result: Paesano,Ubiquitous Chip, actual result: ${restaurantsServingSalad}`);
-
-let numberOfRestaurantsInCityCentre = restaurantFinderApplication.countNumberOfRestaurantsInArea("center");
-console.log(`Number of restaurants in city centre: Expected result: 2, actual result: ${numberOfRestaurantsInCityCentre}`);
+let restaurantsAvailableFor5People = restaurantFinderApplication.findAvailableRestaurants(
+  5
+);
+console.log(
+  `Find available restaurants for 5 people: Expected result: Ubiquitous Chip,Monkeyz, actual result: ${restaurantsAvailableFor5People}`
+);
+
+let restaurantsServingSalad = restaurantFinderApplication.findRestaurantServingDish(
+  "salad"
+);
+console.log(
+  `Find restaurants serving salad: Expected result: Paesano,Ubiquitous Chip, actual result: ${restaurantsServingSalad}`
+);
+
+let numberOfRestaurantsInCityCentre = restaurantFinderApplication.countNumberOfRestaurantsInArea(
+  "center"
+);
+console.log(
+  `Number of restaurants in city centre: Expected result: 2, actual result: ${numberOfRestaurantsInCityCentre}`
+);

Week-3/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

Week-3/Homework/mandatory/1-alarmclock/alarmclock.js

@@ -1,4 +1,30 @@
-function setAlarm() {}
+function setAlarm() {
+  let alarmCounter = document.querySelector("#timeRemaining");
+  let bodyClass = document.querySelector(".centre");
+  setAlarmTime = document.querySelector("#alarmSet");
+  let inputValue = setAlarmTime.value;
+
+  let minutes = Math.floor(inputValue / 60);
+  let seconds = inputValue % 60;
+
+  let interval = setInterval(() => {
+    if (minutes > 0 && seconds === 0) {
+      minutes--;
+      seconds = 59;
+    }
+
+    if (seconds === 0) {
+      clearInterval(interval);
+      audio.play();
+      bodyClass.style.backgroundColor = "#B5AEA8";
+    }
+
+    alarmCounter.textContent = `Time Remaining: ${minutes} : ${seconds}`;
+    seconds--;
+  }, 1000);
+
+  audio.pause();
+}
 
 // DO NOT EDIT BELOW HERE
 

Week-3/Homework/mandatory/1-alarmclock/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Alarm Clock</title>
-    <script src="alarmclock.js"></script>
+
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -24,5 +24,6 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
         <button id="stop" type="button">Stop Alarm</button>
       </div>
     </div>
+    <script src="alarmclock.js"></script>
   </body>
 </html>

Week-3/Homework/mandatory/2-quotegenerator/index.html

@@ -2,7 +2,10 @@
 <html>
   <head>
     <title>Quote Generator</title>
-    <script src="quotes.js"></script>
+    <script
+      src="https://kit.fontawesome.com/0ac2206fb4.js"
+      crossorigin="anonymous"
+    ></script>
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -13,5 +16,26 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div class="quote-container" id="quote-container">
+      <!-- Quote -->
+      <div class="quote-text">
+        <i class="fas fa-quote-left"></i>
+        <span id="quote"> </span>
+      </div>
+      <!-- Author -->
+      <div class="quote-author">
+        <span id="author"> </span>
+      </div>
+      <!-- Buttons -->
+      <div class="button-container">
+        <button class="twitter-button" id="twitter" title="Tweet This">
+          <i class="fab fa-twitter"></i>
+        </button>
+        <button id="new-quote">
+          New Quote
+        </button>
+      </div>
+    </div>
   </body>
+  <script src="quotes.js"></script>
 </html>

Week-3/Homework/mandatory/2-quotegenerator/quotes.js

@@ -490,3 +490,38 @@ const quotes = [
     author: "Zig Ziglar",
   },
 ];
+
+// array of background images //
+const bckGroundImages = [
+  "images/image1.jpg",
+  "images/image2.jpg",
+  "images/image3.jpg",
+  "images/image4.jpg",
+];
+
+// selectors //
+const quoteText = document.getElementById("quote");
+const authorText = document.getElementById("author");
+const newQuoteBtn = document.getElementById("new-quote");
+
+// async function //
+async function getQuote() {
+  try {
+    const response = await pickFromArray(quotes);
+    const data = await response;
+    quoteText.innerText = data.quote;
+    authorText.innerText = data.author;
+    const randomNumber = Math.floor(Math.random() * bckGroundImages.length);
+    document.getElementById(
+      "quote-container"
+    ).style.backgroundImage = `url(${bckGroundImages[randomNumber]})`;
+  } catch (error) {
+    console.log("I'm sorry there's no more quotes to display");
+  }
+}
+
+//On load
+getQuote();
+
+//Event listener on Button Click function
+newQuoteBtn.addEventListener("click", getQuote);

Week-3/Homework/mandatory/2-quotegenerator/style.css

@@ -1 +1,79 @@
 /** Write your CSS in here **/
+html {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+  background-color: #ffffff;
+  background-image: url("https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
+  color: #000000;
+  font-family: "Montserrat", sans-serif;
+  text-align: center;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.quote-container {
+  width: auto;
+  max-width: 900px;
+  padding: 20px 30px;
+  border-radius: 10px;
+  background-color: rgba(255, 255, 255, 0.4);
+  box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2);
+}
+.quote-text {
+  font-size: 2.75rem;
+}
+.long-quote {
+  font-size: 2rem;
+}
+.fa-quote-left {
+  font-size: 4rem;
+}
+.quote-author {
+  margin-top: 15px;
+  font-size: 2rem;
+  font-weight: 400;
+  font-style: italic;
+}
+.button-container {
+  margin-top: 15px;
+  display: flex;
+  justify-content: space-between;
+}
+button {
+  cursor: pointer;
+  font-size: 1.2rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 10px;
+  color: #ffffff;
+  background-color: #333333;
+  outline: none;
+  padding: 0.5rem 1.8rem;
+  box-shadow: 0 0.3rem rgba(121, 121, 121, 0.65);
+}
+button:hover {
+  filter: brightness(110%);
+}
+button:active {
+  transform: translate(0, 0.3rem);
+  box-shadow: 0 0.1rem rgba(255, 255, 255, 0.65);
+}
+.twitter-button:hover {
+  color: #38a1f3;
+}
+.fa-twitter {
+  font-size: 1.5rem;
+}
+/* Media Query */
+@media screen and (max-width: 1000px) {
+  .quote-container {
+    margin: auto 10px;
+  }
+  .quote-text {
+    font-size: 2.5rem;
+  }
+}