add javascript to change the way the message display works

script.js

@@ -15,18 +15,45 @@
     const apiKeyInput = document.querySelector("#api-key");
     
     const showDelay = document.querySelector("#show-delay");
+    
+    const colorGreen = "#7FBD32";
+    const colorOrange = "#FF8800";
+    
     let deviceID = "";
     let delay = "";
     let apiKey = "";
     const unlockUrl = "https://ths.tnet.space/cgi-bin/unlock-main.cgi";
     
-//     make fetch function that calls cgi script with attributes (device id, api key, delay)
+    function displayCountdownMessage(_delay) {
+      let remainingSeconds = _delay;
+      
+      function displayCountdown() {
+        messageContainer.style.background = colorOrange;
+        messageContainer.style.display = "block";
+        messageContainer.innerHTML = `Unlocking in ${remainingSeconds}s`;
+        remainingSeconds -= 1;
+        if (remainingSeconds < 1) {
+          clearInterval(createCountdown);
+        }
+      }
+      const createCountdown = setInterval(displayCountdown, 1000);
+    }
+    
+    const displayUnlockMessage = (message) => {
+      setTimeout(function() { messageContainer.innerHTML = ""; messageContainer.style.display = "none"; }, 3000);
+      messageContainer.style.display = "block";
+      messageContainer.style.background = "green";
+      messageContainer.innerHTML = message;
+    }
+    
     const unlockDoor = (e, dID, aK, d) => {
+      if (d > 0 ) {
+        displayCountdownMessage(d);  
+      }
       fetch(`${unlockUrl}?deviceID=${dID}&apiKey=${aK}&delay=${d}`)
         .then(response => response.json())
         .then(data => { 
-            setTimeout(function() { messageContainer.innerHTML = "" }, 3000);
-            messageContainer.innerHTML = data.message;
+              displayUnlockMessage(data.message);
               return;
         })
         .catch(error => messageContainer.innerHTML = `Error: ${error}`)
@@ -82,5 +109,3 @@
     delayUnlockButton.addEventListener("click", (e) => unlockDoor(e, deviceID, apiKey, delay));
 
     document.body.onload = setSettings;
-    let date = new Date();
-    messageContainer.innerHTML = date.toLocaleDateString();

style.css

@@ -142,17 +142,14 @@
     }
 
     #message-container {
-      border: 3px solid blue;
       position: absolute;
       text-align: center;
       width: 100vw;
+      background: #FF8800;
       bottom: 50vh;
       font-size: 2em;
-/*       border-radius: 56px; */
-/*       height: 300px; */
-/*       width: 300px; */
-/*       margin-left: auto; */
-/*       margin-right: auto; */
+      padding: .5em;
+      display: none;
     }
     
     #button-block {