diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..1c97a57 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js @@ -1,4 +1,81 @@ -function setAlarm() {} +let isPause = false; +let onPause = false; +let timeLeft = 0; +let countDown; +let onAlarm = false; + +function flashBack() { + let alarmColors = ["red", "white"]; + let count = 0; + let isAlarm = setInterval(() => { + count++; + document.body.style.backgroundColor = alarmColors[count % 2]; + }, 200); + document.getElementById("stop").addEventListener("click", () => { + document.body.style.backgroundColor = "white"; + onAlarm = false; + return clearInterval(isAlarm); + }); +} + +function setAlarm() { + let alarmSet = document.getElementById("alarmSet"); + if (!onAlarm) { + if (!isPause) { + timeLeft = Number(alarmSet.value); + if (timeLeft > 0) { + let setButton = document.getElementById("set"); + setButton.textContent = "Pause"; + isPause = true; + let timeRemaining = document.getElementById("timeRemaining"); + countDown = setInterval(function () { + let minLeft = Math.floor(timeLeft / 60); + let secLeft = timeLeft % 60; + timeRemaining.textContent = `Time Remaining: ${("0" + minLeft).slice( + -2 + )}:${("0" + secLeft).slice(-2)}`; + if (!timeLeft) { + playAlarm(); + flashBack(); + isPause = false; + onAlarm = true; + setButton.textContent = "Set Alarm"; + return clearInterval(countDown); + } + timeLeft--; + }, 1000); + } + } else { + if (!onPause) { + let setButton = document.getElementById("set"); + setButton.textContent = "Continue"; + onPause = true; + return clearInterval(countDown); + } else { + let setButton = document.getElementById("set"); + setButton.textContent = "Pause"; + onPause = false; + let timeRemaining = document.getElementById("timeRemaining"); + countDown = setInterval(function () { + let minLeft = Math.floor(timeLeft / 60); + let secLeft = timeLeft % 60; + timeRemaining.textContent = `Time Remaining: ${("0" + minLeft).slice( + -2 + )}:${("0" + secLeft).slice(-2)}`; + if (!timeLeft) { + playAlarm(); + flashBack(); + isPause = false; + onAlarm = true; + setButton.textContent = "Set Alarm"; + return clearInterval(countDown); + } + timeLeft--; + }, 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..bb7fcf9 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 - + - + + diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js index 39ab245..e6048b0 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js +++ b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js @@ -490,3 +490,44 @@ const quotes = [ author: "Zig Ziglar", }, ]; + +let colors = ["#70B7D6", "#9C70D6", "#D6CD70", "#D6707C", "#0D2958"]; + +let div = document.createElement("div"); +div.style.backgroundColor = "white"; +div.style.margin = "auto"; +div.style.marginTop = "250px"; +div.style.width = "500px"; +div.style.hight = "500px"; +div.style.alignContent = "center"; +div.style.padding = "50px"; + +let p = document.createElement("p"); +let p1 = document.createElement("p"); +p.style.fontWeight = "bold"; +p1.style.textAlign = "right"; + +document.body.appendChild(div); + +let btn = document.createElement("button"); +btn.innerText = "New quote"; +//btn.style."; +div.appendChild(p); +div.appendChild(p1); +div.appendChild(btn); + + + +function getQoute() { + let newQuote = pickFromArray(quotes); + let qouteColor = pickFromArray(colors); + let p = document.querySelectorAll("p"); + p[0].innerText = newQuote.quote; + p[1].innerText = newQuote.author; + p[0].style.color = qouteColor; + p[1].style.color = qouteColor; + document.body.style.backgroundColor = qouteColor; +} +getQoute(); + +btn.addEventListener("click", getQoute); diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css index 63cedf2..e69de29 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/style.css +++ b/Week-3/Homework/mandatory/2-quotegenerator/style.css @@ -1 +0,0 @@ -/** Write your CSS in here **/ diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html index 39cd40e..4f119eb 100644 --- a/Week-3/Homework/mandatory/3-slideshow/index.html +++ b/Week-3/Homework/mandatory/3-slideshow/index.html @@ -2,7 +2,7 @@ Slideshow - + + diff --git a/Week-3/Homework/mandatory/3-slideshow/pict/fireStation.jpg b/Week-3/Homework/mandatory/3-slideshow/pict/fireStation.jpg new file mode 100644 index 0000000..e895696 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/pict/fireStation.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/pict/flower.jpg b/Week-3/Homework/mandatory/3-slideshow/pict/flower.jpg new file mode 100644 index 0000000..cbd8758 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/pict/flower.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/pict/highroad.jpg b/Week-3/Homework/mandatory/3-slideshow/pict/highroad.jpg new file mode 100644 index 0000000..b57491b Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/pict/highroad.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/pict/hotel.jpg b/Week-3/Homework/mandatory/3-slideshow/pict/hotel.jpg new file mode 100644 index 0000000..eaeed06 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/pict/hotel.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js index b55091c..c5853b1 100644 --- a/Week-3/Homework/mandatory/3-slideshow/slideshow.js +++ b/Week-3/Homework/mandatory/3-slideshow/slideshow.js @@ -1 +1,113 @@ -// Write your code here +// Array of images. +let imgs = [ + { src: "pict/flower.jpg", alt: "flower" }, + { src: "pict/fireStation.jpg", alt: "fire station" }, + { src: "pict/hotel.jpg", alt: "hotel" }, + { src: "pict/highroad.jpg", alt: "highroad" }, +]; +// Ctreate an element for displaying images +let div = document.createElement("div"); +div.style.border = "solid green 15px"; +// Create image element +document.body.appendChild(div); +let img = document.createElement("img"); + +// Set styles +img.style.height = "100%"; +img.style.width = "100%"; +div.style.width = "70%"; + +div.appendChild(img); +// Initialize counter and display first image +var count = 0; +img.src = imgs[count].src; +img.alt = imgs[count].alt; + +// Create buttons +let btnAutoBack = document.createElement("button"); +let btnBack = document.createElement("button"); +let btnStop = document.createElement("button"); +let btnForward = document.createElement("button"); +let btnAutoForward = document.createElement("button"); +// Create container for the buttons +let btnHolder = document.createElement("div"); +document.body.appendChild(btnHolder); +btnHolder.style.width = "70%"; + +// Set styles for the buttons +btnAutoBack.style.height = "50px"; +btnAutoBack.style.width = "20%"; +btnBack.style.height = "50px"; +btnBack.style.width = "20%"; +btnStop.style.height = "50px"; +btnStop.style.width = "20%"; +btnForward.style.width = "20%"; +btnForward.style.height = "50px"; +btnAutoForward.style.height = "50px"; +btnAutoForward.style.width = "20%"; + +// Layout of the buttons +document.body.style.display = "flex"; +document.body.style.flexWrap = "wrap"; +document.body.style.justifyContent = "center"; + +// Set names of the buttons +btnAutoBack.innerText = "Auto back"; +btnBack.innerText = "Back"; +btnStop.innerText = "Stop"; +btnForward.innerText = "Forward"; +btnAutoForward.innerText = "Auto forward"; + +// Add the buttons to the container +btnHolder.appendChild(btnAutoBack); +btnHolder.appendChild(btnBack); +btnHolder.appendChild(btnStop); +btnHolder.appendChild(btnForward); +btnHolder.appendChild(btnAutoForward); + + +// Initialize auto mode +let auto = false; +// Definition of moving images function +function moveImg(forward = true) { + if (forward) { + if (count < imgs.length - 1) { + count++; + } else { + count = 0; + } + } else { + if (!count) { + count = imgs.length; + } + count--; + } + img.src = imgs[count].src; + img.alt = imgs[count].alt; +} + +// Add event listener to Back button +btnBack.addEventListener("click", () => !auto ? moveImg(false): NaN); +// Add event listener to Auto Forward button +btnForward.addEventListener("click",() => !auto ? moveImg(): NaN); + +let interval; + +btnAutoForward.addEventListener("click", () => { + if(!auto) + {auto = true; + interval = setInterval(moveImg, 1000);} +}); + +btnAutoBack.addEventListener("click", () => { + if(!auto) + {auto = true; + interval = setInterval(() => moveImg(false), 1000);} +}); + +function stop(){ + auto = false; + clearInterval(interval); +} +// Add event listener to Stop button +btnStop.addEventListener("click", stop); diff --git a/Week-3/Homework/mandatory/3-slideshow/style.css b/Week-3/Homework/mandatory/3-slideshow/style.css index 63cedf2..e69de29 100644 --- a/Week-3/Homework/mandatory/3-slideshow/style.css +++ b/Week-3/Homework/mandatory/3-slideshow/style.css @@ -1 +0,0 @@ -/** Write your CSS in here **/ diff --git a/Week-3/InClass/Callbacks/exercise-2/exercise.js b/Week-3/InClass/Callbacks/exercise-2/exercise.js index eca9595..576c582 100644 --- a/Week-3/InClass/Callbacks/exercise-2/exercise.js +++ b/Week-3/InClass/Callbacks/exercise-2/exercise.js @@ -1,6 +1,7 @@ /* ================ Exercise 2 + ---------- You are given the following list of movies @@ -62,9 +63,112 @@ const movies = [ ]; // create showMovies function +let allMovies = document.getElementById("all-movies"); +let movieNumber = document.getElementById("movies-number"); +function myMovies() { + movies.forEach(function (movie) { + let pElement = document.createElement("p"); + + let quoteString = `${movie.title} directed by ${movie.director}`; + allMovies.appendChild(pElement); + pElement.innerHTML = quoteString; + }); + movieNumber.innerText = movies.length; +} +setTimeout(myMovies, 1000); // create a new movie object for your favorite movie +let newMovie = { + title: "Pursuit of happiness", + director: "Gabriele Muccino", + type: "drama", + haveWatched: true, +}; // create addMovies function +function addMovies(movie) { + movies.push(movie); + let deleteEl = allMovies.querySelectorAll("p"); + deleteEl.forEach((p, index) => (index ? allMovies.removeChild(p) : NaN)); + myMovies(); +} +setTimeout(addMovies, 2000, newMovie); + +// Create a break line element +var br = document.createElement("br"); +function createForm() { + var form = document.createElement("form"); + form.setAttribute("method", "post"); + form.setAttribute("action", "submit"); + + // Create an input element for title + var title = document.createElement("input"); + title.setAttribute("type", "text"); + title.setAttribute("name", "title"); + title.setAttribute("placeholder", "title"); + title.setAttribute("id", "title"); + + // Create an input element for director + var director = document.createElement("input"); + director.setAttribute("type", "text"); + director.setAttribute("name", "director"); + director.setAttribute("placeholder", "director"); + director.setAttribute("id", "director"); + + // Create an input element for type + var type = document.createElement("input"); + type.setAttribute("type", "text"); + type.setAttribute("name", "type"); + type.setAttribute("placeholder", "type"); + type.setAttribute("id", "type"); + + // Create an input element for haveWatched + var haveWatched = document.createElement("input"); + haveWatched.setAttribute("type", "havewatched"); + haveWatched.setAttribute("name", "havewatched"); + haveWatched.setAttribute("placeholder", "havewatched"); + haveWatched.setAttribute("id", "havewatched"); + + // create a submit button + var s = document.createElement("input"); + s.setAttribute("type", "Submit"); + s.setAttribute("value", "Submit"); + + // Append the title input to the form + form.appendChild(title); + + // Inserting a line break + form.appendChild(br.cloneNode()); + + // Append the director to the form + form.appendChild(director); + form.appendChild(br.cloneNode()); + + // Append the type to the form + form.appendChild(type); + form.appendChild(br.cloneNode()); + + // Append the haveWatched to the form + form.appendChild(haveWatched); + form.appendChild(br.cloneNode()); + + // Append the submit button to the form + form.appendChild(s); + + document.body.appendChild(form); + + s.addEventListener("click", (event) => { + event.preventDefault(); + let myNewMovie = { + title: title.value, + director: director.value, + type: type.value, + haveWatched: havewatched.value, + }; + console.log(myNewMovie); + addMovies(myNewMovie); + }); +} +createForm();