diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..544ff25 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js @@ -1,4 +1,31 @@ -function setAlarm() {} +function setAlarm() { + let inputValue = document.getElementById("alarmSet").value; + let remainingTime = document.getElementById("timeRemaining"); + + let min = Math.floor(inputValue / 60); + let sec = inputValue % 60; + + let bgClock = document.querySelector(".centre"); + let colorForBg = ["blue", "red", "green", "pink"]; + + let interval = setInterval(() => { + remainingTime.textContent = `Time Remaining: ${min}:${sec}`; + if (sec === 0) { + sec = 60; + min--; + } + sec--; + + if (min < 0) { + playAlarm(); + clearInterval(interval); + setInterval(() => { + bgClock.style.backgroundColor = + colorForBg[Math.floor(Math.random() * colorForBg.length)]; + }, 500); + } + }, 1000); +} // 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..a149aa2 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/index.html +++ b/Week-3/Homework/mandatory/1-alarmclock/index.html @@ -9,7 +9,7 @@ integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" /> - + @@ -25,4 +25,4 @@

Time Remaining: 00:00

- + \ No newline at end of file diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html index b6115be..acff590 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/index.html +++ b/Week-3/Homework/mandatory/2-quotegenerator/index.html @@ -2,7 +2,7 @@ Quote Generator - + +
+
+
+

+ Minim nisi occaecat magna esse quis in aliqua sunt laborum sint + laboris. +

+

Author

+ +
+
+
+ diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js index 39ab245..9a9f3ed 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js +++ b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js @@ -1,3 +1,22 @@ +let mainBody = document.querySelector("body"); +let quoteInfo = document.querySelector("h2"); +let authorOfQuote = document.querySelector("p"); +let newQuoteBtn = document.querySelector(".btn"); + +//let colours = ["f4ab3c", "#f43c76", "#3cf4ba", "#3c76f4", "#f45e3c"]; + +newQuoteBtn.addEventListener("click", function () { + let randomQuote = Math.floor(Math.random() * quotes.length); + quoteInfo.textContent = quotes[randomQuote].quote; + authorOfQuote.textContent = quotes[randomQuote].author; + + //let randomColour = Math.floor(Math.random() * colours.length); + + // mainbody.style.backgroundColor = randomColour; + // authorOfQuote.style.color = randomColour; + // newQuoteBtn.style.backgroundColor = randomColour; +}); + // 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..d979189 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/style.css +++ b/Week-3/Homework/mandatory/2-quotegenerator/style.css @@ -1 +1,31 @@ /** Write your CSS in here **/ +body { + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #f4ab3c; +} + +.info { + background-color: white; + height: 400px; + margin-top: 5em; + margin-bottom: 5em; + width: 60%; + text-align: center; +} + +h2 { + padding-top: 2.5em; + color: #f4ab3c; +} + +p { + padding-top: 2.5em; + color: #f4ab3c; +} + +.btn { + background-color: #f4ab3c; + color: white; +}