CodeYourFuture · MarynaRomashca · Mar 29, 2025 · Apr 6, 2025 · Apr 17, 2025 · fearcyf
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,11 +1,57 @@
-function setAlarm() {}
+const textArea = document.querySelector("#alarmSet");
+const timeRemaining = document.querySelector("#timeValue");
+const startButton = document.querySelector("#set");
+let isAudioPlay = false;
+let intervalId = null;
+
+textArea.addEventListener('input', function () {
+  const value = textArea.value;
+  timeRemaining.innerHTML = value;
+});
+
+function setAlarm() {
+  let firstReminder = +timeRemaining.innerHTML * 1000;
+
+  if (intervalId) {
+    clearInterval(intervalId);
+  }
+
+  intervalId = setInterval(() => {
+    firstReminder -= 100;
+
+    if (firstReminder <= 0) {
+      clearInterval(intervalId); 
+      intervalId = null; 
+      timeRemaining.innerHTML = 0; 
+      if (!isAudioPlay) {
+        playAlarm(); 
+        isAudioPlay = true;
+      }
+    } else {
+
+      timeRemaining.innerHTML = (firstReminder / 1000).toFixed(1);
+    }
+  }, 100);
+}
+
+function pauseAlarm() {
+  audio.pause();
+  audio.currentTime = 0; 
+  isAudioPlay = false;
+
+  if (intervalId) {
+    clearInterval(intervalId);
+    intervalId = null;
+  }
+}
 
 // DO NOT EDIT BELOW HERE
 
 var audio = new Audio("alarmsound.mp3");
 
 function setup() {
   document.getElementById("set").addEventListener("click", () => {
+    console.log("1")
     setAlarm();
   });
 
@@ -18,8 +64,8 @@ function playAlarm() {
   audio.play();
 }
 
-function pauseAlarm() {
-  audio.pause();
-}
+// function pauseAlarm() {
+//   audio.pause();
+// }
 
 window.onload = setup;
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <div class="centre">
-      <h1 id="timeRemaining">Time Remaining: 00:00</h1>
+      <h1 id="timeRemaining">Time Remaining:</h1> <h1 id="timeValue"> 00:00</h1>
       <label for="alarmSet">Set time to:</label>
       <input id="alarmSet" type="number" />
 

diff --git a/Sprint-3/alarmclock/indextime.html b/Sprint-3/alarmclock/indextime.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Title here</title>
+  </head>
+  <body>
+    <div class="centre">
+      <h1 id="timeRemaining">Time Remaining:</h1> <h1 id="timeValue"> 00:00</h1>
+      <label for="alarmSet">Set time to:</label>
+      <input id="alarmSet" type="number" />
+
+      <button id="set" type="button">Set Alarm</button>
+      <button id="stop" type="button">Stop Alarm</button>
+    </div>
+    <script src="test.js"></script>
+  </body>
+</html>
diff --git a/Sprint-3/alarmclock/test.js b/Sprint-3/alarmclock/test.js
@@ -0,0 +1,29 @@
+// const endDate = new Date("2025-03-12T03:25:00")
+
+// console.log (endDate)
+//  function countDoun (){
+//     let now = new Date()
+//     console.log (now)
+//     if (now.getTime() < endDate.getTime()){
+//         //loop
+//         setInterval(() => {
+//             now = new Date()
+//           let timeRemide = endDate - now  
+
+//           console.log (new Date (timeRemide)) 
+//           console.log (new Date(now.getTime() + timeRemide * 24 * 60 * 60 * 1000))
+//           console.log (new Date(daysRemaining * 24 * 60 * 60 * 1000));
+//         }, 1000);
+
+//     }
+//     else {
+//         console.log("finish")
+//     }
+//  }
+//  countDoun ()
+
+
+// //new Date(now.getTime() + daysRemaining * 24 * 60 * 60 * 1000);
+
+
+// //new Date(daysRemaining * 24 * 60 * 60 * 1000);
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,24 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Quote generator app</title>
     <script defer src="quotes.js"></script>
+   <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
-    <h1>hello there</h1>
-    <p id="quote"></p>
+
+<div id="div">
+
+  <div id="div-in">
+    <h1 id="quote"></h1>
     <p id="author"></p>
     <button type="button" id="new-quote">New quote</button>
+  </div>
+
+</div>
+
   </body>
 </html>
+
+
diff --git a/Sprint-3/quote-generator/jest.setup.js b/Sprint-3/quote-generator/jest.setup.js
@@ -1 +1,6 @@
 require("@testing-library/jest-dom");
+
+
+
+
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -20,6 +20,16 @@ function pickFromArray(choices) {
   return choices[Math.floor(Math.random() * choices.length)];
 }
 
+function showRandomQuote() {
+  document.getElementById("new-quote").addEventListener("click", () => {
+    const randomQuote = pickFromArray(quotes);
+    document.getElementById("quote").textContent = `"${randomQuote.quote}"`;
+    document.getElementById("author").textContent = `— ${randomQuote.author}`;
+  });
+}
+showRandomQuote();
+
+
 // A list of quotes you can use in your app.
 // DO NOT modify this array, otherwise the tests may break!
 const quotes = [
@@ -491,3 +501,10 @@ const quotes = [
 ];
 
 // call pickFromArray with the quotes array to check you get a random quote
+
+
+
+// const randomQuote = pickFromArray(quotes);
+// console.log(randomQuote.quote); 
+// console.log(randomQuote.author);  
+
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
@@ -1 +1,55 @@
 /** Write your CSS in here **/
+body {
+    background-color:bisque;
+  }
+
+#div-in {
+    background-color: white;
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+    width: 600px;
+    height: 200px;
+    text-align: center;
+
+    justify-content: center;
+    margin-left: 30%;
+    margin-top:10%;
+
+}
+
+
+
+  #quote {
+    font-size: 1.5em;
+    font-style: italic;
+    margin-bottom: 15px;
+    color: #333;
+  }
+
+  #author {
+    font-size: 1.1em;
+    font-weight: bold;
+    color: #555;
+  }
+
+  #new-quote {
+    position: fixed;    
+    bottom: 40%;         
+    left: 50%;
+
+    margin-bottom: 20px;
+    padding: 12px 24px;
+    background-color:orange;
+    color: white;
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  #new-quote:hover {
+    background-color: red;
+  }
+
+
diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
@@ -4,12 +4,17 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
+
     <title>Title here</title>
   </head>
   <body>
     <div id="content">
       <ul id="reading-list"></ul>
