CodeYourFuture · smkamaldar · Oct 12, 2021 · Oct 12, 2021 · Oct 14, 2021 · Oct 18, 2021
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,47 @@
-function setAlarm() {}
+let intervalId = null;
+let backgroundChangingId = null;
+let isPaused= false ;
+let color = "plum";
+
+
+function setAlarm() {
+  let inputValue = document.getElementById("alarmSet").value;
+  // setInterval has an id ,beacuse I want to clear the interval functionality. so I need to get access to that id
+  intervalId = setInterval(() => {
+    if(!isPaused){
+      updateAlarm(inputValue);
+      inputValue--;
+      if (inputValue < 0) {
+        // if time is less than zero then kill the interval 
+        clearInterval(intervalId);
+        playAlarm();
+      }
+    }
+  }, 1000);
+}
+
+// this function set the backgroundcolor for body also 
+// will toggle the color 
+function changeColor() {
+  document.body.style.backgroundColor = color;
+  color = color === "plum" ? "white" : "plum";
+}
+
+// calculates time and binds it to DOM
+function updateAlarm(value) {
+  const title = document.getElementById("timeRemaining");
+  let seconds = value % 60;
+  let minutes = Math.floor(value / 60);
+  let minZero = "";
+  let secondZero = "";
+  if (minutes < 10) {
+    minZero = 0;
+  }
+  if (seconds < 10) {
+    secondZero = 0;
+  }
+  title.innerText = `Time Remaining: ${minZero}${minutes}:${secondZero}${seconds}`;
+}
 
 // DO NOT EDIT BELOW HERE
 
@@ -10,16 +53,34 @@ function setup() {
   });
 
   document.getElementById("stop").addEventListener("click", () => {
+    stopAlarm();
+  });
+
+  document.getElementById("pause").addEventListener("click", () => {
     pauseAlarm();
+
   });
 }
 
+// runs when timer is reached zero
 function playAlarm() {
   audio.play();
+  backgroundChangingId = setInterval(changeColor, 500);
 }
 
-function pauseAlarm() {
+// is a callback for stop button. and 
+// stops the alarm , stops the backgroundChanging ,
+// sets the backgroundColor to the default color
+function stopAlarm() {
   audio.pause();
+  clearInterval(backgroundChangingId);
+  document.body.style.backgroundColor = "plum";
+}
+
+// inorder to my count down stop and restart,I need to tell my interval function
+// when to start.I can set a flag that if my flag is true ,count it down,else no action.
+function pauseAlarm(){
+  isPaused = !isPaused 
 }
 
 window.onload = setup;
diff --git a/mandatory/1-alarmclock/index.html b/mandatory/1-alarmclock/index.html
@@ -19,9 +19,10 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
         Set Time to:
         <input id="alarmSet" type="number" />
       </div>
-      <div>
+      <div class="btn">
         <button id="set" type="button">Set Alarm</button>
         <button id="stop" type="button">Stop Alarm</button>
+        <button id="pause" type="button">Pause Alarm</button>
       </div>
     </div>
     <script src="alarmclock.js"></script>

diff --git a/mandatory/1-alarmclock/style.css b/mandatory/1-alarmclock/style.css
@@ -1,3 +1,6 @@
+body{
+  background-color: plum;
+}
 .centre {
   position: fixed;
   top: 50%;
@@ -8,8 +11,17 @@
 
 #alarmSet {
   margin: 20px;
+
 }
 
 h1 {
   text-align: center;
 }
+.btn {
+  display: flex;
+  justify-content: space-around;
+}
+.btn button {
+    background-color: transparent;
+    font-weight: 800;
+}
diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
@@ -11,7 +11,13 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+    <div class="wrapper">
+      <div class="quotes_wrapper">
+        <h3 id="quote"></h3>
+        <p id="author"></p>
+        <button id="set" type="button">new quote</button>
+      </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,15 @@
+let quote = document.querySelector("#quote");
+const author = document.querySelector("#author");
+const button = document.querySelector("#set");
+
+button.addEventListener("click", () => {
+  // let randomQuote =quotes[Math.floor(Math.random()* quotes.length)] 
+  let randomQuote = pickFromArray(quotes);
+  console.log(quote);
+  console.log(randomQuote);
+  quote.innerText = randomQuote.quote;
+  author.innerText = randomQuote.author;
+});
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at

diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
@@ -1 +1,50 @@
 /** Write your CSS in here **/
+body{
+    padding: 0;
+    margin: 0;
+    background-color: coral;
+    color:coral ;
+    font-family:   Georgia, 'Times New Roman', Times, serif;
+}
+
+.quotes_wrapper{
+    padding: 20px;
+    background-color: white;
+    position:fixed;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    min-width: 700px;
+} 
+
+#quote::before{
+      content : '“';
+      font-size: 80px;
+      position: relative;
+      top:40px;
+}
+
+#author{
+    text-align: right;
+}
+
+#author::before{
+    content: '-';
+    padding-right: 6px;
+}
+
+#set{
+    color: white;
+    border : none ;
+    width: 100px;
+    float: right;
+    border: 0;
+    background: coral;
+    box-shadow: none;
+    border-radius: 0px;
+    outline: none;
+    font-size: 16px;
+    padding:8px;
+}
+
diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html
@@ -11,7 +11,18 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+    <div class="slideshow">
+      <h3 class="caption">Image Carousel</h3>
+      <img src=""></img>
+      <p id="counter"></p>
+      <div class="buttons">
+        <button class="button" id="backward">back</button>
+        <button class="button" id="forward">forward</button>
+        <button class="button" id="stop">stop</button>
+        <button class="button" id="auto-forward">auto forward</button>
+        <button class="button" id="auto-backward">auto backward</button>
+      </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,87 @@
 // Write your code here
