From 58168c9455a09c82b863845a2391e2e2f1d713b2 Mon Sep 17 00:00:00 2001 From: humailhasankhan Date: Fri, 6 Aug 2021 09:30:45 +0100 Subject: [PATCH 1/2] Finished all mandatory exercises --- mandatory/1-alarmclock/alarmclock.js | 26 +++++++++- mandatory/2-quotegenerator/index.html | 6 +++ mandatory/2-quotegenerator/quotes.js | 27 ++++++++++ mandatory/2-quotegenerator/style.css | 28 ++++++++++ mandatory/3-slideshow/index.html | 14 +++++ mandatory/3-slideshow/slideshow.js | 73 +++++++++++++++++++++++++++ 6 files changed, 173 insertions(+), 1 deletion(-) diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..32d9d14 100644 --- a/mandatory/1-alarmclock/alarmclock.js +++ b/mandatory/1-alarmclock/alarmclock.js @@ -1,4 +1,26 @@ -function setAlarm() {} +function setAlarm() { + function timeConverter(num) { + const minutes = Math.floor(num / 60); + const seconds = num % 60; + return `${("0" + minutes).slice(-2)}:${("0" + seconds).slice(-2)}`; + } + let intervalToSet = document.querySelector("#alarmSet"); + let intValue = intervalToSet.value; + let heading = document.getElementById("timeRemaining"); + let intervalValue = timeConverter(intValue); + heading.textContent = `Time Remaining: ${intervalValue}`; + let timeRemaining = +intervalToSet.value; + + const interval = setInterval(() => { + if (timeRemaining === 0) { + playAlarm(); + clearInterval(interval); + } else { + timeRemaining--; + heading.textContent = `Time Remaining: ${timeConverter(timeRemaining)}`; + } + }, 1000); +} // DO NOT EDIT BELOW HERE @@ -16,10 +38,12 @@ function setup() { function playAlarm() { audio.play(); + document.body.style.backgroundColor = "red"; } function pauseAlarm() { audio.pause(); + document.body.style.backgroundColor = "white"; } window.onload = setup; diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html index 0d5c549..f325c22 100644 --- a/mandatory/2-quotegenerator/index.html +++ b/mandatory/2-quotegenerator/index.html @@ -12,6 +12,12 @@ +

Quote generator

+
+

+