+    </div>
+    <div id="placeholder">
+
     </div>
     <script src="script.js"></script>
   </body>
 </html>
+
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
@@ -1,4 +1,5 @@
-// for the tests, do not modify this array of books
+
+
 const books = [
   {
     title: "The Design of Everyday Things",
@@ -21,3 +22,12 @@ const books = [
   },
 ];
 
+
+const booksContainer = document.getElementById("placeholder");
+
+books.forEach ((book) => {
+  const bookDiv = document.createElement("div");
+  bookDiv.innerHTML = book.title + book.author + '<img src="' + book.bookCoverImage + '" />';
+  booksContainer.appendChild(bookDiv);
+});
+
diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
@@ -5,10 +5,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Title here</title>
     <script defer src="slideshow.js"></script>
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
-    <button type="button" id="backward-btn">Backwards</button>
-    <button type="button" id="forward-btn">Forward</button>
+
+    <div id="box-cat">
+      <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
+    </div>
+
+    <div id="button">
+      <button type="button" id="backward-btn">Backwards</button>
+      <button type="button" id="forward-btn">Forward</button>
+    </div>
+
   </body>
 </html>
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
@@ -5,4 +5,25 @@ const images = [
 ];
 
 
-// Write your code here
+// Write your code here
+
+let currentIndex = 0;
+
+const imgElement = document.getElementById("carousel-img");
+
+function slideShowBack() {
+    document.getElementById("backward-btn").addEventListener("click", () => {
+        currentIndex = (currentIndex - 1 + images.length) % images.length;
+        imgElement.src = images[currentIndex];
+    });
+  }
+  slideShowBack();
+
+  function slideShowForward() {
+    document.getElementById("forward-btn").addEventListener("click", () => {
+        currentIndex = (currentIndex + 1 + images.length) % images.length;
+        imgElement.src = images[currentIndex];
+    });
+  }
+  slideShowForward();
+
diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css
@@ -1 +1,22 @@
 /** Write your CSS in here **/
+#box-cat {
+    display: flex;
+    justify-content: center; 
+    align-items: center;     
+    height: 90vh;           
+}
+
+
+#carousel-img {
+
+    height: 600px;
+    width: 900px;
+
+}
+
+#button {
+    display: flex;
+    justify-content: center; 
+    align-items: center;    
+    height: 40px;           
+}