Add increment/decrement buttons to time

index.html

@@ -24,8 +24,12 @@ <h1 id="title">HALL PASS</h1>
             <div><input class="card" id="student-name-input" placeholder="Student Name"></div>
             <div><input class="card" id="destination-input" placeholder="Destination"></div>
             <div class="card">
-                <input name="duration" id="duration-input" type="range" value="5" min="5" max="45" step="5" onchange="updateDuration()">
-                <div id="duration-display">5 minutes</div>
+                <div id="duration-display">
+                    <span id="duration-value">5</span>
+                    <span>minutes</span>
+                </div>
+                <button class="duration-button card" id="duration-down" onclick="updateDuration('decrease')">- 5</button>
+                <button class="duration-button card" id="duration-up" onclick="updateDuration('increase')">+ 5</button>
             </div>
 
         </div>

scripts/script.js

@@ -24,20 +24,26 @@ setInterval(function () {
 // END UNIVERSAL METHODS
 
 // FORM.HTML METHODS
-function updateDuration() {
-    const duration = document.getElementById('duration-input').value;
-    const durationDisplay = document.getElementById('duration-display').innerHTML = duration + ' minutes';
+let duration = 5;
+function updateDuration(action) {
+    let increment = 5;
+    if (action == "increase" && duration < 45) {
+        duration += increment;
+    } else if (action == "decrease" && duration > 5) {
+        duration -= increment;
+    }
+    document.getElementById('duration-value').innerHTML = duration;
 }
 
 function requestPass() {
     const studentName = document.getElementById('student-name-input').value;
     const studentDestination = document.getElementById('destination-input').value;
-    const studentDuration = document.getElementById('duration-input').value;
+    const studentDuration = document.getElementById('duration-value').innerHTML;
 
 
     // Check for invalid inputs
     if (studentName == '' | studentDestination == '' | studentDuration == '') {
-        alert('Please complete all three forms before requesting a pass.');
+        alert('Please complete both fields before requesting a pass.');
         return;
     }
 

styles/form.css

@@ -12,7 +12,12 @@ button {
 
 input, button {
     font-family: 'DM Serif Display';
-    font-size: 0.5rem;
+    color: navy;
+}
+
+.duration-button {
+    font-size: 1rem;
+    font-weight: bolder;
 }
 
 video {