diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js index d74ca9d..27fb294 100644 --- a/InClass/Callbacks/exercise-1/exercise.js +++ b/InClass/Callbacks/exercise-1/exercise.js @@ -11,3 +11,13 @@ Update your code to make the colour change every 5 seconds to something differen Prefer to work on a codepen? https://codepen.io/makanti/pen/abOreLg ================ */ +const pageBackground = document.body; + +setTimeout(() => { + pageBackground.style.backgroundColor = "red"; +}, 5000); + +setInterval(function () { + var randomColor = Math.floor(Math.random() * 16777215).toString(16); + document.body.style.backgroundColor = "#" + randomColor; +}, 1000); diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js index 6d362da..ee7e67c 100644 --- a/InClass/Callbacks/exercise-2/exercise.js +++ b/InClass/Callbacks/exercise-2/exercise.js @@ -62,7 +62,32 @@ const movies = [ ]; // create showMovies function +const allMovies = document.getElementById("all-movies"); +const moviesNumber = document.getElementById("movies-number"); +function showMovies() { + for (let movie of movies) { + const pElement = document.createElement("p"); + pElement.innerText = `Title: ${movie.title} \n Director: ${movie.director}`; + setTimeout(function () { + allMovies.appendChild(pElement); + }, 1000); + moviesNumber.innerText = movies.length; + } +} // create a new movie object for your favorite movie - +const newMovie = { + title: "The Matrix", + director: "Wachowski Sisters", + type: "Sci-fi Action", + haveWatched: true, +}; // create addMovies function +function addMovie(newMovie, callback) { + setTimeout(function() { + movies.push(newMovie); + callback(); + }, 2000); +}; +addMovie(newMovie, showMovies); + diff --git a/InClass/DOM-practice/main.js b/InClass/DOM-practice/main.js index be9f609..08e8949 100644 --- a/InClass/DOM-practice/main.js +++ b/InClass/DOM-practice/main.js @@ -1,10 +1,13 @@ -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"); +allSections.forEach((section) => { + section.style.backgroundColor = "white"; +}); @@ -15,7 +18,11 @@ 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"); +allImages.forEach((image) => { + image.className = "content-title"; +}); @@ -23,3 +30,22 @@ console.log("Testing JS file loaded!") // 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 lastParagraph = document.querySelectorAll("section p:last-of-type"); + +lastParagraph.forEach((paragraph, index) => { + const message = document.createElement("span"); + + if (index === 0) { + message.innerText = + "Grace Hopper is Born in 9th Dec 1918 and died on 1st Jan 1992"; + } else if (index === 1) { + message.innerText = + "Katherine Johnson is Born in 26th Aug 1918 and died on 24 Feb 2020"; + } else { + message.innerText = + "Ada Lovelace is Born in 10th Dec 1815 and died on 27th Nov 1852"; + } + + paragraph.appendChild(message); +}); \ No newline at end of file diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..df98104 100644 --- a/mandatory/1-alarmclock/alarmclock.js +++ b/mandatory/1-alarmclock/alarmclock.js @@ -1,4 +1,40 @@ -function setAlarm() {} +function setAlarm() { + // When the `Set Alarm` button is clicked, get the value of the input field + let alarmSet = document.getElementById("alarmSet").value; + let timeRemaining = document.getElementById("timeRemaining"); + const bodyEl = document.querySelector("body"); + + // Update the `Time Remaining` title every second + let timer = setInterval(displayTimer, 1000); + + function displayTimer() { + // When the remaining time left is 0, play the alarm sound + if (alarmSet < 0) { + playAlarm(); + clearInterval(timer); + // When the remaining time left is 0, change bgColor every second + setInterval(function() { + bodyEl.style.background = randomColour(); + }, 1000); + } else { + const numOfMinutes = Math.floor(alarmSet / 60); + let numOfSeconds = alarmSet % 60; + if (numOfSeconds < 10) { + numOfSeconds = `0${numOfSeconds}`; + } + timeRemaining.innerHTML = `Time Remaining: 0${numOfMinutes}:${numOfSeconds}`; + // Decrease the value of alarmSet by 1 + alarmSet--; + } + } + // Function for random rgb values + function randomColour() { + let red = Math.floor(Math.random()*256); + let green = Math.floor(Math.random()*256); + let blue = Math.floor(Math.random()*256); + return `rgb(${red}, ${green}, ${blue})`; + } +}; // DO NOT EDIT BELOW HERE diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html index 0d5c549..390d309 100644 --- a/mandatory/2-quotegenerator/index.html +++ b/mandatory/2-quotegenerator/index.html @@ -12,6 +12,28 @@ +
+
+ + + + + Don't cry because it's over, smile because it happened. + +
+
+ -- Dr Seus +
+
+ +
+ +
+
+

"Life isn’t about getting and having, it’s about giving and being.

+

- Kevin Kruse

