Add error handling for class input and enhance error message styling
This commit is contained in:
parent
006e86da56
commit
52b5e96854
|
|
@ -113,3 +113,17 @@ body[mode="dark"] a {
|
||||||
.no-classes {
|
.no-classes {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
color: red;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[mode="dark"] .error-message {
|
||||||
|
color: #ff6666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -32,14 +32,21 @@
|
||||||
<div class="class-input">
|
<div class="class-input">
|
||||||
<hr/>
|
<hr/>
|
||||||
<h2>Add Class</h2>
|
<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="Mon">M</label><input type="checkbox" id="Mon">
|
||||||
<label for="Tue">T</label><input type="checkbox" id="Tue">
|
<label for="Tue">T</label><input type="checkbox" id="Tue">
|
||||||
<label for="Wed">W</label><input type="checkbox" id="Wed">
|
<label for="Wed">W</label><input type="checkbox" id="Wed">
|
||||||
<label for="Thu">Th</label><input type="checkbox" id="Thu">
|
<label for="Thu">Th</label><input type="checkbox" id="Thu">
|
||||||
<label for="Fri">F</label><input type="checkbox" id="Fri">
|
<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>
|
<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>
|
||||||
<div class="class-list no-classes">
|
<div class="class-list no-classes">
|
||||||
<hr/>
|
<hr/>
|
||||||
|
|
@ -65,12 +72,11 @@
|
||||||
<div>
|
<div>
|
||||||
<hr/>
|
<hr/>
|
||||||
<small>
|
<small>
|
||||||
<strong>Not Affiliated With Snow College</strong><br/>
|
|
||||||
<span>© 2025 Kyler Olsen</span>
|
<span>© 2025 Kyler Olsen</span>
|
||||||
<a href="/">Home</a>
|
<a href="/">Home</a>
|
||||||
<a id="dark">Dark Mode</a>
|
<a id="dark">Dark Mode</a>
|
||||||
<a href="/contact.html">Contact</a>
|
<a href="/contact.html">Contact</a>
|
||||||
<span>Last Updated June 2025</span>
|
<strong>Not Affiliated With Snow College</strong>
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
13
www/index.js
13
www/index.js
|
|
@ -61,6 +61,19 @@ function remove_class(event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function add_class() {
|
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")) {
|
if (document.querySelector(".class-list").classList.contains("no-classes")) {
|
||||||
document.querySelector(".class-list").classList.remove("no-classes");
|
document.querySelector(".class-list").classList.remove("no-classes");
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue