Js/core 2/week 3/Mursel_AYSAN

Week-3/.old/InClass/B-callbacks/exercise.js

@@ -14,12 +14,13 @@
   EXPECTED RESULT: The #exercise1 element has textContent = "YOUR NAME" when
   the button is clicked
 */
-document.querySelector('#button1').addEventListener('click', exercise1)
+document.querySelector('#button1').addEventListener('click', exercise1);
+var textElement = document.querySelector('#button1');
 
 function exercise1() {
   // Write your implementation here
+  textElement.textContent = "My Name";
 }
-
 /*
   EXERCISE 2
   =======

Week-3/.old/InClass/C-fetch/exercise.js

@@ -17,10 +17,12 @@ Open index.html in your browser. Every time you refresh the page,
 a different greeting should be displayed in the box.
 */
 
-fetch('*** Write the API address here ***')
+fetch('https://codeyourfuture.herokuapp.com/api/greetings')
     .then(function(response) {
         return response.text();
     })
     .then(function(greeting) {
+
+      document.querySelector('#greeting-text').innerHTML = greeting;
         // Write the code to display the greeting text here
     });

Week-3/.old/InClass/D-remote-clipboard/exercise.js

@@ -20,8 +20,8 @@ Also, for GET request, you can use the url directly in your browser address bar
 // Task 1: create a new clipboard
 // Complete the code below
 
-var clipboardTitle = "CHANGE ME";
-var clipboardText = "CHANGE ME";
+var clipboardTitle = "Birmingham";
+var clipboardText = "I am from Birminghammmm";
 var requestBody = { title: clipboardTitle, text: clipboardText };
 
 var postRequestParameters = {
@@ -32,12 +32,14 @@ var postRequestParameters = {
     }
 };
 
-fetch(/* Write the API address here */, postRequestParameters);
+fetch('https://codeyourfuture.herokuapp.com/api/clipboard', postRequestParameters);
 
 
 // Task 2: Load an existing clipboard
 // Add your code below
 
-fetch(/* ... */).then(function(response) {
+fetch('https://codeyourfuture.herokuapp.com/api/clipboard?title=Birmingham').then(function(response) {
     return response.text();
-}).then(/* ... */);
+}).then(function(result){
+    console.log(result)
+});

Week-3/.old/InClass/E-webchat/exercise-1.js

@@ -34,4 +34,17 @@ When you open index.html in your browser, it should display the existing message
 */
 
 
-// Write your code here
+// Write your code here
+// fetch('https://codeyourfuture.herokuapp.com/api/messages')
+// .then(function(response){
+//     return response.json();
+// })
+// .then(function(messages){
+// //document.querySelector('#message-list').innerHTML ="";
+// messages.forEach(function(message){
+//  document.querySelector('#message-list').innerHTML+='<p>'+message.content +'</p>'
+// //  let newParagraph = document.createElement('p');
+// //  newParagraph.innerText
+// //  document.querySelector('message-list').appendChild(newParagraph);
+// })
+// })

Week-3/.old/InClass/E-webchat/exercise-2.js

@@ -27,3 +27,28 @@ on the submit button. Then check the following:
 
 
 // Write your code here
+var postRequestParameters = {
+    body: JSON.stringify({ "content":new Date() }),
+    method: 'POST',
+    headers: {
+        'content-type': 'application/json'
+    }
+};
+
+fetch('https://codeyourfuture.herokuapp.com/api/messages',postRequestParameters);
+
+fetch('https://codeyourfuture.herokuapp.com/api/messages')
+.then(function(response){
+    return response.json();
+})
+.then(function(messages){
+//document.querySelector('#message-list').innerHTML ="";
+document.querySelector('#message-list').innerHTML+='<p>'+messages[messages.length-1].content +'</p>'
+
+// messages.forEach(function(message){
+//  document.querySelector('#message-list').innerHTML+='<p>'+message.content +'</p>'
+// //  let newParagraph = document.createElement('p');
+// //  newParagraph.innerText
+// //  document.querySelector('message-list').appendChild(newParagraph);
+// })
+})

