Add error handling for class input and enhance error message styling

This commit is contained in:
Kyler Olsen 2025-07-11 01:27:15 -06:00
parent 006e86da56
commit 52b5e96854
3 changed files with 37 additions and 4 deletions

View File

@ -113,3 +113,17 @@ body[mode="dark"] a {
.no-classes {
display: none;
}
.error-message {
color: red;
font-weight: bold;
font-size: 16px;
}
body[mode="dark"] .error-message {
color: #ff6666;
}
.error-message.hidden {
display: none;
}

View File

@ -32,14 +32,21 @@
<div class="class-input">
<hr/>
<h2>Add Class</h2>
<label for="class-name">Class Name</label> <input type="text" id="class-name" placeholder="Enter Class Name">
<p>
<em>Please enter the class information below:</em>
<!-- <br/><small>Class name is just a label, this app doesn't have the college class schedule.</small> -->
</p>
<label for="class-name">Class Name </label><input type="text" id="class-name" placeholder="Enter Class Name">
<label for="Mon">M</label><input type="checkbox" id="Mon">
<label for="Tue">T</label><input type="checkbox" id="Tue">
<label for="Wed">W</label><input type="checkbox" id="Wed">
<label for="Thu">Th</label><input type="checkbox" id="Thu">
<label for="Fri">F</label><input type="checkbox" id="Fri">
<label for="time">Time</label> <input type="time" id="time">
<label for="time">Time </label><input type="time" id="time">
<button id="add-class">Add Class</button>
<p class="error-message hidden">
Please enter a class time and select at least one day.
</p>
</div>
<div class="class-list no-classes">
<hr/>
@ -65,12 +72,11 @@
<div>
<hr/>
<small>
<strong>Not Affiliated With Snow College</strong><br/>
<span>&copy; 2025 Kyler Olsen</span>
<a href="/">Home</a>
<a id="dark">Dark Mode</a>
<a href="/contact.html">Contact</a>
<span>Last Updated June 2025</span>
<strong>Not Affiliated With Snow College</strong>
</small>
</div>
</footer>

View File

@ -61,6 +61,19 @@ function remove_class(event) {
}
function add_class() {
// check if there is a time and at least one day selected
if (!document.querySelector("#time").value.trim() || (
!document.querySelector("#Mon").checked &&
!document.querySelector("#Tue").checked &&
!document.querySelector("#Wed").checked &&
!document.querySelector("#Thu").checked &&
!document.querySelector("#Fri").checked
)) {
document.querySelector(".error-message").classList.remove("hidden");
return;
}
document.querySelector(".error-message").classList.add("hidden");
if (document.querySelector(".class-list").classList.contains("no-classes")) {
document.querySelector(".class-list").classList.remove("no-classes");
}