Maziar JS2 week 3

InClass/Callbacks/exercise-1/exercise.js

@@ -11,3 +11,13 @@ 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
 ================
 */
+const pageBackground = document.body;
+
+setTimeout(() => {
+  pageBackground.style.backgroundColor = "red";
+}, 5000);
+
+setInterval(function () {
+  var randomColor = Math.floor(Math.random() * 16777215).toString(16);
+  document.body.style.backgroundColor = "#" + randomColor;
+}, 1000);

InClass/Callbacks/exercise-2/exercise.js

@@ -62,7 +62,32 @@ const movies = [
 ];
 
 // create showMovies function
+const allMovies = document.getElementById("all-movies");
+const moviesNumber = document.getElementById("movies-number");
+function showMovies() {
+  for (let movie of movies) {
+    const pElement = document.createElement("p");
+    pElement.innerText = `Title: ${movie.title} \n Director: ${movie.director}`;
+    setTimeout(function () {
+      allMovies.appendChild(pElement);
+    }, 1000);
+    moviesNumber.innerText = movies.length;
+  }
+}
 
 // create a new movie object for your favorite movie
-
+const newMovie = {
+    title: "The Matrix",
+    director: "Wachowski Sisters",
+    type: "Sci-fi Action",
+    haveWatched: true,
+};
 // create addMovies function
+function addMovie(newMovie, callback) {
+  setTimeout(function() {
+    movies.push(newMovie);
+    callback();
+   }, 2000);
+};
+addMovie(newMovie, showMovies);
+

InClass/DOM-practice/main.js

@@ -1,10 +1,13 @@
-console.log("Testing JS file loaded!")
+console.log("Testing JS file loaded!");
 
 // Task 1
 
 // Without changing any of the HTML or CSS, update the <section> tags so that they have white backgrounds.
 
-
+const allSections = document.querySelectorAll("section");
+allSections.forEach((section) => {
+  section.style.backgroundColor = "white";
+});
 
 
 
@@ -15,11 +18,34 @@ 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 allImages = document.querySelectorAll("img");
 
+allImages.forEach((image) => {
+  image.className = "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 <section>.
+
+const lastParagraph = document.querySelectorAll("section p:last-of-type");
+
+lastParagraph.forEach((paragraph, index) => {
+  const message = document.createElement("span");
+
+  if (index === 0) {
+    message.innerText =
+      "Grace Hopper is Born in 9th Dec 1918 and died on 1st Jan 1992";
+  } else if (index === 1) {
+    message.innerText =
+      "Katherine Johnson is Born in 26th Aug 1918 and died on 24 Feb 2020";
+  } else {
+    message.innerText =
+      "Ada Lovelace is Born in 10th Dec 1815 and died on 27th Nov 1852";
+  }
+
+  paragraph.appendChild(message);
+});

mandatory/1-alarmclock/alarmclock.js

@@ -1,4 +1,40 @@
-function setAlarm() {}
+function setAlarm() {
+  // When the `Set Alarm` button is clicked, get the value of the input field
+  let alarmSet = document.getElementById("alarmSet").value;
+  let timeRemaining = document.getElementById("timeRemaining");
+  const bodyEl = document.querySelector("body");
+
+  // Update the `Time Remaining` title every second
+  let timer = setInterval(displayTimer, 1000);
+
+  function displayTimer() {
+    // When the remaining time left is 0, play the alarm sound
+    if (alarmSet < 0) {
+      playAlarm();
+      clearInterval(timer);
+      // When the remaining time left is 0, change bgColor every second
+      setInterval(function() {
+        bodyEl.style.background = randomColour();
+      }, 1000);
+    } else {
+      const numOfMinutes = Math.floor(alarmSet / 60);
+      let numOfSeconds = alarmSet % 60;
+      if (numOfSeconds < 10) {
+        numOfSeconds = `0${numOfSeconds}`;
+      }
+      timeRemaining.innerHTML = `Time Remaining: 0${numOfMinutes}:${numOfSeconds}`;
+      // Decrease the value of alarmSet by 1
+      alarmSet--;
+    }
+  }
+  // Function for random rgb values
+  function randomColour() {
+    let red = Math.floor(Math.random()*256);
+    let green = Math.floor(Math.random()*256);
+    let blue = Math.floor(Math.random()*256);
+    return `rgb(${red}, ${green}, ${blue})`;
+  }
+};
 
 // DO NOT EDIT BELOW HERE
 

mandatory/2-quotegenerator/index.html

@@ -12,6 +12,28 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+        <section class="Container">
+      <div class="quotes">
+        <span>
+          <i class="fa fa-quote-left" aria-hidden="true"></i>
+        </span>
+        <span id="quoteToDisplay">
+          Don't cry because it's over, smile because it happened.
+        </span>
+      </div>
+      <div class="authorName">
+           -- Dr Seus
+      </div>
+      <div class="QuotesButton">
+        <button id="newQuote">New Quotes</button>
+   </div>
+
+    </section>
+    <div id="quoteDisplay">
+      <h1 id="quote">"Life isn’t about getting and having, it’s about giving and being.</h1>
+      <h3 id="author">- Kevin Kruse</h3>
+      <button id="newQuoteBtn">New Quote</button>
+    </div>
     <script src="quotes.js"></script>
   </body>
 </html>

mandatory/2-quotegenerator/quotes.js

@@ -490,3 +490,18 @@ const quotes = [
     author: "Zig Ziglar",
   },
 ];
+
+window.onload=function (){
+  const buttonClick=document.getElementById('newQuote');
+  buttonClick.addEventListener('click',generateRandomQuote)
+}
+function generateRandomQuote(){
+  let quoteToDisplay=document.querySelector('#quoteToDisplay');
+let authorName= document.querySelector('.authorName');
+
+  let generateQuote=Math.floor(Math.random() * quotes.length);
+  //let generateQuote=pickFromArray();
+
+  quoteToDisplay.innerHTML=quotes[generateQuote].quote
+  authorName.innerHTML=quotes[generateQuote].author;
+}

mandatory/2-quotegenerator/style.css

@@ -1 +1,38 @@
 /** Write your CSS in here **/
+body{
+    background-color: orange;
+    font-size: 1.5rem;
+    min-height: 95vh;
+    display: flex;
+    align-items: center;
+}
+.Container{
+    width: 57%;
+    margin: 10rem auto 10rem auto;
+    padding: 5rem;
+    background: white;
+    color: orange;
+    transition: .8s all ease;
+}
+.Container:hover{
+    box-shadow: 2px 2px 19px 8px orangered;
+    transition: .8s all ease;
+}
+
+.quotes{
+    text-align: center;
+}
+
+.authorName , .QuotesButton{
+    font-size: 1.3rem;
+    text-align: end;
+    position: relative;
+    top: 28px;
+}
+#newQuote{
+    border: none;
+    background: orange;
+    color: white;
+    padding: 0.5rem;
+    margin-top: 3rem;
+} 

