CodeYourFuture · teejad · Oct 15, 2021
diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
@@ -11,3 +11,5 @@ 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
 ================
 */
+
+
diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js
@@ -17,7 +17,9 @@ Create a new function called "addMovie"
 - it adds the new movie to the list of movies after 2 seconds. Remember to setTimeout to achieve that
 Call addMovies to add the new movie to the list and then showMovies to see the movies added on the screen.
 How many movies can you see on your page?
-
+*/
+// function addMovie(movieObj)
+/*
 Task 3
 Can you make sure the new movie you just added is showing on the screen? 
 TIP: use callbacks
@@ -61,6 +63,24 @@ const movies = [
   },
 ];
 
+
+
+function showMovies (){
+  movies.forEach((movie)=>{
+    let para = document.createElement("p");
+    para.textContent = `${movies.title}, ${movies.director}`;
+    let allMovies = document.getElementById("all-movies");
+    allMovies.appendChild(para);
+
+  });
+  let alert = document.querySelector(".alert");
+  alert.textContent = movies.length; 
+
+
+}
+setTimeout(showMovies, 2000)
+
+
 // create showMovies function
 
 // create a new movie object for your favorite movie

diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,38 @@
-function setAlarm() {}
+
+function setAlarm() {
+  let timeRemaining = document.getElementById("timeRemaining");
+  let setter = document.getElementById("alarmSet").value;
+
+  let minutes = Math.floor(setter / 60);
+  let seconds = setter % 60;
+
+  let timeInterval = setInterval(() => {
+      if (minutes > 0 && seconds === 0) {
+          minutes--;
+          seconds = 59;
+      }
+
+      if (seconds === 0) {
+          clearInterval(timeInterval);
+          audio.play();
+
+          let div = document.querySelector(".centre");
+
+          function changeColour() {
+              if (div.style.backgroundColor === "green") {
+                  div.style.backgroundColor = "yellow";
+              } else {
+                  div.style.backgroundColor = "blue";
+              }
+          }
+
+          setInterval(changeColour, 500);
+      }
+
+      timeRemaining.textContent = `Time Remaining: ${minutes} : ${seconds}`;
+      seconds--;
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
@@ -12,6 +12,30 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+
+ <div class="container">
+    <div class="row">
+      <div class="col-xs-12 col-sm-3"></div>
+      <div class="col-xs-12 col-sm-6 quotebox">
+        <div class="row">
+          <div class="col-xs-12">
+            <blockquote>
+              <i class="fa fa-quote-left quotemark"></i>
+              <h2 id="quotetext">Get Your Daily Quote</h2>
+              <footer id="quotesource"></footer>
+            </blockquote>
+          </div>
+        </div>
+
+            <div class="quotebutton"><button class="btn btn-primary" id="newquote">New Quote</button></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-3"></div>
+    </div>
+  </div> 
+
     <script src="quotes.js"></script>
   </body>
 </html>
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
@@ -1,3 +1,22 @@
+
+const quote = document.getElementById("quotetext");
+const author = document.getElementById("quotesource");
+const quotebutton = document.getElementById("newquote");
+
+quotebutton.addEventListener("click", () => {
+  const randomQuote = pickFromArray(quotes);
+   quote.innerHTML = `"${randomQuote.quote}"`;
+   author.innerText = randomQuote.author;
+  console.log("click",randomQuote.author)
+});
+
+
+function firstRun() {
+  randomQuote();
+  setInterval(randomQuote, 60);
+}
+
+setTimeout(firstRun, 20);
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at
@@ -15,7 +34,8 @@
 // ---------------
 // pickFromArray([1,2,3,4])     //maybe returns 2
 // pickFromArray(coloursArray)  //maybe returns "#F38630"
-//
+
+
 // You DO NOT need to understand how this function works.
 function pickFromArray(choices) {
   return choices[Math.floor(Math.random() * choices.length)];

diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
@@ -1 +1,102 @@
-/** Write your CSS in here **/
+/* Write your CSS in here*/
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  font-family: "Raleway", sans-serif;
+}
+
+h1 {
+  font-size: 35px;
+}
+h2 {
+  font-size: 30px;
+}
+h3 {
+  font-size: 25px;
+}
+p {
+  font-size: 16px;
+}
+
+body {
+  background: #490a3d;
+}
+.quotemark {
+  position: relative;
+  top: -12px;
+  padding-right: 10px;
+}
+
+blockquote {
+  border-left: 10px solid #490a3d;
+  margin: 30px 30px;
+  padding: 10px 30px;
+}
+blockquote:before {
+  color: #ccc;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+}
+blockquote h1,
+h2,
+h3,
+p {
+  display: inline;
+}
+blockquote footer {
+  font-size: 18px;
+  text-align: right;
+  color: rgb(0, 0, 0);
+}
+
+.container {
+  max-height: 800px;
+  margin: 10% auto auto auto;
+}
+.quotebox {
+  background: #fff;
+  max-width: 500px;
+  min-height: 100px;
+  border: 1px solid #222;
+  border-radius: 5px;
+  margin: 10px;
+}
+
+.quotebutton {
+  display: inline-block;
+  padding: 6px 12px;
+}
+#quotesource {
+  margin-top: 20px;
+}
+
+.btn {
+  margin-bottom: 10px;
+}
+
+.btn-primary {
+  width: 140px;
+  height: 40px;
+  border: none;
+  background: #490a3d;
+}
+
+@media only screen and (max-width: 768px) {
+  #quotetext {
+    font-size: 25px;
+  }
+  .container {
+    margin-right: 20px;
+  }
+}
+@media only screen and (max-width: 320px) {
+  #quotetext {
+    font-size: 18px;
+  }
+}
diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html
@@ -12,6 +12,12 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <h1>FALL 2021</h1>
+    <div id="slide">
+      <div class="button" id="previous">&laquo</div>
+      <div class="items"></div>
+      <div class="button" id="next">&raquo</div>
+  </div>
     <script src="slideshow.js"></script>
   </body>
 </html>
