CodeYourFuture · Nataliia74 · Jul 9, 2025 · Jul 9, 2025 · Jul 12, 2025 · Jul 12, 2025
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,90 @@
-function setAlarm() {}
+// Given an input area of Time counter and 2 buttons: 'Set Alarm' and 'Stop Alarm'.
+// When user clicks the `Set Alarm` button the counter at the
+// top of the screen should change to the entered number in the `input` field.
+// For example,
+// if the `input` field says `10` then the title should say `Time Remaining: 00:10`.
+// Every one second the title should count down by one.
+
+// When the `Time Remaining` reaches `00:00` the alarm should play a sound. You can
+// make the sound happen by using `playAlarm()`.
+// You can stop the alarm sound by pressing the `Stop Alarm` button.
+
+const alarmInputArea = document.querySelector("#alarmSet"); // get access to InputArea
+console.log(alarmInputArea, "<---- InputArea");
+
+const setAlarmButton = document.querySelector("#set");
+console.log(setAlarmButton, "<---- Alarm Button");
+
+const setStopButton = document.querySelector("#stop");
+console.log(setStopButton, "< ---- Stop Button");
+
+const timeRemainInfo = document.querySelector("#timeRemaining");
+console.log(timeRemainInfo, "<------Remain Time");
+
+const backgroundColor = document.querySelector("html");
+console.log(backgroundColor, "<------Background Color");
+
+let intervalId; // declare variable
+let inputInfo = 0; // declare 'inputInfo' as an 'intervalId' global
+
+function timeFormat(time) {
+  // revert number into min and sec format function
+  const mins = String(Math.floor(time / 60)).padStart(2, "0");
+  const seconds = String(time % 60).padStart(2, "0");
+  timeRemainInfo.textContent = `Time Remaining: ${mins}:${seconds}`;
+}
+
+function setAlarm() {
+  inputInfo = Number(alarmInputArea.value); // convert input into number
+  if (inputInfo < 1 || isNaN(inputInfo)) {
+    // to sift invalid input
+    console.log("You need to input a value in seconds!");
+    window.alert("You need to input a value in seconds!");
+    return;
+  }
+  alarmInputArea.value = ""; // clean input area when data assigned to 'inputInfo'
+  timeFormat(inputInfo); // set format input to min and sec
+
+  intervalId = setInterval(function () {
+    //function to set interval for
+    inputInfo--; // countdown the input by 1 sec by iterat.
+    if (inputInfo === 0) {
+      //  if input equal 0, set alarm signal and flashing
+      clearInterval(intervalId);
+      timeFormat(0);
+      window.playAlarm();
+      changeBackgroundColorFlashing();
+    } else {
+      // if input not equal 0, just continue count down
+      timeFormat(inputInfo);
+    }
+  }, 1000);
+}
+
+let flashColor = ["yellow", "pink", "lightgrey", "green"]; // array for flashing
+let flashIntervalId; // declaring globally variable
+let colorIndex = 0;
+
+setStopButton.addEventListener("click", function stopFlashing() {
+  console.log("click event is firing...");
+  clearInterval(flashIntervalId); // cleaning any previous possible intervals
+  backgroundColor.style.backgroundColor = ""; // cleaning background to default
+  // option after clicking stop button
+  window.pauseAlarm();
+});
+
+function changeBackgroundColorFlashing() {
+  //function flashing colors
+  if (flashIntervalId) clearInterval(flashIntervalId); // every 1 sec
+  flashIntervalId = setInterval(function () {
+    backgroundColor.style.backgroundColor = flashColor[colorIndex];
+    colorIndex = (colorIndex + 1) % flashColor.length; // loop over flashColor array
+  }, 1000);
+  //stopFlashing(); //setTimeout(() => clearInterval(flashIntervalId), 1000);
+}
+
+window.playAlarm = playAlarm;
+window.pauseAlarm = pauseAlarm;
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -4,7 +4,8 @@
     <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>
+    <script defer src="alarmclock.js"></script>
+    <title>Alarm clock app</title>
   </head>
   <body>
     <div class="centre">
@@ -15,6 +16,5 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>
     </div>
-    <script src="alarmclock.js"></script>
   </body>
 </html>
diff --git a/Sprint-3/alarmclock/jest.setup.js b/Sprint-3/alarmclock/jest.setup.js
@@ -1 +1,12 @@
-require("@testing-library/jest-dom");
+require("@testing-library/jest-dom/extend-expect");
+
+//import { expect, jest, test } from "@jest/globals";
+
+//import "@testing-library/jest-dom";
+
+//import "@testing-library/jest-dom/extend-expect";
+
+const { TextEncoder, TextDecoder } = require("util");
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json
@@ -16,14 +16,15 @@
   "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
   "devDependencies": {
     "@testing-library/dom": "^8.19.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/user-event": "^13.5.0",
     "jest": "^29.2.2",
     "jest-environment-jsdom": "^29.2.2"
   },
   "jest": {
     "setupFilesAfterEnv": [
       "./jest.setup.js"
-    ]
+    ],
+    "testEnvironment": "jsdom"
   }
 }