CodeYourFuture · zubedauk · Jul 30, 2020 · Jul 30, 2020 · Aug 1, 2020 · Aug 1, 2020
diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js
@@ -1,5 +1,49 @@
-function setAlarm() {}
 
+function setAlarm(){
+
+  let time=parseInt(input.value);
+  if(time>0){
+      if(time<10){
+        time=`0${time}`;
+      }
+      else{
+        time=`${time}`;
+      }
+
+    display.textContent=`Time Remaining:00:${time}`;
+    time=parseInt(time);
+    let timeOver=setTimeout(function(){
+      document.querySelector("body").style.backgroundColor="red";
+        playAlarm();
+        clearInterval(timeOver);
+        return;
+     },time*1000);
+    let countDown=setInterval(function(){
+      time--;
+      if(time<0){
+        clearInterval(countDown);
+        return;
+      }
+      display.textContent=`Time Remaining:00:${time}`;
+    },1000);
+  }
+  else{
+    //document.querySelector("#timeRemaining").textContent=`Time Remaining: 00:`2`;
+
+  }
+}
+
+let display=document.querySelector("#timeRemaining");
+
+display.style.fontSize="24px";
+let input=document.querySelector("#alarmSet");
+let btnSet=document.querySelector("#set");
+btnSet.addEventListener("click",setAlarm());
+let stopAlarm=document.querySelector("#stop");
+//stopAlarm.className="centre";
+stopAlarm.addEventListener("click",function(){
+  pauseAlarm();
+})
 // DO NOT EDIT BELOW HERE
 
 var audio = new Audio("alarmsound.mp3");

diff --git a/Week-3/Homework/mandatory/1-alarmclock/index.html b/Week-3/Homework/mandatory/1-alarmclock/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Alarm Clock</title>
-    <script src="alarmclock.js"></script>
+   <!--<script src="alarmclock.js"></script>--> 
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -24,5 +24,6 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
         <button id="stop" type="button">Stop Alarm</button>
       </div>
     </div>
+    <script src="alarmclock.js"></script>
   </body>
 </html>
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html
@@ -2,16 +2,26 @@
 <html>
   <head>
     <title>Quote Generator</title>
-    <script src="quotes.js"></script>
+
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
       integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
       crossorigin="anonymous"
     />
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <main class="main">
+        <div class="quote">
+            <h4>
+              Strive not to be a success, but rather to be of value.
+            </h4>
+            <h6>by:Albert Einstein</h6>
+            <button class="btn">New quote</button>
+        </div>
+    </main>
+    <script src="./quotes.js"></script>
   </body>
 </html>
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js
@@ -1,3 +1,16 @@
+let btn=document.querySelector(".btn");
+
+function quote(index){
+  return quotes[index].quote;
+}
+btn.addEventListener("click",function(event){
+  let index=Math.floor(Math.random()*quotes.length);
+
+  document.querySelector("h4").textContent=quote(index);
+  document.querySelector("h6").textContent=`by:${quotes[index].author}`;
+
+});
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at

diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css
@@ -1 +1,47 @@
 /** Write your CSS in here **/
