add color changing background and update card style

Author: AngelaMcLeary

Sprint-3/alarmclock/alarmclock.js

@@ -1,9 +1,11 @@
 let alarmInterval;
+let colorInterval;
 
 function setAlarm() {
   clearInterval(alarmInterval);
-  let timeRemaining = document.getElementById("alarmSet");
-  const display = document.getElementById("timeRemaining");
+  const timeRemaining = document.querySelector("#alarmSet");
+  const display = document.querySelector("#timeRemaining");
+  if (!timeRemaining || !display) return;
   //what ever we input is turned into seconds
   let totalSeconds = parseInt(timeRemaining.value);
 
@@ -30,6 +32,49 @@ function setAlarm() {
     }
   }, 1000);
 }
+//add color changing background when alarm reaches 0 until stopped.
+//function from color changing assignment 10 year ago! 
+function makeRandomColor() {
+  var colorOptions = '0123456789ABCDEF';
+  var newColor = '#';
+//repeat 6 times to generate 6 random hex digits from the 16 characters in colorOptions
+  for (var 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 2 seconds
+    }, 1000);
+  });
+
+  audio.addEventListener("pause", () => {
+    clearInterval(colorInterval);
+    document.body.style.backgroundColor = "";
+  });
+});
+//not sure that this is helping. The function works without it.
+window.setAlarm = setAlarm;
+  //end linking
 
 // DO NOT EDIT BELOW HERE
 

Sprint-3/alarmclock/style.css

@@ -6,8 +6,8 @@
 }
 
 body {
-  background: linear-gradient(#d49562, #9e897c); 
-  color: #797d8131; 
+  background: #c5b7a9;
+  color: #797d8131;
   height: 100vh;
   display: flex;
   justify-content: center;
@@ -16,7 +16,7 @@ body {
 
 /* Centered card*/
 .centre {
-  background-color: #a16093;
+  background-color: #000000;
   padding: 40px 60px;
   border-radius: 10px;
   text-align: center;
@@ -62,18 +62,18 @@ button {
 
 /* Set Alarm */
 #set {
-  background-color: #2b2c2d;
+  background-color: #1f6718;
   color: #fff;
 }
 
 #set:hover {
-  background-color: #2b2c2d7b;
-  transform: translateY(-2px);
+  background-color:  #447f3d;
+  transform: translateY(-1px);
 }
 
 /* Stop Alarm */
 #stop {
-  background-color: #2b2c2d;
+  background-color: #825047;
   color: #fff;
 }