diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..835d1ce 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js @@ -1,4 +1,36 @@ -function setAlarm() {} + + + +function setAlarm() { + //Access to the DOM + let timeRemaining = document.getElementById('timeRemaining'); + let alarmSet = document.getElementById('alarmSet'); + + let inputNumber = alarmSet.value; + let minutes = Math.floor(inputNumber/60); + let seconds = inputNumber % 60; + + let interval = setInterval(() => { + if (minutes > 0 && seconds === 0) { + minutes--; + seconds = 59; + } + + if (seconds === 0) { + clearInterval(interval); + audio.play(); + let bgClock = document.body.style.backgroundColor = "magenta"; + bgClock.reset(); + } + + timeRemaining.innerHTML = '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..8a8ed13 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/index.html +++ b/Week-3/Homework/mandatory/1-alarmclock/index.html @@ -17,7 +17,8 @@

Time Remaining: 00:00

Set Time to: - +
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html index b6115be..f41b1e6 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/index.html +++ b/Week-3/Homework/mandatory/2-quotegenerator/index.html @@ -11,7 +11,48 @@ /> + + + + + Quote Generator + + + + +
+ +
+ + +
+ +
+ +
+ +
+ + +
+
+ + + + diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js index 39ab245..65cacba 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js +++ b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js @@ -1,4 +1,28 @@ -// DO NOT EDIT BELOW HERE +const quoteText = document.getElementById("quote"); +const authorText = document.getElementById("author"); +const newQuoteBtn = document.getElementById("new-quote"); + +async function getQuote() { + try { + const response = await pickFromArray(quotes); + const data = await response; + quoteText.innerText = data.quote; + authorText.innerText = data.author; + + } 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); + + +// // DO NOT EDIT BELOW HERE + // A function which will return one item, at // random, from the given array. diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css index 63cedf2..34476f4 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/style.css +++ b/Week-3/Homework/mandatory/2-quotegenerator/style.css @@ -1 +1,25 @@ /** Write your CSS in here **/ +body{ + background-color: #f5af18; + display: flex; +} +.container { + margin-top: 100px; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.container div { + min-width: 500px; + min-height: 200px; + background-color: white; + +} +div button { + display: inline; + flex-direction: column; + margin: 10px; + +} + \ No newline at end of file diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html index 39cd40e..795bd73 100644 --- a/Week-3/Homework/mandatory/3-slideshow/index.html +++ b/Week-3/Homework/mandatory/3-slideshow/index.html @@ -1,8 +1,8 @@ - +l 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..e8ecf40 100644 --- a/Week-3/Homework/mandatory/3-slideshow/slideshow.js +++ b/Week-3/Homework/mandatory/3-slideshow/slideshow.js @@ -1 +1,54 @@ // Write your code here +let imgArray =[]; + + +// 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]; + +// forward slide function +function forward() { + if (i === imgArray.length - 1) { + i = 0; + } else i++; + document.getElementById("image-slider").src = imgArray[i]; +} + +// backward slide function +function backward() { + if (i === 0) { + i = imgArray.length - 1; + } else i--; + document.getElementById("image-slider").src = imgArray[i]; +} + +// event listener for auto forward button +autoForwardBtn.addEventListener("click", function () { + let interval = setInterval(forward, 3000); + // stop button event listener + stopBtn.addEventListener("click", function () { + clearInterval(interval); + }); +}); + +// event listeners for forward button +forwardBtn.addEventListener("click", forward); + +// event listener for backward button +backwardBtn.addEventListener("click", backward); + +// event listener for auto backward button +autoBackwardBtn.addEventListener("click", function () { + let interval = setInterval(backward, 3000); + + // stop button event listener + stopBtn.addEventListener("click", function () { + clearInterval(interval); + }); +});