Week-3/.old/InClass/E-webchat/exercise-3.js

@@ -33,7 +33,11 @@ For example, print your name every 2 seconds.
 
 // Write your code here
 
+function callback() {
+    console.log("Mursel");
+}
 
+setInterval(callback, 3000); 
 /*
 ========
 Task 4
@@ -42,4 +46,19 @@ Task 4
 Use the setInterval function to reload automatically the messages of your webchat every 2 seconds.
 The code responsible to show the messages in the page is in exercise-1.js, so you will need to write your code there :-)
 */
-
+function newPages(){
+fetch('https://codeyourfuture.herokuapp.com/api/messages')
+.then(function(response){
+    return response.json();
+})
+.then(function(messages){
+//document.querySelector('#message-list').innerHTML ="";
+messages.forEach(function(message){
+ document.querySelector('#message-list').innerHTML+='<p>'+message.content +'</p>'
+//  let newParagraph = document.createElement('p');
+//  newParagraph.innerText
+//  document.querySelector('message-list').appendChild(newParagraph);
+})
+})
+}
+setInterval(newPages,9000);

Week-3/Homework/mandatory/1-alarmclock/alarmclock.js

@@ -1,4 +1,35 @@
-function setAlarm() {}
+function setAlarm() {
+  let inputTime = document.getElementById("alarmSet").value;
+  let timeRemaining = document.getElementById("timeRemaining"); 
+
+  function timeFormat(time) {
+    let allMinutes;
+    let seconds;
+    if (time > 60) {
+      allMinutes = Math.floor(time / 60);
+      seconds = time - allMinutes * 60;
+    } else {
+      allMinutes = 0;
+      seconds = time;
+    }
+    if (allMinutes < 10) {
+      allMinutes = "0" + allMinutes;
+    }
+    if (seconds < 10) {
+      seconds = "0" + seconds;
+    }
+    return `${allMinutes}:${seconds}`;
+  }
+
+  let alarm = setInterval(() => {
+    if (inputTime === 0) {
+      playAlarm();
+      clearInterval(alarm);
+    }
+    timeRemaining.textContent = `Time remaining: ${timeFormat(inputTime)}`;
+    inputTime--;
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 

Week-3/Homework/mandatory/2-quotegenerator/index.html

@@ -1,17 +1,27 @@
 <!DOCTYPE html>
 <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" />
-  </head>
-  <body>
-    <!-- Write your HTML in here -->
-  </body>
-</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" />
+</head>
+
+<body>
+  <div class="container">
+    <div class="row align-items-center justify-content-center">
+      <blockquote class="blockquote text-center">
+        <p class="mb-0"></p>
+        <footer class="blockquote-footer"></footer>
+        <button type="button" class="btn btn-primary btn-md">Get Quote</button>
+      </blockquote>
+    </div>
+  </div>
+  <script src="index.js"></script>
+</body>
+
+</html> 

Week-3/Homework/mandatory/2-quotegenerator/quotes.js

@@ -1,3 +1,32 @@
+let  colours = [
+  red,yellow,black,red,blue,orange
+];
+
+let  showQuote = document.querySelector('.blockquote');
+let  quote = document.querySelector('.blockquote p');
+let  author = document.querySelector('.blockquote-footer');
+let  newQuoteBtn = document.querySelector('.btn');
+
+
+
+
+function pickFromArray(choices) {
+  return choices[Math.floor(Math.random() * choices.length)];
+
+
+function getQuote() {
+  let  randomQuote = pickFromArray(quotes);
+  let  randomColour = pickFromArray(colours);
+
+  quote.textContent = randomQuote.quote;
+  author.textContent = randomQuote.author;
+
+  showQuote.style.backgroundColor = randomColour;
+}
+
+newQuoteBtn.addEventListener('click', function() => {
+  return getQuote();
+});
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at
@@ -17,13 +46,12 @@
 // 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)];
-}
+
+
 
 // A list of quotes you can use in your app.
 // Feel free to edit them, and to add your own favourites.
-const quotes = [
+let  quotes = [
   {
     quote: "Life isn’t about getting and having, it’s about giving and being.",
     author: "Kevin Kruse",

Week-3/Homework/mandatory/2-quotegenerator/style.css

@@ -1 +1,18 @@
 /** Write your CSS in here **/
+body {
+    background-color: #23861a;
+  }
+
+  .row {
+    height: 100vh;
+  }
+
+  .blockquote {
+    padding: 2em 1.5em;
+    border-radius: 10px;
+  }
+
+  .btn {
+    margin-top: 2em;
+  } 
+

Week-3/Homework/mandatory/3-slideshow/index.html

@@ -15,3 +15,31 @@
     <!-- Write your HTML in here -->
   </body>
 </html>
+
+<head>
+  <title>Slideshow</title>
+  <script src="slideshow.js"></script>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+
+  <div class="container">
+    <div class="slideshow">
+      <img src="./images/kan1.jpg" alt="kangoroo 1">
+      <img src="./images/kan2.jpg" alt="kangoroo 2">
+      <img src="./images/kan3.jpg" alt="kangoroo 3">
+      <img src="./images/kan4.jpg" alt="kangoroo 4">
+    </div>
+    <div id="slideIndex"></div>
+    <div class="options">
+      <button  class="btn btn-primary" id="autoBack">Auto Back</button>
+      <button  class="btn btn-primary" id="back">Back</button>
+      <button  class="btn btn-primary" id="stop">Stop</button>
+      <button  class="btn btn-primary" id="forward">Forward</button>
+      <button  class="btn btn-primary" id="autoForward">Auto Forward</button>
+    </div>
+  </div>
+</body>
+
+</html> 

Week-3/Homework/mandatory/3-slideshow/slideshow.js

@@ -1 +1,64 @@
-// Write your code here
+//The load event fires when a given resource has loaded.
+
+window.onload = function () {
+    let imgsrc = document.getElementsByTagName('img');
+//The Array.from() static method creates a new, shallow-copied Array instance from an array-like or iterable object.
+    let newImgArr = Array.from(imgsrc);
+    let backBtn = document.getElementById('back');
+    let forwardBtn = document.getElementById('forward');
+
+    // index of visible slide
+    let currentIndex = 0;
+
+    // show first image on page load
+    showImage(currentIndex);
+
+    function showImage(index) {
+      newImgArr.forEach((image, i) => {
+        // hide image when indexes don't match
+        if (index !== i) {
+          image.style.display = 'none';
+        }
+         else {
+          // display image for currentIndex
+          image.style.display = 'inline-block';
+        }
+      });
+    }
+  //forward button 
+    forwardBtn.addEventListener('click', () => {
+      currentIndex = (currentIndex + 1) % newImgArr.length;
+      showImage(currentIndex);
+    });
+  // back buttton 
+    backBtn.addEventListener('click', () => {
+      currentIndex = currentIndex > 0 ? --currentIndex : newImgArr.length - 1;
+      showImage(currentIndex);
+    });
+
+    let autoBack = document.getElementById("autoBack");
+autoBack.addEventListener("click", () => {
+    clearInterval(forwardSlide);
+    reverseSlide = setInterval(() => {
+        img.src = newImgArr[imgIndex];
+        imageIndex.textContent = imgIndex;
+        imgIndex--;
+        if (imgIndex < 0) {
+            imgIndex = newImgArr.length - 1;
+        }
+    },1000);
+});
+let autoForward = document.getElementById("autoForward");
+autoForward.addEventListener("click", () => {
+    clearInterval(reverseSlide);
+    imgIndex = 0;
+    forwardSlide = setInterval(() => {
+        img.src = newImgArr[imgIndex];
+        imageIndex.textContent = imgIndex;
+        imgIndex++;
+        if (imgIndex > newImgArr.length - 1) {
+            imgIndex = 0;
+        }
+    }, 1000);
+});
+  };