diff --git a/Week-1/InClass/E-arrays-of-objects/exercise-2.js b/Week-1/InClass/E-arrays-of-objects/exercise-2.js index c2259dd..40c5755 100644 --- a/Week-1/InClass/E-arrays-of-objects/exercise-2.js +++ b/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) /* diff --git a/Week-1/InClass/E-arrays-of-objects/exercise-3.js b/Week-1/InClass/E-arrays-of-objects/exercise-3.js index a1ec691..cebdc69 100644 --- a/Week-1/InClass/E-arrays-of-objects/exercise-3.js +++ b/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}` +); diff --git a/Week-3/.vscode/settings.json b/Week-3/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/Week-3/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..b0ce111 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/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 diff --git a/Week-3/Homework/mandatory/1-alarmclock/index.html b/Week-3/Homework/mandatory/1-alarmclock/index.html index ab7d582..884c21f 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/index.html +++ b/Week-3/Homework/mandatory/1-alarmclock/index.html @@ -2,7 +2,7 @@ Alarm Clock - + Time Remaining: 00:00 + diff --git a/Week-3/Homework/mandatory/2-quotegenerator/images/image1.jpg b/Week-3/Homework/mandatory/2-quotegenerator/images/image1.jpg new file mode 100644 index 0000000..fa3a5f5 Binary files /dev/null and b/Week-3/Homework/mandatory/2-quotegenerator/images/image1.jpg differ diff --git a/Week-3/Homework/mandatory/2-quotegenerator/images/image2.jpg b/Week-3/Homework/mandatory/2-quotegenerator/images/image2.jpg new file mode 100644 index 0000000..6d17aab Binary files /dev/null and b/Week-3/Homework/mandatory/2-quotegenerator/images/image2.jpg differ diff --git a/Week-3/Homework/mandatory/2-quotegenerator/images/image3.jpg b/Week-3/Homework/mandatory/2-quotegenerator/images/image3.jpg new file mode 100644 index 0000000..a29f676 Binary files /dev/null and b/Week-3/Homework/mandatory/2-quotegenerator/images/image3.jpg differ diff --git a/Week-3/Homework/mandatory/2-quotegenerator/images/image4.jpg b/Week-3/Homework/mandatory/2-quotegenerator/images/image4.jpg new file mode 100644 index 0000000..b1f63b9 Binary files /dev/null and b/Week-3/Homework/mandatory/2-quotegenerator/images/image4.jpg differ diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html index b6115be..c3f515b 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/index.html +++ b/Week-3/Homework/mandatory/2-quotegenerator/index.html @@ -2,7 +2,10 @@ Quote Generator - + +
+ +
+ + +
+ +
+ +
+ +
+ + +
+
+ diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js index 39ab245..c66da0e 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js +++ b/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); diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css index 63cedf2..d31b78b 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/style.css +++ b/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; + } +} diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Abraham_Lincolm.jpg b/Week-3/Homework/mandatory/3-slideshow/images/Abraham_Lincolm.jpg new file mode 100644 index 0000000..ed47744 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Abraham_Lincolm.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Adolf_Hitler.jpg b/Week-3/Homework/mandatory/3-slideshow/images/Adolf_Hitler.jpg new file mode 100644 index 0000000..2dd8243 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Adolf_Hitler.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Angela_Merkel.jpg b/Week-3/Homework/mandatory/3-slideshow/images/Angela_Merkel.jpg new file mode 100644 index 0000000..6178e20 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Angela_Merkel.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Dalal_Lama.jpg b/Week-3/Homework/mandatory/3-slideshow/images/Dalal_Lama.jpg new file mode 100644 index 0000000..9109fed Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Dalal_Lama.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Fidel_Castro.jpg b/Week-3/Homework/mandatory/3-slideshow/images/Fidel_Castro.jpg new file mode 100644 index 0000000..87a0c70 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Fidel_Castro.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Franklin_Roosevelt.jpg b/Week-3/Homework/mandatory/3-slideshow/images/Franklin_Roosevelt.jpg new file mode 100644 index 0000000..b032ad4 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Franklin_Roosevelt.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Nelson_Mandela.jpg b/Week-3/Homework/mandatory/3-slideshow/images/Nelson_Mandela.jpg new file mode 100644 index 0000000..2923c81 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Nelson_Mandela.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Queen_Victoria.jpg b/Week-3/Homework/mandatory/3-slideshow/images/Queen_Victoria.jpg new file mode 100644 index 0000000..3db3ad8 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Queen_Victoria.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Ronald_Reagan.jpg b/Week-3/Homework/mandatory/3-slideshow/images/Ronald_Reagan.jpg new file mode 100644 index 0000000..38e6d98 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Ronald_Reagan.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Vladimir_Putin.jpg b/Week-3/Homework/mandatory/3-slideshow/images/Vladimir_Putin.jpg new file mode 100644 index 0000000..143ac60 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Vladimir_Putin.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Winson_Churchill.jpg b/Week-3/Homework/mandatory/3-slideshow/images/Winson_Churchill.jpg new file mode 100644 index 0000000..fb26607 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Winson_Churchill.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html index 39cd40e..e0451e8 100644 --- a/Week-3/Homework/mandatory/3-slideshow/index.html +++ b/Week-3/Homework/mandatory/3-slideshow/index.html @@ -2,7 +2,6 @@ Slideshow - + +
+
+ image gallery +
+
+ + + + + +
+
+ diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js index b55091c..496cfe4 100644 --- a/Week-3/Homework/mandatory/3-slideshow/slideshow.js +++ b/Week-3/Homework/mandatory/3-slideshow/slideshow.js @@ -1 +1,64 @@ // Write your code here +let imgArray = [ + "images/Abraham_Lincolm.jpg", // index 0 // + "images/Dalal_Lama.jpg", + "images/Franklin_Roosevelt.jpg", + "images/Nelson_Mandela.jpg", + "images/Queen_Victoria.jpg", + "images/Ronald_Reagan.jpg", + "images/Winson_Churchill.jpg", + "images/Fidel_Castro.jpg", + "images/Adolf_Hitler.jpg", + "images/Angela_Merkel.jpg", + "images/Vladimir_Putin.jpg" +]; + +// selectors // +let autoForwardBtn = document.querySelector("#auto-forward"); +let forwardBtn = document.querySelector("#forward"); +let stopBtn = document.querySelector("#stop"); +let backwardBtn = document.querySelector("#backward"); +let autoBackwardBtn = document.querySelector("#auto-backward"); + +let i = 0; +document.getElementById("image-slider").src = imgArray[0]; + +// backward slide function // +function backward() { + if (i === 0) { + i = imgArray.length - 1; + } else i--; + document.getElementById("image-slider").src = imgArray[i]; +} + +// forward slide function // +function forward() { + if (i === imgArray.length - 1) { + i = 0; + } else i++; + document.getElementById("image-slider").src = imgArray[i]; +} + +// event listener for backward button // +backwardBtn.addEventListener("click", backward); + +// event listeners for forward button // +forwardBtn.addEventListener("click", forward); + +// event listener for autoBackward button // +autoBackwardBtn.addEventListener("click", function () { + let interval = setInterval(backward, 4000); + // stop button eventListener // + stopBtn.addEventListener("click", function () { + clearInterval(interval); + }); +}); + +// event listener for autoForward button // +autoForwardBtn.addEventListener("click", function () { + let interval = setInterval(forward, 4000); + // stop button eventListener // + stopBtn.addEventListener("click", function () { + clearInterval(interval); + }); +}); \ No newline at end of file diff --git a/Week-3/Homework/mandatory/3-slideshow/style.css b/Week-3/Homework/mandatory/3-slideshow/style.css index 63cedf2..d2650be 100644 --- a/Week-3/Homework/mandatory/3-slideshow/style.css +++ b/Week-3/Homework/mandatory/3-slideshow/style.css @@ -1 +1,57 @@ /** Write your CSS in here **/ +html { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + background-color: #ffffff; + background-image: url("data:image/svg+xml,%3Csvg width='48' height='64' viewBox='0 0 48 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 28v-4L36 12 24 24 12 12 0 24v4l4 4-4 4v4l12 12 12-12 12 12 12-12v-4l-4-4 4-4zM8 32l-6-6 10-10 10 10-6 6 6 6-10 10L2 38l6-6zm12 0l4-4 4 4-4 4-4-4zm12 0l-6-6 10-10 10 10-6 6 6 6-10 10-10-10 6-6zM0 16L10 6 4 0h4l4 4 4-4h4l-6 6 10 10L34 6l-6-6h4l4 4 4-4h4l-6 6 10 10v4L36 8 24 20 12 8 0 20v-4zm0 32l10 10-6 6h4l4-4 4 4h4l-6-6 10-10 10 10-6 6h4l4-4 4 4h4l-6-6 10-10v-4L36 56 24 44 12 56 0 44v4z' fill='%232b3332' fill-opacity='0.13' fill-rule='evenodd'/%3E%3C/svg%3E"); + color: #000000; + font-family: "Montserrat", sans-serif; + text-align: center; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; +} + +#image-slider { + width: 450px; + height: 500px; +} + +.image-set { + padding: 10px; +} + +#image-slider { + border-color: rgb(12, 15, 15); + border-width: 30px; + border-bottom-left-radius: 45px; + border-top-right-radius: 45px; +} + +#auto-forward { + background: rgb(177, 177, 233); +} + +#forward { + background: rgb(185, 155, 185); + color: brown; +} + +#stop { + background: black; + color: white; +} + +#backward { + background: rgb(201, 146, 240); +} + +#auto-backward { + background: rgb(25, 45, 133); + color: white; +}