From c7c4461464dff7f5257db0cf7b844e895f077117 Mon Sep 17 00:00:00 2001 From: Maziarmajd <83129200+Maziarmajd@users.noreply.github.com> Date: Wed, 4 Aug 2021 14:25:33 +0100 Subject: [PATCH 01/10] in class 1 --- InClass/Callbacks/exercise-1/exercise.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js index d74ca9d..875619a 100644 --- a/InClass/Callbacks/exercise-1/exercise.js +++ b/InClass/Callbacks/exercise-1/exercise.js @@ -11,3 +11,10 @@ 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 ================ */ +//document.body.style.backgroundColor = "red"; + +setInterval( +function () { + var randomColor = Math.floor(Math.random()*16777215).toString(16); + document.body.style.backgroundColor = "#"+randomColor; +},1000); From 0f4c9c067ee0374629e9ceec5ba49a84318483af Mon Sep 17 00:00:00 2001 From: Maziarmajd <83129200+Maziarmajd@users.noreply.github.com> Date: Wed, 4 Aug 2021 14:27:24 +0100 Subject: [PATCH 02/10] in class 1 part 2 --- InClass/Callbacks/exercise-1/exercise.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js index 875619a..2a216a2 100644 --- a/InClass/Callbacks/exercise-1/exercise.js +++ b/InClass/Callbacks/exercise-1/exercise.js @@ -13,8 +13,7 @@ Prefer to work on a codepen? https://codepen.io/makanti/pen/abOreLg */ //document.body.style.backgroundColor = "red"; -setInterval( -function () { - var randomColor = Math.floor(Math.random()*16777215).toString(16); - document.body.style.backgroundColor = "#"+randomColor; -},1000); +setInterval(function () { + var randomColor = Math.floor(Math.random() * 16777215).toString(16); + document.body.style.backgroundColor = "#" + randomColor; +}, 1000); From 74c4e985dd42e160b16fd7082f2a5c0789bb4f7b Mon Sep 17 00:00:00 2001 From: Maziarmajd <83129200+Maziarmajd@users.noreply.github.com> Date: Wed, 4 Aug 2021 14:52:48 +0100 Subject: [PATCH 03/10] in class 2 --- InClass/Callbacks/exercise-2/exercise.js | 27 +++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) 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); + From 30f6acf1ddd04474575f7e5cbfd0d45a19239712 Mon Sep 17 00:00:00 2001 From: Maziarmajd <83129200+Maziarmajd@users.noreply.github.com> Date: Wed, 4 Aug 2021 14:54:28 +0100 Subject: [PATCH 04/10] in class part 1 fix --- InClass/Callbacks/exercise-1/exercise.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js index 2a216a2..27fb294 100644 --- a/InClass/Callbacks/exercise-1/exercise.js +++ b/InClass/Callbacks/exercise-1/exercise.js @@ -11,7 +11,11 @@ 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 ================ */ -//document.body.style.backgroundColor = "red"; +const pageBackground = document.body; + +setTimeout(() => { + pageBackground.style.backgroundColor = "red"; +}, 5000); setInterval(function () { var randomColor = Math.floor(Math.random() * 16777215).toString(16); From 953ee4f58f8b9392211c8fd3319fcfb58d119156 Mon Sep 17 00:00:00 2001 From: Maziarmajd <83129200+Maziarmajd@users.noreply.github.com> Date: Wed, 4 Aug 2021 14:59:53 +0100 Subject: [PATCH 05/10] In class Dom --- InClass/DOM-practice/main.js | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) 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 From 58c78e55451996ac1de261795ff877af27c66df6 Mon Sep 17 00:00:00 2001 From: Maziarmajd <83129200+Maziarmajd@users.noreply.github.com> Date: Wed, 4 Aug 2021 15:07:54 +0100 Subject: [PATCH 06/10] mandatory alarm clock --- mandatory/1-alarmclock/alarmclock.js | 38 +++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) 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 From 9618bbcf60e1fde4ed06629fadf7486f03ae8550 Mon Sep 17 00:00:00 2001 From: Maziarmajd <83129200+Maziarmajd@users.noreply.github.com> Date: Tue, 31 Aug 2021 12:37:36 +0100 Subject: [PATCH 07/10] html mandatory 2 --- mandatory/2-quotegenerator/index.html | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) 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

+ +
From cd08e2fc6226553da33411a852138bbac59c3bce Mon Sep 17 00:00:00 2001 From: Maziarmajd <83129200+Maziarmajd@users.noreply.github.com> Date: Tue, 31 Aug 2021 12:40:51 +0100 Subject: [PATCH 08/10] css mandatory 2 --- mandatory/2-quotegenerator/style.css | 37 ++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) 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; +} From e811afb71626d595249d1c85e14e444a6940d534 Mon Sep 17 00:00:00 2001 From: Maziarmajd <83129200+Maziarmajd@users.noreply.github.com> Date: Tue, 31 Aug 2021 12:42:35 +0100 Subject: [PATCH 09/10] JS mandatory 2 --- mandatory/2-quotegenerator/quotes.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) 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; +} From 221d989ecc74ce75fc731568119b241c9d3aa058 Mon Sep 17 00:00:00 2001 From: Maziarmajd <83129200+Maziarmajd@users.noreply.github.com> Date: Fri, 3 Sep 2021 13:02:43 +0100 Subject: [PATCH 10/10] Mandatory 3 --- mandatory/3-slideshow/index.html | 9 +++++ mandatory/3-slideshow/slideshow.js | 63 ++++++++++++++++++++++++++++++ mandatory/3-slideshow/style.css | 18 +++++++++ 3 files changed, 90 insertions(+) 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