diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..02beb4d37 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,87 @@
-function setAlarm() {}
+let alarmInterval;
+let colorInterval;
+let errorTimeout;
+
+function setAlarm() {
+ clearInterval(alarmInterval);
+ const timeRemaining = document.querySelector("#alarmSet");
+ const display = document.querySelector("#timeRemaining");
+ const error = document.querySelector("#error");
+ if (!timeRemaining || !display || !error) return;
+ //what ever we input is turned into seconds
+ let totalSeconds = parseInt(timeRemaining.value);
+ // throw an error message if the user enters nothing and presses the alarm button.
+ if (isNaN(totalSeconds) || totalSeconds <= 0) {
+ error.textContent = "Please enter a valid number in seconds!";
+ //set error to disappear after 3 seconds
+ clearTimeout(errorTimeout);
+ errorTimeout = setTimeout(() => {
+ error.textContent = "";
+ }, 3000);
+ return;
+ }
+ const formattedTime = (seconds) => {
+ const mins = Math.floor(seconds / 60)
+ .toString()
+ .padStart(2, "0");
+ const secs = (seconds % 60).toString().padStart(2, "0");
+ return `${mins}:${secs}`;
+ };
+
+ display.innerHTML = `Time Remaining: ${formattedTime(totalSeconds)}`;
+
+ alarmInterval = setInterval(() => {
+ totalSeconds--;
+
+ display.innerHTML = `Time Remaining: ${formattedTime(totalSeconds)}`;
+
+ if (totalSeconds <= 0) {
+ clearInterval(alarmInterval);
+ playAlarm();
+ }
+ }, 1000);
+}
+//add color changing background when alarm reaches 0 until stopped.
+//function from color changing assignment 10 year ago!
+function makeRandomColor() {
+ let colorOptions = "0123456789ABCDEF";
+ let newColor = "#";
+ //repeat 6 times to generate 6 random hex digits from the 16 characters in colorOptions
+ for (let i = 0; i < 6; i++) {
+ //picks random numbers from colorOptions and appends it to the # to make a new color.
+ newColor += colorOptions[Math.floor(Math.random() * 16)];
+ }
+ return newColor;
+}
+//end color changing
+
+//keep the existing code below and call the setup
+//set the background color transition
+document.body.style.transition = "background-color 0.7s ease";
+// call the entire page
+window.addEventListener("load", function () {
+ // attach the alarm sound to the make Random color so it starts changing when the alarm starts.
+ audio.addEventListener("play", () => {
+ // stops any previous color changing intervals
+ clearInterval(colorInterval);
+ //starts a new repeating timer and saves it's ID in colorInterval. setInterval runs every 2seconds
+ colorInterval = setInterval(() => {
+ //style the background and make it important! so it over-rides the style.css
+ document.body.style.setProperty(
+ "background-color",
+ makeRandomColor(),
+ "important"
+ );
+ //closes setInterval after 1 seconds
+ }, 1000);
+ });
+
+ audio.addEventListener("pause", () => {
+ clearInterval(colorInterval);
+ document.body.style.backgroundColor = "";
+ });
+});
+//end linking
// DO NOT EDIT BELOW HERE
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
index 48e2e80d9..69d99af01 100644
--- a/Sprint-3/alarmclock/index.html
+++ b/Sprint-3/alarmclock/index.html
@@ -1,19 +1,19 @@
-
+
- Title here
+ Alarm clock app
diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json
index e1331e071..92e81d7b7 100644
--- a/Sprint-3/alarmclock/package.json
+++ b/Sprint-3/alarmclock/package.json
@@ -13,5 +13,8 @@
"bugs": {
"url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues"
},
- "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme"
+ "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
+ "devDependencies": {
+ "@testing-library/jest-dom": "^6.9.1"
+ }
}
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
index 0c72de38b..784e0acd0 100644
--- a/Sprint-3/alarmclock/style.css
+++ b/Sprint-3/alarmclock/style.css
@@ -1,4 +1,107 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ font-family: "Roboto", "Segoe UI", sans-serif;
+}
+
+body {
+ background: #c5b7a9;
+ color: #797d8131;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/* Centered card*/
.centre {
+ background-color: #000000;
+ padding: 40px 60px;
+ border-radius: 10px;
+ text-align: center;
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+ min-width: 300px;
+}
+
+/* Time display */
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 30px;
+ font-weight: 600;
+ color: #f1bcaf;
+ letter-spacing: 1px;
+}
+/*to set time*/
+label {
+ color: #f1bcaf;
+ font-size: 1rem;
+ font-weight: 600;
+}
+/* Input time*/
+#alarmSet {
+ padding: 4px 15px 6px 15px;
+ font-size: 1.3rem;
+ border-radius: 4px;
+ border: 2px solid #cbc1bc;
+ outline: none;
+ margin-bottom: 20px;
+ margin-right: 10px;
+ width: 120px;
+ text-align: center;
+ background-color: #e8dfdb;
+ color: #121212;
+}
+/*placeholder text*/
+#alarmSet::placeholder {
+ color: #8f8d8c;
+ font-style: italic;
+ font-size: 0.9rem;
+ opacity: 1;
+}
+
+/* Buttons */
+button {
+ padding: 12px 25px;
+ margin: 10px;
+ font-size: 1rem;
+ border-radius: 5px;
+ border: none;
+ cursor: pointer;
+ font-weight: 600;
+ transition: all 0.3s ease-in-out;
+}
+
+/* Set Alarm */
+#set {
+ background-color: #1f6718;
+ color: #fff;
+}
+
+#set:hover {
+ background-color: #447f3d;
+ transform: translateY(-1px);
+}
+
+/* Stop Alarm */
+#stop {
+ background-color: #825047;
+ color: #fff;
+}
+
+#stop:hover {
+ background-color: brown;
+ transform: translateY(-1px);
+}
+
+#error {
+ color: red;
+ height: 1em;
+ font-size: 1rem;
+}
+
+/* keep old styling in case you need to revert back */
+/* .centre {
position: fixed;
top: 50%;
left: 50%;
@@ -12,4 +115,4 @@
h1 {
text-align: center;
-}
+} */