diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
index 6ca81cd..b063afa 100644
--- a/mandatory/1-alarmclock/alarmclock.js
+++ b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,21 @@
-function setAlarm() {}
+function setAlarm() {
+ let counter = document.getElementById("timeRemaining");
+ let timer = document.getElementById("alarmSet").value;
+ // timer = timer.value - 1;
+ function counterFunc() {
+ //check if seconds has reached zero to enable alarm sound
+ if (timer < 0) {
+ clearInterval(countDown); //stop the setInterval method
+ playAlarm();
+ } else {
+ //convert the seconds to time and extract the relevant portion
+ const timerVal = new Date(timer * 1000).toISOString().substr(14, 5); //.substr(11,8) to include hr
+ counter.innerText = `Time Remaining: ${timerVal}`;
+ timer -= 1; //decrement the seconds counter by one
+ }
+ }
+ const countDown = setInterval(counterFunc, 1000);
+}
// DO NOT EDIT BELOW HERE
diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
index b6115be..b23a1e8 100644
--- a/mandatory/2-quotegenerator/index.html
+++ b/mandatory/2-quotegenerator/index.html
@@ -2,7 +2,7 @@
Quote Generator
-
+
+
+
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
index 39ab245..5acc6b7 100644
--- a/mandatory/2-quotegenerator/quotes.js
+++ b/mandatory/2-quotegenerator/quotes.js
@@ -1,3 +1,31 @@
+function quoteGenerator(arr) {
+ let bodyDoc = document.getElementsByTagName("body")[0];
+ let newDiv = document.createElement("div");
+ // document.body.appendChild(newDiv);
+ // console.log(newDiv);
+ let quoteHeader = document.createElement("h2");
+ quoteHeader.innerHTML = arr[0]["quote"];
+ newDiv.appendChild(quoteHeader);
+ // console.log(quoteHeader);
+ let authorHeader = document.createElement("h4");
+ authorHeader.innerHTML = arr[0]["author"];
+ newDiv.appendChild(authorHeader);
+ let newButton = document.createElement("button");
+ newButton.innerHTML = "New Quote";
+ newDiv.appendChild(newButton);
+ bodyDoc.appendChild(newDiv);
+ // console.log(newButton);
+ // console.log(authorHeader);
+ // arr.forEach(function(obj){
+ newButton.addEventListener("click", function () {
+ let randomQuote = Math.floor(Math.random() * arr.length);
+ quoteHeader.innerHTML = arr[randomQuote]["quote"];
+ authorHeader.innerHTML = arr[randomQuote]["author"];
+ });
+ // })
+ // return (quoteHeader, authorHeader);
+}
+
// DO NOT EDIT BELOW HERE
// A function which will return one item, at
@@ -23,7 +51,7 @@ function pickFromArray(choices) {
// A list of quotes you can use in your app.
// Feel free to edit them, and to add your own favourites.
-const quotes = [
+let quotes = [
{
quote: "Life isn’t about getting and having, it’s about giving and being.",
author: "Kevin Kruse",
@@ -490,3 +518,5 @@ const quotes = [
author: "Zig Ziglar",
},
];
+
+quoteGenerator(quotes);
diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
index 63cedf2..b99f711 100644
--- a/mandatory/2-quotegenerator/style.css
+++ b/mandatory/2-quotegenerator/style.css
@@ -1 +1,38 @@
/** Write your CSS in here **/
+body{
+ background-color: rgb(197, 127, 255);
+ width:100%;
+ height: 100%;
+ margin:10rem;
+}
+
+div{
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+ height: 20%;
+ text-align: center;
+ background-color: rgb(240, 171, 171);
+ margin: 10em;
+}
+
+h2{
+ color:rgba(159, 30, 210);
+ text-align: left;
+ padding: 2em;
+}
+h4{
+ color:rgb(165, 42, 149);
+ text-align: right;
+ margin: 1em;
+}
+
+button{
+ display: flex;
+ /* flex-direction: row; */
+ width: 7em;
+ height: 2em;
+ background-color: rgb(159, 30, 210);
+ text-align: center;
+ margin: 0.5em;
+}
\ No newline at end of file
diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html
index 39cd40e..7cbaf4b 100644
--- a/mandatory/3-slideshow/index.html
+++ b/mandatory/3-slideshow/index.html
@@ -2,7 +2,6 @@
Slideshow
-
+
+
+
+
diff --git a/mandatory/3-slideshow/slideshow.js b/mandatory/3-slideshow/slideshow.js
index b55091c..4886388 100644
--- a/mandatory/3-slideshow/slideshow.js
+++ b/mandatory/3-slideshow/slideshow.js
@@ -1 +1,100 @@
-// Write your code here
+let images = [
+ {
+ imageName: "Design 1",
+ imageLink:
+ "https://images.unsplash.com/photo-1577083165350-16c9f88b4a25?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=420&q=80",
+ },
+ {
+ imageName: "Design 2",
+ imageLink:
+ "https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTE4fHxkZXNpZ258ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
+ },
+ {
+ imageName: "Design 3",
+ imageLink:
+ "https://images.unsplash.com/photo-1543248939-ff40856f65d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=333&q=80",
+ },
+ {
+ imageName: "Design 4",
+ imageLink:
+ "https://images.unsplash.com/photo-1519974719765-e6559eac2575?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",
+ },
+];
+console.log(images.length);
+
+let divImg = document.querySelector(".imgDiv");
+let headerOne = document.createElement("h1");
+headerOne.innerText = "My Image Carousel";
+divImg.appendChild(headerOne);
+let defaultImg = document.createElement("img");
+defaultImg.src = images[0]["imageLink"];
+divImg.appendChild(defaultImg);
+let imgNam = document.createElement("h4");
+imgNam.innerText = images[0]["imageName"];
+divImg.appendChild(imgNam);
+
+let divBtn = document.querySelector(".btnDiv");
+divImg.appendChild(divBtn);
+
+let backBtn = document.createElement("button");
+backBtn.innerText = "Back";
+divBtn.appendChild(backBtn);
+
+let autoBackBtn = document.createElement("button");
+autoBackBtn.innerText = "Auto Back";
+divBtn.appendChild(autoBackBtn);
+
+let stopBtn = document.createElement("button");
+stopBtn.innerText = "Stop";
+divBtn.appendChild(stopBtn);
+
+let forwardBtn = document.createElement("button");
+forwardBtn.innerText = "Forward";
+divBtn.appendChild(forwardBtn);
+
+let autoForwardBtn = document.createElement("button");
+autoForwardBtn.innerText = "Auto Forward";
+divBtn.appendChild(autoForwardBtn);
+
+let counter = 0;
+let stopBtnInterval;
+
+function forwardBtnFunc() {
+ counter += 1;
+ counter = counter % images.length;
+ defaultImg.src = images[counter]["imageLink"];
+ imgNam.innerText = images[counter]["imageName"];
+ console.log(counter);
+}
+
+function backBtnFunc() {
+ if (counter === 0) {
+ counter = images.length - 1;
+ } else {
+ counter -= 1;
+ }
+ // counter = counter % images.length;
+ defaultImg.src = images[counter]["imageLink"];
+ imgNam.innerText = images[counter]["imageName"];
+ console.log(counter);
+}
+
+function stopBtnFunc() {
+ clearInterval(stopBtnInterval);
+}
+
+function autoForwardFunc() {
+ stopBtnFunc();
+ stopBtnInterval = setInterval(forwardBtnFunc, 1000);
+}
+
+function autoBackFunc() {
+ stopBtnFunc();
+ stopBtnInterval = setInterval(backBtnFunc, 1000);
+}
+
+forwardBtn.addEventListener("click", forwardBtnFunc);
+backBtn.addEventListener("click", backBtnFunc);
+stopBtn.addEventListener("click", stopBtnFunc);
+autoForwardBtn.addEventListener("click", autoForwardFunc);
+autoBackBtn.addEventListener("click", autoBackFunc);
diff --git a/mandatory/3-slideshow/style.css b/mandatory/3-slideshow/style.css
index 63cedf2..6e65b4e 100644
--- a/mandatory/3-slideshow/style.css
+++ b/mandatory/3-slideshow/style.css
@@ -1 +1,47 @@
/** Write your CSS in here **/
+body{
+ width: 100%;
+ height: 100%;
+ background-color: rgb(181, 181, 243);
+}
+
+.imgDiv{
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+ height: 30%;
+ /* text-align: center; */
+ background-color: rgb(230, 212, 212);
+ margin: 10em;
+}
+
+.btnDiv{
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ height: 20%;
+ /* text-align: center; */
+ /* background-color: rgb(240, 171, 171); */
+ margin: 2em;
+}
+button{
+ display: flex;
+ /* justify-content:space-between; */
+ /* width: 9em;
+ height: 2em; */
+ /* align-items: center; */
+ border-radius: 0.5em;
+ margin: 0.2em;
+}
+
+img{
+ display: flex;
+ align-content: center;
+ width: 30em;
+ height: 20em;
+ margin: 2em;
+ /* align-items: center; */
+}
+h4, h1{
+ margin-left:3em;
+}