diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js index 40f06b0..3b3ee65 100644 --- a/InClass/Callbacks/exercise-1/exercise.js +++ b/InClass/Callbacks/exercise-1/exercise.js @@ -10,4 +10,21 @@ 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 +*/ + +//Task 1 + // setTimeout(function bgColor() { + // document.body.style.backgroundColor = "blue"; + // },5000); + + +// Task-2 + + +setInterval( + function () { + //random hex colors generated + let randomColor = Math.floor(Math.random()*16777215).toString(16); + // let randomColor = Math.floor(Math.random() * 255); + document.body.style.backgroundColor = "#"+randomColor; + },5000); \ No newline at end of file diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js index eca9595..0931034 100644 --- a/InClass/Callbacks/exercise-2/exercise.js +++ b/InClass/Callbacks/exercise-2/exercise.js @@ -62,9 +62,42 @@ const movies = [ ]; // create showMovies function +function showMovies(movies){ + const allMovies = document.getElementById("all-movies") + movies.forEach((movie) =>{ + let newPara = document.createElement('p'); + newPara.innerHTML = `${movie.title} by ${movie.director}`; + allMovies.appendChild(newPara); + }) + document.getElementById("movies-number").innerHTML = movies.length;; +} + showMovies(movies); +// setTimeout(showMovies, 3000); // create a new movie object for your favorite movie +const myMovie = []; + +setTimeout(function addMovie(){ + movies.map((movie) => { + if(movie.haveWatched === true){ + myMovie.push(movie); + } + }) + // return myMovie; + let newh1 = document.createElement("h1"); + newh1.innerHTML = "My favourite Movies"; + document.getElementById("all-movies").appendChild(newh1); + //call-back + showMovies(myMovie);} + , 2000); + + + + + + + // create addMovies function diff --git a/InClass/DOM-practice/index.html b/InClass/DOM-practice/index.html index 9c78866..2ea7481 100644 --- a/InClass/DOM-practice/index.html +++ b/InClass/DOM-practice/index.html @@ -3,7 +3,7 @@ - The Mothers of Tech + The Mothers of Tech diff --git a/InClass/DOM-practice/main.js b/InClass/DOM-practice/main.js index be9f609..d43baa1 100644 --- a/InClass/DOM-practice/main.js +++ b/InClass/DOM-practice/main.js @@ -4,10 +4,10 @@ console.log("Testing JS file loaded!") // Without changing any of the HTML or CSS, update the
tags so that they have white backgrounds. - - - - + const sec = document.getElementsByTagName('section'); + for(let i = 0; i < sec.length; i++){ + sec[i].style.backgroundColor = "white"; + } // Task 2 @@ -15,11 +15,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. +const images = document.getElementsByTagName('img'); +console.log(images); + for(let j = 0; j < images.length; j++){ + images[j].classList.add("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
. +const para1 = sec[0].getElementsByTagName("p"); +para1[2].append(" She was born in 9th December, 1906."); -// Task 3 +const para2 = sec[1].getElementsByTagName("p"); + para2[1].append(" She was born in 27th August, 1918"); -// 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
. + const para3 = sec[2].getElementsByTagName("p"); + console.log(para3); + para3[3].append(" She was born in 27th November, 1852") + + \ No newline at end of file diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..6a0da83 100644 --- a/mandatory/1-alarmclock/alarmclock.js +++ b/mandatory/1-alarmclock/alarmclock.js @@ -1,4 +1,13 @@ -function setAlarm() {} +function setAlarm() { + // let timeRemainCounter = document.getElementById("timeRemaining"); + // let inputText = document.getElementById("alarmSet"); + // let btnSet = document.getElementById("set"); + // let btnStop = document.getElementById("stop"); + // console.log(inputText.value); + let timeRemainingValue = inputText.value; + timeRemainingValue--; + timeRemainCounter.innerHTML = `Time Remaining: 00:0${timeRemainingValue}`; +} // DO NOT EDIT BELOW HERE diff --git a/mandatory/1-alarmclock/index.html b/mandatory/1-alarmclock/index.html index ab7d582..f931317 100644 --- a/mandatory/1-alarmclock/index.html +++ b/mandatory/1-alarmclock/index.html @@ -2,14 +2,12 @@ Alarm Clock - - + crossorigin="anonymous"/> + @@ -24,5 +22,6 @@

Time Remaining: 00:00

+ diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html index b6115be..5d80604 100644 --- a/mandatory/2-quotegenerator/index.html +++ b/mandatory/2-quotegenerator/index.html @@ -2,7 +2,6 @@ Quote Generator - +
+

+

+ +
+ diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js index 39ab245..77ede9c 100644 --- a/mandatory/2-quotegenerator/quotes.js +++ b/mandatory/2-quotegenerator/quotes.js @@ -1,3 +1,9 @@ + + + + + + // DO NOT EDIT BELOW HERE // A function which will return one item, at @@ -490,3 +496,18 @@ const quotes = [ author: "Zig Ziglar", }, ]; + + +let btn = document.getElementById("quote-btn"); + + function randomQuoteGenerator() { + let quoteText = document.getElementById("quote"); + let para = document.getElementById("quote-author"); + randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; + quoteText.innerText = randomQuote.quote; + para.innerHTML = "- " + randomQuote.author; +} +// quoteFromArr(); +// console.log(btn); +window.onload = randomQuoteGenerator(); +btn.addEventListener("click", randomQuoteGenerator); diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css index 63cedf2..b5ed6fb 100644 --- a/mandatory/2-quotegenerator/style.css +++ b/mandatory/2-quotegenerator/style.css @@ -1 +1,34 @@ /** Write your CSS in here **/ +body{ + background-color: rgb(241, 252, 252); +} +#quote-container{ + position: absolute; + top: 25%; + left: 25%; + background-color: antiquewhite; + display: block; + margin: 0 auto; + width: 60%; + height: 350px; + text-align: center; +} + +#quote-btn{ + position:absolute; + top: 300px; + left: 85%; + background-color: rgb(242, 245, 216); +} +#quote{ + position: relative; + padding-top: 60px; + font-family:Verdana, Geneva, Tahoma, sans-serif; +} + +#quote-author{ + text-align: right; + padding-right: 50px; + font-size: 1.4rem; + +} diff --git a/mandatory/3-slideshow/example-screenshots/Images.js b/mandatory/3-slideshow/example-screenshots/Images.js new file mode 100644 index 0000000..72f3ef1 --- /dev/null +++ b/mandatory/3-slideshow/example-screenshots/Images.js @@ -0,0 +1,23 @@ +export const images = [ + { + name: "image-1", + src: "https://images.unsplash.com/photo-1611185772530-2ab31d6ba876?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1349&q=80", + }, + + { + name: "image-2", + src: "https://images.unsplash.com/photo-1611329532992-0b7ba27d85fb?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTN8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", + }, + { + name: "image-3", + src: "https://images.unsplash.com/photo-1599108656750-54572dae5c9f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTd8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", + }, + { + name: "image-4", + src: "https://images.unsplash.com/photo-1583160593462-6cbf88f6b165?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjF8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", + }, + { + name: "image-5", + src: "https://images.unsplash.com/photo-1602131029384-a2ebef3ea73b?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NTB8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", + }, +]; diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html index 39cd40e..fddd586 100644 --- a/mandatory/3-slideshow/index.html +++ b/mandatory/3-slideshow/index.html @@ -2,7 +2,6 @@ Slideshow - +
+

Image Slideshow

+ + + + + + +
+ diff --git a/mandatory/3-slideshow/slideshow.js b/mandatory/3-slideshow/slideshow.js index b55091c..c1552ab 100644 --- a/mandatory/3-slideshow/slideshow.js +++ b/mandatory/3-slideshow/slideshow.js @@ -1 +1,80 @@ // Write your code here +import images from "./Images.js"; +// const images = [ +// { +// name: "image-1", +// src: "https://images.unsplash.com/photo-1611185772530-2ab31d6ba876?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1349&q=80", +// }, + +// { +// name: "image-2", +// src: "https://images.unsplash.com/photo-1611329532992-0b7ba27d85fb?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTN8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", +// }, +// { +// name: "image-3", +// src: "https://images.unsplash.com/photo-1599108656750-54572dae5c9f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTd8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", +// }, +// { +// name: "image-4", +// src: "https://images.unsplash.com/photo-1583160593462-6cbf88f6b165?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjF8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", +// }, +// { +// name: "image-5", +// src: "https://images.unsplash.com/photo-1602131029384-a2ebef3ea73b?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NTB8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", +// }, +// ]; + +// timer handle for SetTimeout +let timer = 0; +let counter = 0; +let btnForward = document.getElementById("forwardBtn"); +let btnBackward = document.getElementById("backwardBtn"); +let btnAuto = document.getElementById("autoBtn"); +let btnStop = document.getElementById("autoStop"); + +function slideShow() { + let imageId = document.getElementById("carouselImage"); + imageId.setAttribute("src", images[counter].src); +} + +btnForward.addEventListener("click", () => { + counter++; + slideShow(); + // loops over the images + // console.log(counter); + if (counter === images.length - 1) { + counter = 0; + } +}); + +btnBackward.addEventListener("click", () => { + // loops over the images + console.log(counter); + if (counter === 0) { + counter = 4; + } + slideShow(); + counter--; +}); + +function autoSlide() { + counter++; + slideShow(); + // loops over the images + // console.log(counter); + if (counter === images.length - 1) { + counter = 0; + } +} + +//auto slide show btn +btnAuto.addEventListener("click", () => { + timer = setInterval(autoSlide, 2000); +}); + +//stops auto loop +btnStop.addEventListener("click", () => { + clearTimeout(timer); +}); + +window.onload = slideShow; diff --git a/mandatory/3-slideshow/style.css b/mandatory/3-slideshow/style.css index 63cedf2..883b5b5 100644 --- a/mandatory/3-slideshow/style.css +++ b/mandatory/3-slideshow/style.css @@ -1 +1,15 @@ /** Write your CSS in here **/ +#imageContainer{ + display: block; + margin: 0 auto; + background-color: rgb(215, 243, 250); + width: 50%; + text-align: center; + +} +#carouselImage{ + position: relative; + width: 100%; + height: 400px; + +} \ No newline at end of file