+
+let activeImageIndex=0;
+let intervalId=null;
+const imageElement=document.querySelector("img")
+const backBtn=document.querySelector("#backward")
+const forwardBtn=document.querySelector("#forward")
+const counter=document.querySelector("#counter")
+const autoForwardBtn= document.querySelector("#auto-forward")
+const autoBackwardBtn=document.querySelector("#auto-backward")
+const stopBtn=document.querySelector("#stop")
+
+const images=[
+    "https://images.unsplash.com/photo-1560807707-8cc77767d783?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=435&q=80",
+    "https://images.unsplash.com/photo-1587463272361-565200f82b33?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80",
+    "https://images.unsplash.com/photo-1593134257782-e89567b7718a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=435&q=80",
+    "https://images.unsplash.com/photo-1620189507187-1ecc7e2e9cff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
+]
+
+imageElement.setAttribute("src",images[activeImageIndex]);
+// when page loads first picture doesnt have a back option,
+// so it shuld be disabled.
+backBtn.disabled= true
+counter.innerText= activeImageIndex +1 
+
+forwardBtn.addEventListener("click", ()=>{
+    activeImageIndex++
+    counter.innerText = activeImageIndex+1
+    imageElement.setAttribute("src",images[activeImageIndex])
+    if(activeImageIndex===images.length-1){
+        forwardBtn.disabled = true;
+    }
+    // beacuse we ve already move to the next picture.
+    // then make sense to enable the back button
+    backBtn.disabled=false;
+})
+
+backBtn.addEventListener("click", ()=>{
+    activeImageIndex--
+    counter.innerText = activeImageIndex+1
+    imageElement.setAttribute("src",images[activeImageIndex])
+    if(activeImageIndex===0){
+        backBtn.disabled = true;
+    }
+    forwardBtn.disabled=false;
+})
+
+
+autoForwardBtn.addEventListener("click",()=>{
+    // 
+        clearInterval(intervalId)
+        intervalId= setInterval(()=>{
+        activeImageIndex++
+        counter.innerText= activeImageIndex +1 
+        imageElement.setAttribute("src",images[activeImageIndex])
+        if(activeImageIndex===images.length-1){
+            forwardBtn.disabled = true
+            autoForwardBtn.disabled = true;
+            clearInterval(intervalId)
+        }
+        backBtn.disabled=false;
+        autoBackwardBtn.disabled=false
+    },1000)
+})
+
+
+
+autoBackwardBtn.addEventListener("click",()=>{
+        clearInterval(intervalId)
+        intervalId= setInterval(()=>{
+        activeImageIndex--
+        counter.innerText= activeImageIndex +1 
+        imageElement.setAttribute("src",images[activeImageIndex])
+        if(activeImageIndex===0){
+            backBtn.disabled= true
+            autoBackwardBtn.disabled = true
+            clearInterval(intervalId)
+        }
+        forwardBtn.disabled=false;
+        autoForwardBtn.disabled=false
+    },1000)
+})
+
+stopBtn.addEventListener("click",()=>{
+    clearInterval(intervalId)
+})
+