+*{
+    margin: 0;
+    padding: 0;
+}
+.main{
+    font-size:10px;
+    width:100vw;
+    height: 100vh;
+    background-color: rgb(238, 138, 16);
+    color:  red;
+    font-family: monospace;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.quote{
+    background-color: white; 
+    width:50%;
+    height:auto;
+    padding: 5px;
+    color: rgb(238, 138, 16);
+
+}
+h4{
+font-size:12px;
+}
+h6{
+ text-align: right;
+ font-size: 0.5rem;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ width:100%;
+
+
+}
+.btn{
+    float: right;
+    width:5rem;
+    height:1.5rem;
+    font-size:0.5rem;
+    color:white;
+    outline: 0;
+    border: 0;
+    font-weight: 800;
+    background-color: rgb(238, 138, 16);
+}
diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html
@@ -1,17 +1,36 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Slideshow</title>
-    <script src="slideshow.js"></script>
+
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
       integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
       crossorigin="anonymous"
     />
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="./style.css" />
+
   </head>
   <body>
-    <!-- Write your HTML in here -->
+    <div class="container">
+      <main class="main">
+          <h4>Lovely Cats</h4>
+          <div class="img-container">
+            <img src="" 
+            alt="img" class="img"/>
+          </div>
+          <span style="color:hotpink;font-weight: bold;">1</span>
+          <div class="btn-bar">
+            <button class="btn-bckAuto btn">Auto Back</button>
+            <button class="btn-bck btn">Back</button>
+            <button class="btn-stop btn">Stop</button>
+            <button class="btn-frd btn">Forward</button>
+            <button class="btn-frdAuto btn">Auto Forward</button>
+          </div>
+      </main>
+  </div>
+  <script src="./slideshow.js"></script>
   </body>
 </html>
diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js
@@ -1 +1,192 @@
 // Write your code here
+//alert("java");
+
+
+let images=[//array of objects
+    {   key:0,
+        src:"https://images.unsplash.com/photo-1532386236358-a33d8a9434e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+    },
+    {   key:1,
+        src:"https://images.unsplash.com/photo-1570824104453-508955ab713e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+    },
+    {   key:2,
+        src:"https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+    },
+    {   key:3,
+        src:"https://images.unsplash.com/photo-1503844281047-cf42eade5ca5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+    },
+    {   key:4,
+        src:"https://images.unsplash.com/photo-1527416876370-fb74d128c3dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+    },
+    {   key:5,
+        src:"https://images.unsplash.com/photo-1548366086-7f1b76106622?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+    },
+    {   key:6,
+        src:"https://images.unsplash.com/photo-1561991524-9eaa9f7d910b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+    },
+    {   key:7,
+        src:"https://images.unsplash.com/photo-1519221342713-8cd041ea8893?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+    }
+]
+////////////when load webpage
+let key=0;
+document.querySelector(".img").src=images[0].src;
+document.querySelector(".btn-frd").disabled=false;
+document.querySelector(".btn-bck").disabled=true;
+document.querySelector(".btn-frdAuto").disabled=false;
+document.querySelector(".btn-bckAuto").disabled=true;
+document.querySelector(".btn-stop").disabled=true;
+//////////////////////function to go next slide
+let forward=document.querySelector(".btn-frd");
+forward.addEventListener("click",function(){
+
+    let img=document.querySelector(".img");
+    images.forEach(function(each){
+        if(each.src===img.src){
+           // alert(typeof each.key);
+            key=each.key;
+            return;
+        }else{
+            console.log("move")
+        }
+    });
+    if(key+1===images.length){
+        document.querySelector(".btn-frd").disabled=true;
+        document.querySelector(".btn-frdAuto").disabled=true;
+    }else{
+    document.querySelector(".img").src=images[key+1].src;
+    document.querySelector("span").textContent=key+1;
+    document.querySelector(".btn-bck").disabled=false;
+    document.querySelector(".btn-bckAuto").disabled=false;
+    }
+});
+//////////////////////function to go previous slide
+let backward=document.querySelector(".btn-bck");
+backward.addEventListener("click",function(){
+
+    let img=document.querySelector(".img");
+    images.forEach(function(each){
+        if(each.src===img.src){
+           // alert(typeof each.key);
+            key=each.key;
+            return;
+        }else{
+            console.log("move")
+        }
+    });
+    if(key-1<0){
+        document.querySelector(".btn-bck").disabled=true;
+        document.querySelector(".btn-bckAuto").disabled=true;
+    }else{
+    document.querySelector(".img").src=images[key-1].src;
+    document.querySelector("span").textContent=key-1;
+    document.querySelector(".btn-frd").disabled=false;
+    document.querySelector(".btn-frdAuto").disabled=false;
+    }
+});
+///////////////////////////interval used in auto move function
+let intervalFrd,intervalBck;
+//////////////////////////////auto forward
+let autoforward=document.querySelector(".btn-frdAuto");
+autoforward.addEventListener("click",function(){
+///////////////making all buttne disabled except stop buttonn
+document.querySelector(".btn-frd").disabled=true;
+document.querySelector(".btn-bck").disabled=true;
+document.querySelector(".btn-frdAuto").disabled=true;
+document.querySelector(".btn-bckAuto").disabled=true;
+document.querySelector(".btn-stop").disabled=false;
+/////////////////////////////////////
+    let img=document.querySelector(".img");
+    images.forEach(function(each){
+        if(each.src===img.src){
+           // alert(typeof each.key);
+            key=each.key;
+            return;
+        }else{
+            console.log("move")
+        }
+    });
+    if(key+1===images.length){
+        document.querySelector(".btn-frdAuto").disabled=true;
+        document.querySelector(".btn-frd").disabled=true;
+        document.querySelector(".btn-bck").disabled=false;
+        document.querySelector(".btn-bckAuto").disabled=false;
+    }else{
+
+
+        // document.querySelector(".btn-bck").disabled=false;
+        // document.querySelector(".btn-bckAuto").disabled=false;
+        intervalFrd=setInterval(function(){
+            if(key+1===images.length){
+                document.querySelector(".btn-bckAuto").disabled=false;
+                document.querySelector(".btn-bck").disabled=false;
+                document.querySelector(".btn-stop").disabled=true;
+                clearInterval(intervalFrd);
+                return;
+            }
+                key=key+1;
+                document.querySelector(".img").src=images[key].src;
+                document.querySelector("span").textContent=key;
+
+        },1000);
+    }
+});
+/////////////////////////////auto backward
+let autobackward=document.querySelector(".btn-bckAuto");
+autobackward.addEventListener("click",function(){
+    ///////////////making all buttne disabled except stop buttonn
+    document.querySelector(".btn-frd").disabled=true;
+    document.querySelector(".btn-bck").disabled=true;
+    document.querySelector(".btn-frdAuto").disabled=true;
+    document.querySelector(".btn-bckAuto").disabled=true;
+    document.querySelector(".btn-stop").disabled=false;
+   // document.querySelector(".btn-stop").style.border="0.12rem solid #008000";
+    /////////////////////////////////////
+        let img=document.querySelector(".img");
+        images.forEach(function(each){
+            if(each.src===img.src){
+               // alert(typeof each.key);
+                key=each.key;
+                return;
+            }else{
+                console.log("move")
+            }
+        });
+        if(key-1===-1){
+            document.querySelector(".btn-bckAuto").disabled=true;
+            document.querySelector(".btn-bck").disabled=true;
+            document.querySelector(".btn-frd").disabled=false;
+            document.querySelector(".btn-frdAuto").disabled=false;
+        }else{
+
+
+            // document.querySelector(".btn-bck").disabled=false;
+            // document.querySelector(".btn-bckAuto").disabled=false;
+            intervalFrd=setInterval(function(){
+                if(key-1===-1){
+                    document.querySelector(".btn-frdAuto").disabled=false;
+                    document.querySelector(".btn-frd").disabled=false;
+                    document.querySelector(".btn-stop").disabled=true;
+                    clearInterval(intervalFrd);
+                    return;
+                }
+                    key=key-1;
+                    document.querySelector(".img").src=images[key].src;
+                    document.querySelector("span").textContent=key;
+
+            },1000);
+        }
+    });
+//////////////////////////////////stop
+let btnStop=document.querySelector(".btn-stop");
+btnStop.addEventListener("click",function(){
+    document.querySelector(".btn-frd").disabled=false;
+    document.querySelector(".btn-bck").disabled=false;
+    document.querySelector(".btn-frdAuto").disabled=false;
+    document.querySelector(".btn-bckAuto").disabled=false;
+    clearInterval(intervalFrd);
+    clearInterval(intervalBck);
+   // document.querySelector(".btn-stop").style.border="0.12 solid #db7093";
+
+    document.querySelector(".btn-stop").disabled=true;
+})