diff --git a/index.html b/index.html index 1eeb3ae..975d9fc 100644 --- a/index.html +++ b/index.html @@ -24,8 +24,12 @@

HALL PASS

- -
5 minutes
+
+ 5 + minutes +
+ +
diff --git a/scripts/script.js b/scripts/script.js index 326c34a..0150a76 100644 --- a/scripts/script.js +++ b/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; } diff --git a/styles/form.css b/styles/form.css index 880c480..8aaf15f 100644 --- a/styles/form.css +++ b/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 {