diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..a2528dc 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js @@ -1,4 +1,65 @@ -function setAlarm() {} +function printTime(time) { + var timerEl = document.getElementById("timeRemaining"); + + if (time < 600 && time % 60 >= 10) { + timerEl.innerHTML = `Time Remaining: 0${Math.floor(time / 60)}:${time % 60}`; + } + else if (time < 600 && time % 60 < 10) { + timerEl.innerHTML = `Time Remaining: 0${Math.floor(time / 60)}:0${time % 60}`; + } + else if (time % 60 >= 10) { + timerEl.innerHTML = `Time Remaining: ${Math.floor(time / 60)}:${time % 60}`; + } + else { + timerEl.innerHTML = `Time Remaining: ${Math.floor(time / 60)}:0${time % 60}`; + } +} + +function flashingBackground() { + let redBackground = false; + + let flashingBackground = setInterval(function() { + if(!redBackground) { + document.body.style.backgroundColor = `#ff5555`; + redBackground = true; + } + else { + document.body.style.backgroundColor = "white"; + redBackground = false; + } + + document.getElementById("stop").addEventListener("click", () => { + document.body.style.backgroundColor = "white"; + clearInterval(flashingBackground); + }); + }, 250); +} + + +var clockIsRunning = false; + +function setAlarm() { + if(clockIsRunning) { + return + } + clockIsRunning = true; + + let time = document.getElementById("alarmSet").value; + printTime(time); + + var countdown = setInterval(function() { + printTime(--time); + + if(time === 0) { + playAlarm(); + flashingBackground() + clockIsRunning = false; + clearInterval(countdown); + } + }, 1000); +} + + // DO NOT EDIT BELOW HERE diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html index b6115be..277914f 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/index.html +++ b/Week-3/Homework/mandatory/2-quotegenerator/index.html @@ -11,7 +11,21 @@ /> + - +
+

Click The button to generate a quote

+

version 1.0

+
+
+

Toggle automatic generation:

+ +
+ +
+
- + \ No newline at end of file diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js index 39ab245..c65a4ef 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js +++ b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js @@ -1,3 +1,29 @@ +function generateQuote() { + let q = pickFromArray(quotes); + document.getElementById("quote-content").innerHTML = `“${q.quote}”`; + document.getElementById("author").innerHTML = `- ${q.author}`; +} + +function setup() { + document.getElementById("get-new").addEventListener("click", generateQuote); + + var toggleSwitch = document.getElementById("auto-generation"); + + toggleSwitch.addEventListener("change", function() { + if(this.checked) { + document.querySelector("#auto-switch > p").innerHTML = "auto-play: on"; + setTimeout(generateQuote, 2000); + autoGeneration = setInterval(generateQuote, 60000); + } + else { + document.querySelector("#auto-switch > p").innerHTML = "auto-play: off"; + clearInterval(autoGeneration); + } +}); +} + +window.onload = setup; + // DO NOT EDIT BELOW HERE // A function which will return one item, at diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css index 63cedf2..a7c4fda 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/style.css +++ b/Week-3/Homework/mandatory/2-quotegenerator/style.css @@ -1 +1,107 @@ /** Write your CSS in here **/ +body { + display:flex; + justify-content: center; + background-color: #f3a83b; +} + +#generator { + margin-top: 150px; + padding: 64px; + text-align: right; + background-color: white; + width: 40%; +} + +#quote-content { + color: #f3a83b; + text-align: left; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; +} + +#author { + color: #f3a83b; + font-size: 24px; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + margin-top: 24px; + margin-bottom: 28px; +} + +#actions { + display: flex; + justify-content: space-between; + align-items: center; +} + +#get-new { + text-align: right; + border: none; + background-color: #f3a83b; + padding: 12px 16px; + font-size: 24px; + color: white; +} + +/*CSS for automatic generation switch*/ + +#auto-switch { + color: #f3a83b; + font-size: 20px; + text-align: left; +} + +/* The switch - the box around the slider */ +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + } + +/* Hide default HTML checkbox */ +.switch input { +opacity: 0; + width: 0; + height: 0; + } + + /* The slider */ +.slider { + position: absolute; + cursor: pointer; + border-radius: 34px; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + border-radius: 50%; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #f3a83b; +} + +input:focus + .slider { + box-shadow: 0 0 1px #f3a83b; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} \ No newline at end of file diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1056251.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1056251.jpeg new file mode 100644 index 0000000..8316d6e Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1056251.jpeg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1543793.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1543793.jpeg new file mode 100644 index 0000000..8e58f70 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1543793.jpeg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1787414.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1787414.jpeg new file mode 100644 index 0000000..bc1f96f Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1787414.jpeg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-236606.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-236606.jpeg new file mode 100644 index 0000000..0094a40 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-236606.jpeg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2558605.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2558605.jpeg new file mode 100644 index 0000000..c7d2664 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2558605.jpeg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2643812.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2643812.jpeg new file mode 100644 index 0000000..659d571 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2643812.jpeg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2870353.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2870353.jpeg new file mode 100644 index 0000000..88672d5 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2870353.jpeg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html index 39cd40e..664eac1 100644 --- a/Week-3/Homework/mandatory/3-slideshow/index.html +++ b/Week-3/Homework/mandatory/3-slideshow/index.html @@ -12,6 +12,15 @@ - +
+ slideshow image + +
diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js index b55091c..a6a826d 100644 --- a/Week-3/Homework/mandatory/3-slideshow/slideshow.js +++ b/Week-3/Homework/mandatory/3-slideshow/slideshow.js @@ -1 +1,76 @@ -// Write your code here +var image; +var auto; +var index = 0; +var autoSwitchedOn = false; + +function moveBack() { + if(index <= 0) { + index = imageFilenames.length - 1; + image.src = "images/" + imageFilenames[index]; + } + else { + image.src = "images/" + imageFilenames[--index]; + } +} + +function moveForward() { + if(index >= imageFilenames.length - 1) { + index = 0; + image.src = "images/" + imageFilenames[index]; + } + else { + image.src = "images/" + imageFilenames[++index]; + } +} + +function autoMoveBack() { + if(autoSwitchedOn) { + return; + } + else { + autoSwitchedOn = true; + moveBack(); + auto = setInterval(moveBack, 5000); + } +} + +function autoMoveForward() { + if(autoSwitchedOn) { + return; + } + else { + autoSwitchedOn = true; + moveForward(); + auto = setInterval(moveForward, 5000); + } +} + +function stopAutoMovement() { + autoSwitchedOn = false; + clearInterval(auto); +} + +function setup() { + image = document.getElementById("slide-image"); + image.src = "images/" + imageFilenames[index]; + + document.getElementById("back").addEventListener("click", moveBack); + document.getElementById("forward").addEventListener("click", moveForward); + document.getElementById("auto-back").addEventListener("click", autoMoveBack); + document.getElementById("auto-forward").addEventListener("click", autoMoveForward); + document.getElementById("stop").addEventListener("click", stopAutoMovement); +} + +window.onload = setup; + +/* IMAGE DATABASE: */ + +var imageFilenames = [ + "pexels-photo-236606.jpeg", + "pexels-photo-1056251.jpeg", + "pexels-photo-1543793.jpeg", + "pexels-photo-1787414.jpeg", + "pexels-photo-2558605.jpeg", + "pexels-photo-2643812.jpeg", + "pexels-photo-2870353.jpeg" +]; \ 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..baf6fa2 100644 --- a/Week-3/Homework/mandatory/3-slideshow/style.css +++ b/Week-3/Homework/mandatory/3-slideshow/style.css @@ -1 +1,55 @@ /** Write your CSS in here **/ +#main { + display:flex; + flex-direction:column; + align-items: center; + margin-top: 128px; + +} + +#navigation { + display:flex; + max-width: 809px; + height: 52px; + margin-top: 24px; +} + +#navigation button { + width: 96px; + padding: 0px 16px; + border-radius: 8px; + font-size: 12px; + color: white; + background-color: #1C2030; + border: none; + text-align: center; +} + +#navigation button:nth-of-type(1) { + border-radius: 32px 8px 8px 32px; +} + +#navigation button:nth-of-type(2) { + margin-left: 6px; +} + +#navigation button:nth-of-type(3) { + width: 64px; + margin-left: 6px; + margin-right: 6px; + +} +#navigation button:nth-of-type(4) { + margin-right: 6px; + +} + +#navigation button:nth-of-type(5) { + border-radius: 8px 32px 32px 8px; +} + +#slide-image { + width: 100%; + max-height: 500px; + max-width: 809px; +} \ No newline at end of file diff --git a/Week-3/InClass/Callbacks/exercise-1/exercise.js b/Week-3/InClass/Callbacks/exercise-1/exercise.js index 40f06b0..d1ca7ff 100644 --- a/Week-3/InClass/Callbacks/exercise-1/exercise.js +++ b/Week-3/InClass/Callbacks/exercise-1/exercise.js @@ -10,4 +10,24 @@ 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 ================ -*/ \ No newline at end of file +*/ + +/* +setTimeout(function () { + document.body.style.backgroundColor = "blue"; +}, 5000); +*/ + +function getRandomColor() { + let digits = '0123456789abcdef'; + let color = '#' + for(let i = 0; i < 6; ++i) { + color += digits[Math.floor(Math.random() * 16)]; + } + return color; +} + +setInterval(function () { + document.body.style.backgroundColor = getRandomColor(); +}, 5000); + diff --git a/Week-3/InClass/Callbacks/exercise-2/exercise.js b/Week-3/InClass/Callbacks/exercise-2/exercise.js index eca9595..1ab0848 100644 --- a/Week-3/InClass/Callbacks/exercise-2/exercise.js +++ b/Week-3/InClass/Callbacks/exercise-2/exercise.js @@ -62,9 +62,39 @@ const movies = [ ]; // create showMovies function +let movieList = document.getElementById("all-movies"); +function showMovies(movies) { + for(let i = 0; i < movies.length; ++i) { + let paragraphEl = document.createElement("p"); + paragraphEl.innerHTML = `${movies[i].title} (by ${movies[i].director})` + + setTimeout(function() { + movieList.appendChild(paragraphEl); + }, 1000); + } +} + +showMovies(movies); // create a new movie object for your favorite movie +const newMovie = { + title: "The Matrix", + director: "The Wachowskis", + type:"sci-fi", + haveWatched: true +} // create addMovies function + +function addMovies(movie) { + let paragraphEl = document.createElement("p"); + paragraphEl.innerHTML = `${movie.title} (by ${movie.director})` + + setTimeout(function() { + movieList.appendChild(paragraphEl); + }, 2000); +} + +addMovies(newMovie); diff --git a/Week-3/InClass/DOM-practice/main.js b/Week-3/InClass/DOM-practice/main.js index be9f609..735f9d0 100644 --- a/Week-3/InClass/DOM-practice/main.js +++ b/Week-3/InClass/DOM-practice/main.js @@ -5,8 +5,10 @@ console.log("Testing JS file loaded!") // Without changing any of the HTML or CSS, update the
tags so that they have white backgrounds. - - +let sections = document.getElementsByTagName("section"); +for (let i = 0; i < sections.length; ++i) { + sections[i].style.backgroundColor = "white"; +} // Task 2 @@ -16,10 +18,25 @@ console.log("Testing JS file loaded!") // Hint: look at the CSS to see if there are any classes already written which you can use. - +let images = document.querySelectorAll("img"); +for (let i = 0; i < images.length; ++i) { + images[i].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
. + +let firstParagraph = document.createElement("p"); +firstParagraph.innerHTML = "Grace Hopper was born on December 9, 1906, and died on January 1, 1992, at the age of 85."; +sections[0].appendChild(firstParagraph); + +let secondParagraph = document.createElement("p"); +secondParagraph.innerHTML = "Katherine Johnson was born on August 26, 1918, and died on February 24, 2020, at the age of 101."; +sections[1].appendChild(secondParagraph); + +let thirdParagraph = document.createElement("p"); +thirdParagraph.innerHTML = "Ada Lovelace was born on December 10, 1815, and died on November 27, 1852, at the age of 36."; +sections[2].appendChild(thirdParagraph); \ No newline at end of file