Add error handling for class input and enhance error message styling

www/index.css

@@ -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;
+}

www/index.html

@@ -32,6 +32,10 @@
         <div class="class-input">
             <hr/>
             <h2>Add Class</h2>
+            <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">
@@ -40,6 +44,9 @@
             <label for="Fri">F</label><input type="checkbox" id="Fri">
             <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>

www/index.js

@@ -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");
     }