mandatory/3-slideshow/index.html

@@ -12,6 +12,15 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <h1>My Favorite Movies</h1>
+    <div id="images"></div>
+    <div id="control-buttons">
+      <button id="auto-back">Auto-Back</button>
+      <button id="back">Back</button>
+      <button id="forward">Forward</button>
+      <button id=auto-forward>Auto-Forward</button>
+    </div>
     <script src="slideshow.js"></script>
+
   </body>
 </html>

mandatory/3-slideshow/slideshow.js

@@ -1 +1,64 @@
 // Write your code here
+/* Movies Array*/
+let movies = [
+  {
+    name: "Star Wars",
+    photo:
+      "   https://www.wallpaperflare.com/static/830/23/587/star-wars-episode-v-the-empire-strikes-back-star-wars-movies-minimalism-wallpaper-preview.jpg ",
+  },
+  {
+    name: "The Matrix",
+    photo:
+      " https://64.media.tumblr.com/91f52250cafef33f9944af7161648107/tumblr_ndr4eao9Kl1r046dfo1_1280.jpg",
+  },
+  {
+    name: " Pulp Fiction",
+    photo:
+      " https://weandthecolor.com/wp-content/uploads/2013/06/Pulp-Fiction-Kit-Minimalist-Poster-Illustration-by-Aliz%C3%A9e-Lafon.jpg",
+  },
+  {
+    name: "Godfather",
+    photo:
+      "https://i.etsystatic.com/9265778/r/il/763411/575418056/il_1140xN.575418056_k1y2.jpg",
+  },
+  {
+    name: "Lord Of The Rings",
+    photo:
+      "https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e7fff7d9-172f-4800-b905-134ccf130e4d/d78la91-080239a7-679c-4c8c-bf61-77d8a29d38cb.jpg/v1/fill/w_1024,h_1449,q_75,strp/lord_of_the_rings_3___minimalist_poster_by_tchav_d78la91-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTQ0OSIsInBhdGgiOiJcL2ZcL2U3ZmZmN2Q5LTE3MmYtNDgwMC1iOTA1LTEzNGNjZjEzMGU0ZFwvZDc4bGE5MS0wODAyMzlhNy02NzljLTRjOGMtYmY2MS03N2Q4YTI5ZDM4Y2IuanBnIiwid2lkdGgiOiI8PTEwMjQifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.RGmJA7Dmdoxq7lA79Z9sOtQc6mwVqHs4L7lO8JBCGus",
+  },
+];
+//Setting up variables and creating other elements
+let image = document.createElement("img");
+let imageDiv = document.getElementById("images");
+imageDiv.appendChild(image);
+let i = 0;
+image.src = movies[i].photo;
+image.className = "photo-properties";
+/*Event Listeners*/
+//Forward Button Functionality
+function forwarding() {
+  i++;
+  if (i > movies.length) i = 0;
+  image.src = movies[i].photo;
+}
+let forward = document.getElementById("forward");
+forward.addEventListener("click", forwarding);
+//Back Button Functionality
+function goingBack() {
+  i--;
+  if (i < 0) i = movies.length - 1;
+  image.src = movies[i].photo;
+}
+let backwards = document.getElementById("back");
+backwards.addEventListener("click", goingBack);
+//Auto Back
+let autoReverse = document.getElementById("auto-back");
+autoReverse.addEventListener("click", function () {
+  setInterval(goingBack, 3000);
+});
+
+//Auto Forward Button Functionality
+let autoForwardMode = document.getElementById("auto-forward");
+autoForwardMode.addEventListener("click", function () {
+  setInterval(forwarding, 3000);
+});

mandatory/3-slideshow/style.css

@@ -1 +1,19 @@
 /** Write your CSS in here **/
+.photo-properties{
+    width:50%;
+    height: 50%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+h1{
+    text-align: center;
+}
+button{
+    margin-top: 20px;
+
+}
+button:first-of-type{
+    margin-left: 35%;
+
+}