+ +
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js index 39ab245..1ef513c 100644 --- a/mandatory/2-quotegenerator/quotes.js +++ b/mandatory/2-quotegenerator/quotes.js @@ -490,3 +490,18 @@ const quotes = [ author: "Zig Ziglar", }, ]; + +window.onload=function (){ + const buttonClick=document.getElementById('newQuote'); + buttonClick.addEventListener('click',generateRandomQuote) +} +function generateRandomQuote(){ + let quoteToDisplay=document.querySelector('#quoteToDisplay'); +let authorName= document.querySelector('.authorName'); + + let generateQuote=Math.floor(Math.random() * quotes.length); + //let generateQuote=pickFromArray(); + + quoteToDisplay.innerHTML=quotes[generateQuote].quote + authorName.innerHTML=quotes[generateQuote].author; +} diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css index 63cedf2..16d7221 100644 --- a/mandatory/2-quotegenerator/style.css +++ b/mandatory/2-quotegenerator/style.css @@ -1 +1,38 @@ /** Write your CSS in here **/ +body{ + background-color: orange; + font-size: 1.5rem; + min-height: 95vh; + display: flex; + align-items: center; +} +.Container{ + width: 57%; + margin: 10rem auto 10rem auto; + padding: 5rem; + background: white; + color: orange; + transition: .8s all ease; +} +.Container:hover{ + box-shadow: 2px 2px 19px 8px orangered; + transition: .8s all ease; +} + +.quotes{ + text-align: center; +} + +.authorName , .QuotesButton{ + font-size: 1.3rem; + text-align: end; + position: relative; + top: 28px; +} +#newQuote{ + border: none; + background: orange; + color: white; + padding: 0.5rem; + margin-top: 3rem; +} diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html index 68c163c..6cae0ad 100644 --- a/mandatory/3-slideshow/index.html +++ b/mandatory/3-slideshow/index.html @@ -12,6 +12,15 @@ +

My Favorite Movies

+
+
+ + + + +
+ diff --git a/mandatory/3-slideshow/slideshow.js b/mandatory/3-slideshow/slideshow.js index b55091c..f5ae0a7 100644 --- a/mandatory/3-slideshow/slideshow.js +++ b/mandatory/3-slideshow/slideshow.js @@ -1 +1,64 @@ // Write your code here +/* Movies Array*/ +let movies = [ + { + name: "Star Wars", + photo: + " https://www.wallpaperflare.com/static/830/23/587/star-wars-episode-v-the-empire-strikes-back-star-wars-movies-minimalism-wallpaper-preview.jpg ", + }, + { + name: "The Matrix", + photo: + " https://64.media.tumblr.com/91f52250cafef33f9944af7161648107/tumblr_ndr4eao9Kl1r046dfo1_1280.jpg", + }, + { + name: " Pulp Fiction", + photo: + " https://weandthecolor.com/wp-content/uploads/2013/06/Pulp-Fiction-Kit-Minimalist-Poster-Illustration-by-Aliz%C3%A9e-Lafon.jpg", + }, + { + name: "Godfather", + photo: + "https://i.etsystatic.com/9265778/r/il/763411/575418056/il_1140xN.575418056_k1y2.jpg", + }, + { + name: "Lord Of The Rings", + photo: + "https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e7fff7d9-172f-4800-b905-134ccf130e4d/d78la91-080239a7-679c-4c8c-bf61-77d8a29d38cb.jpg/v1/fill/w_1024,h_1449,q_75,strp/lord_of_the_rings_3___minimalist_poster_by_tchav_d78la91-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTQ0OSIsInBhdGgiOiJcL2ZcL2U3ZmZmN2Q5LTE3MmYtNDgwMC1iOTA1LTEzNGNjZjEzMGU0ZFwvZDc4bGE5MS0wODAyMzlhNy02NzljLTRjOGMtYmY2MS03N2Q4YTI5ZDM4Y2IuanBnIiwid2lkdGgiOiI8PTEwMjQifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.RGmJA7Dmdoxq7lA79Z9sOtQc6mwVqHs4L7lO8JBCGus", + }, +]; +//Setting up variables and creating other elements +let image = document.createElement("img"); +let imageDiv = document.getElementById("images"); +imageDiv.appendChild(image); +let i = 0; +image.src = movies[i].photo; +image.className = "photo-properties"; +/*Event Listeners*/ +//Forward Button Functionality +function forwarding() { + i++; + if (i > movies.length) i = 0; + image.src = movies[i].photo; +} +let forward = document.getElementById("forward"); +forward.addEventListener("click", forwarding); +//Back Button Functionality +function goingBack() { + i--; + if (i < 0) i = movies.length - 1; + image.src = movies[i].photo; +} +let backwards = document.getElementById("back"); +backwards.addEventListener("click", goingBack); +//Auto Back +let autoReverse = document.getElementById("auto-back"); +autoReverse.addEventListener("click", function () { + setInterval(goingBack, 3000); +}); + +//Auto Forward Button Functionality +let autoForwardMode = document.getElementById("auto-forward"); +autoForwardMode.addEventListener("click", function () { + setInterval(forwarding, 3000); +}); diff --git a/mandatory/3-slideshow/style.css b/mandatory/3-slideshow/style.css index 63cedf2..5e4b198 100644 --- a/mandatory/3-slideshow/style.css +++ b/mandatory/3-slideshow/style.css @@ -1 +1,19 @@ /** Write your CSS in here **/ +.photo-properties{ + width:50%; + height: 50%; + display: block; + margin-left: auto; + margin-right: auto; +} +h1{ + text-align: center; +} +button{ + margin-top: 20px; + +} +button:first-of-type{ + margin-left: 35%; + +} \ No newline at end of file