From 52b5e9685406164f605fcc14f530470299e017fe Mon Sep 17 00:00:00 2001
From: Kyler <kylerolsen17@gmail.com>
Date: Fri, 11 Jul 2025 01:27:15 -0600
Subject: [PATCH] Add error handling for class input and enhance error message
 styling

---
 www/index.css  | 14 ++++++++++++++
 www/index.html | 14 ++++++++++----
 www/index.js   | 13 +++++++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/www/index.css b/www/index.css
index d8dde0f..27782c5 100644
--- a/www/index.css
+++ b/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;
+}
diff --git a/www/index.html b/www/index.html
index a702ebc..21cc99d 100644
--- a/www/index.html
+++ b/www/index.html
@@ -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>
diff --git a/www/index.js b/www/index.js
index 6416f51..6700060 100644
--- a/www/index.js
+++ b/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");
     }