diff --git a/mandatory/3-slideshow/slideshow.js b/mandatory/3-slideshow/slideshow.js
@@ -1 +1,44 @@
 // Write your code here
+'use strict'
+
+const images = [
+    { 'id': '1', 'url': 'https://images.unsplash.com/photo-1634139104613-56ee22e1c0a8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1771&q=80'},
+    { 'id': '2', 'url': 'https://images.unsplash.com/photo-1482015527294-7c8203fc9828?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1770&q=80' },
+    { 'id': '3', 'url': 'https://images.unsplash.com/photo-1510307853572-cd978ae81304?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1770&q=80' },
+    { 'id': '4', 'url': 'https://images.unsplash.com/photo-1512080111770-7e3411c1e613?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1674&q=80' },
+    { 'id': '5', 'url': 'https://images.unsplash.com/photo-1532767551683-39dfc14c40bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2231&q=80' },
+    { 'id': '6', 'url': 'https://images.unsplash.com/photo-1478641396229-e6f88f6e31b3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1770&q=80' },
+    { 'id': '7', 'url': 'https://images.unsplash.com/photo-1606035325719-2bda1005a0fa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2994&q=80' }
+]
+
+const container = document.querySelector('.items')
+
+const loadImages = (images, container) => {
+    images.forEach( image => {
+        container.innerHTML += `
+            <div class='item'>
+                <img src='${image.url}'>
+            </div>
+        `
+    })
+}
+
+loadImages(images, container)
+
+let items = document.querySelectorAll('.item')
+
+const previous = () => {
+    container.appendChild(items[0])
+    items = document.querySelectorAll('.item')
+}
+const next = () =>{
+    const lastItem = items[items.length - 1]
+    container.insertBefore(lastItem, items[0])
+    items = document.querySelectorAll('.item')
+}
+
+document.getElementById('previous').addEventListener('click', previous)
+document.getElementById('next').addEventListener('click', next)
+
+
+setInterval(previous, 5000)
diff --git a/mandatory/3-slideshow/style.css b/mandatory/3-slideshow/style.css
@@ -1 +1,60 @@
 /** Write your CSS in here **/
+body {
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  min-height: 100vh;
+  justify-content: center;
+
+  background-color: #cecece;
+  font-family: sans-serif;
+}
+h1 {
+  font-style: oblique;
+  color: peru;
+}
+
+#slide {
+  display: flex;
+  justify-content: space-between;
+  background-color: aqua;
+  width: 633px;
+  height: 384px;
+  margin-left: 8;
+}
+.items {
+  position: absolute;
+  display: flex;
+  width: 633px;
+  height: 384px;
+  background-color: bisque;
+  overflow: hidden;
+}
+.item {
+  transition: all 1s;
+}
+.item:first-child {
+  margin-left: -100%;
+}
+.item img {
+  width: 633px;
+  height: 384px;
+}
+.button {
+  font: bold 30px sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  color: #00000000;
+  user-select: none;
+  z-index: 1;
+
+  transition: all 1s;
+}
+
+.button:hover {
+  color: #ffffff;
+  background-color: #00000055;
+  cursor: pointer;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,3 +11,5 @@ 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
		================
		*/