+ +
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js index 39ab245..825b7fc 100644 --- a/mandatory/2-quotegenerator/quotes.js +++ b/mandatory/2-quotegenerator/quotes.js @@ -490,3 +490,30 @@ const quotes = [ author: "Zig Ziglar", }, ]; +const newQuoteButton = document.getElementById("quoteBtn"); + +newQuoteButton.addEventListener("click", () => chooseQuote(quotes)); +const quoteContainer = document.getElementById("quote-container"); +const authorContainer = document.getElementById("author-container"); + +function chooseQuote(choicesArray) { + const randomNumber = Math.floor(Math.random() * choicesArray.length); + const choice = choicesArray[randomNumber]; + quoteContainer.innerText = choice.quote; + authorContainer.innerText = choice.author; + console.log(quoteParagraph); + // console.log(choicesArray[randomNumber].quote); + // console.log(choicesArray[randomNumber].author); + // const randomChoice = choicesArray.map((item) => { + // const randomNumber = + // choicesArray[Math.floor(Math.random() * choicesArray.length)]; + // console.log(item.quote); + // }); + + //console.log(randomChoice); + + quoteContainer.appendChild(quoteParagraph); + + //console.log(quoteParagraph); +} +chooseQuote(quotes); diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css index 63cedf2..2e030c7 100644 --- a/mandatory/2-quotegenerator/style.css +++ b/mandatory/2-quotegenerator/style.css @@ -1 +1,29 @@ /** Write your CSS in here **/ +body { + background-color: rgb(0, 147, 147); + font-family: "Arial", "Helvetica", Arial, sans-serif; +} +h1 { + color: white; + text-align: center; + padding-top: 2em; +} +.quote-container-box { + display: flex; + flex-direction: column; + align-items: center; + box-sizing: border-box; + padding: 20px; + margin: 50px; + justify-content: space-between; + background-color: rgba(255, 255, 255, 0.913); +} +#quoteBtn { + background-color: rgb(11, 89, 89); + color: white; + border-radius: 5px; + text-align: right; +} +.pull-right { + align-self: flex-end; +} diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html index 68c163c..e10b175 100644 --- a/mandatory/3-slideshow/index.html +++ b/mandatory/3-slideshow/index.html @@ -12,6 +12,20 @@ +

My Image Gallery

+
+ dog looking through a pink garden chair +
+
+ + + + + +
diff --git a/mandatory/3-slideshow/slideshow.js b/mandatory/3-slideshow/slideshow.js index b55091c..961aa5a 100644 --- a/mandatory/3-slideshow/slideshow.js +++ b/mandatory/3-slideshow/slideshow.js @@ -1 +1,74 @@ // Write your code here +const arrayOfImages = [ + { + image: + "https://images.unsplash.com/photo-1628088306729-824233fd87a3?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", + alt: "make-up items on a white table", + }, + { + image: + "https://images.unsplash.com/photo-1628048429851-b801768f4c01?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyN3x8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", + alt: "building with black glass cladding on it", + }, + { + image: + "https://images.unsplash.com/photo-1628031376060-f8534abd0489?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60", + alt: "dog looking through a pink garden chair", + }, +]; +let currentImageIndex = 2; +let interval; +function setImage(imageData) { + const imageTag = document.querySelector("img"); + imageTag.src = imageData.image; + imageTag.alt = imageData.alt; +} + +function forwardImage() { + let newImageIndex; + if (currentImageIndex === arrayOfImages.length - 1) { + newImageIndex = 0; + } else { + newImageIndex = currentImageIndex + 1; + } + currentImageIndex = newImageIndex; + setImage(arrayOfImages[newImageIndex]); +} + +function backImage() { + let newImageIndex; + if (currentImageIndex === 0) { + newImageIndex = arrayOfImages.length - 1; + } else { + newImageIndex = currentImageIndex - 1; + } + currentImageIndex = newImageIndex; + setImage(arrayOfImages[newImageIndex]); +} + +function autoForwardImage() { + stopAutoImageSlideShow(); + interval = setInterval(forwardImage, 2000); +} +function autoBackImage() { + stopAutoImageSlideShow(); + interval = setInterval(backImage, 2000); +} + +function stopAutoImageSlideShow() { + clearInterval(interval); + interval = null; +} + +const forwardButton = document.getElementById("forward"); +forwardButton.addEventListener("click", forwardImage); + +const backButton = document.getElementById("back"); +backButton.addEventListener("click", backImage); + +const autoForwardButton = document.getElementById("auto-forward"); +autoForwardButton.addEventListener("click", autoForwardImage); +const autoBackButton = document.getElementById("auto-back"); +autoBackButton.addEventListener("click", autoBackImage); +const stopButton = document.getElementById("stop"); +stopButton.addEventListener("click", stopAutoImageSlideShow); From 43448f050a8dec00d7eb5f8ced692a6d91b2fb77 Mon Sep 17 00:00:00 2001 From: humailhasankhan Date: Fri, 6 Aug 2021 22:17:41 +0100 Subject: [PATCH 2/2] Completed in class exercises --- InClass/Callbacks/exercise-1/exercise.js | 15 +++++++ InClass/Callbacks/exercise-2/exercise.js | 52 ++++++++++++++++++++++++ InClass/Callbacks/exercise-2/index.html | 14 +++++++ InClass/DOM-practice/main.js | 41 +++++++++++++++---- mandatory/2-quotegenerator/quotes.js | 14 ------- package.json | 3 +- 6 files changed, 115 insertions(+), 24 deletions(-) diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js index d74ca9d..1d0fd71 100644 --- a/InClass/Callbacks/exercise-1/exercise.js +++ b/InClass/Callbacks/exercise-1/exercise.js @@ -8,6 +8,21 @@ Using setTimeout, change the background colour of the page after 5 seconds (5000 Task 2 Update your code to make the colour change every 5 seconds to something different. Hint: try searching for setInterval. Complete the exercises in this CodePen + + Prefer to work on a codepen? https://codepen.io/makanti/pen/abOreLg ================ */ + +//Task 1: +// const wholePage = document.body; +// setTimeout(function () { +// wholePage.style.backgroundColor = "red"; +// }, 5000); + +//Task 2: + +setInterval(function () { + var randomColor = Math.floor(Math.random() * 16777215).toString(16); + document.body.style.backgroundColor = "#" + randomColor; +}, 5000); diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js index 6d362da..c5c8f9f 100644 --- a/InClass/Callbacks/exercise-2/exercise.js +++ b/InClass/Callbacks/exercise-2/exercise.js @@ -62,7 +62,59 @@ const movies = [ ]; // create showMovies function +function showMovies(moviesArray) { + const allMovieDetails = moviesArray.map((movie) => { + const newParagraph = document.createElement("p"); + newParagraph.innerText = `${movie.title}, directed by ${movie.director}`; + const allMovies = document.getElementById("all-movies"); + allMovies.appendChild(newParagraph); + }); + const totalMovies = document.getElementById("movies-number"); + totalMovies.innerText = moviesArray.length; +} +setTimeout(() => { + showMovies(movies); +}, 1000); // create a new movie object for your favorite movie +const theMatrix = { + title: "The Matrix", + director: "The Wachowskis", + type: "action", + haveWatched: true, +}; // create addMovies function +function addMovie(newMovie) { + movies.push(newMovie); + const newParagraph = document.createElement("p"); + newParagraph.innerText = `${newMovie.title}, directed by ${newMovie.director}`; + const allMovies = document.getElementById("all-movies"); + allMovies.appendChild(newParagraph); + const totalMovies = document.getElementById("movies-number"); + totalMovies.innerText = movies.length; +} + +setTimeout(() => { + addMovie(theMatrix); +}, 2000); + +const form = document.getElementById("form"); +const formSubmission = document.getElementById("submitBtn"); +const titleField = document.getElementById("title"); +const directorField = document.getElementById("director"); +const typeField = document.getElementById("genre"); +const haveWatchedCheckbox = document.getElementById("haveWatched"); + +formSubmission.addEventListener("click", (event) => { + event.preventDefault(); + + const newMovieToAdd = { + title: titleField.value, + director: directorField.value, + type: typeField.value, + haveWatched: haveWatchedCheckbox.checked, + }; + addMovie(newMovieToAdd); + form.reset(); +}); diff --git a/InClass/Callbacks/exercise-2/index.html b/InClass/Callbacks/exercise-2/index.html index bc9654c..9255248 100644 --- a/InClass/Callbacks/exercise-2/index.html +++ b/InClass/Callbacks/exercise-2/index.html @@ -22,6 +22,20 @@

My movies

Number of movies:

+
+
+
+
+
+
+
+
+
+
+

+ +
+
diff --git a/InClass/DOM-practice/main.js b/InClass/DOM-practice/main.js index be9f609..166160d 100644 --- a/InClass/DOM-practice/main.js +++ b/InClass/DOM-practice/main.js @@ -1,13 +1,15 @@ -console.log("Testing JS file loaded!") +console.log("Testing JS file loaded!"); // Task 1 // Without changing any of the HTML or CSS, update the
tags so that they have white backgrounds. +const allSections = document.querySelectorAll("section"); +console.log(allSections); - - - +const individualSections = Array.from(allSections).map((element) => { + element.style.backgroundColor = "white"; +}); // Task 2 @@ -15,11 +17,34 @@ console.log("Testing JS file loaded!") // Hint: look at the CSS to see if there are any classes already written which you can use. - - - - +const allImages = document.querySelectorAll("img"); +Array.from(allImages).map((element) => { + element.className = "content-title"; +}); // Task 3 // Google the date of birth and death of each of the people on the page. Without changing any of the HTML or CSS, add this in a paragraph to the end of their
. +const dates = [ + { + name: "Grace Hopper", + dob: "9th December 1906", + Died: "1st January 1992", + }, + { + name: "Katherine Johnson", + dob: "26th August 1918", + Died: "24th February 2020", + }, + { + name: "Ada Lovelace", + dob: "10th December 1815", + Died: "27th November 1852", + }, +]; + +Array.from(allSections).map((element, index) => { + const paragraph = document.createElement("p"); + paragraph.innerText = `${dates[index].name} was born on ${dates[index].dob} and died on ${dates[index].Died}`; + element.appendChild(paragraph); +}); diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js index 825b7fc..b8a342d 100644 --- a/mandatory/2-quotegenerator/quotes.js +++ b/mandatory/2-quotegenerator/quotes.js @@ -501,19 +501,5 @@ function chooseQuote(choicesArray) { const choice = choicesArray[randomNumber]; quoteContainer.innerText = choice.quote; authorContainer.innerText = choice.author; - console.log(quoteParagraph); - // console.log(choicesArray[randomNumber].quote); - // console.log(choicesArray[randomNumber].author); - // const randomChoice = choicesArray.map((item) => { - // const randomNumber = - // choicesArray[Math.floor(Math.random() * choicesArray.length)]; - // console.log(item.quote); - // }); - - //console.log(randomChoice); - - quoteContainer.appendChild(quoteParagraph); - - //console.log(quoteParagraph); } chooseQuote(quotes); diff --git a/package.json b/package.json index f722f81..77fd68b 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "JavaScript-Core-2-Coursework-Week3", "version": "1.0.0", "description": "", - "license": "CC-BY-SA-4.0", + "license": "ISC", "main": "index.js", "scripts": { "test": "jest" @@ -13,7 +13,6 @@ }, "keywords": [], "author": "", - "license": "ISC", "bugs": { "url": "https://github.com/CodeYourFuture/JavaScript-Core-2-Coursework-Week3/issues" },