diff --git a/docs/index.html b/docs/index.html
index f3676ea..2a95cff 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -58,7 +58,6 @@
         <input type="text" id="sectionNum" name="fname" required><br><br> -->
         <!-- <label for="courseInstructor">Instructor (Optional):</label>
         <input type="text" id="courseInstructor" name="fname"><br><br> -->
-        <button type="button" id="subBut">Submit</button><br><br>
   
         <!-- Dropdown menu for semester selection -->
         <form>
@@ -76,6 +75,7 @@
           </select>
           <br><br>
         </form>
+        <button type="button" id="subBut">Submit</button><br><br>
       </form>
       <div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw">
         
diff --git a/docs/main.js b/docs/main.js
index 82a05c0..3751be6 100644
--- a/docs/main.js
+++ b/docs/main.js
@@ -1,28 +1,30 @@
-const submitButton = document.getElementById('subBut');
-const chartDiv = document.querySelector('#grades');
 const aboutDiv = document.querySelector('.about-text');
-const formDiv = document.querySelector('.bg-form');
-var gradeChart;
-const ctx = document.getElementById("gradeBar");
-const gradeLabels = ["A", "A-", "B+", "B", "B-", "C+", "C", "C-", "D+", "D", "D-", "F"];
 const backgroundColor = ["rgb(98, 244, 54)", "rgb(129, 231, 10)", "rgb(151, 218, 0)", "rgb(168, 204, 0)", "rgb(181, 190, 0)", "rgb(191, 176, 0)", "rgb(199, 162, 0)", "rgb(205, 148, 0)", "rgb(209, 133, 0)", "rgb(211, 119, 0)", "rgb(210, 105, 0)", "rgb(208, 91, 23)", "rgb(204, 78, 36)", "rgb(198, 66, 46)", "rgb(190, 54, 54)", ""];
+const chartDiv = document.querySelector('#grades');
+const ctx = document.getElementById("gradeBar");
+const formDiv = document.querySelector('.bg-form');
+const gradeLabels = ["A", "A-", "B+", "B", "B-", "C+", "C", "C-", "D+", "D", "D-", "F"];
+const submitButton = document.getElementById('subBut');
+var gradeChart;
+
 submitButton.addEventListener("click", parseName);
 if (chartDiv.getAttribute('value') == 'invisible') {
     chartDiv.style.display = 'none';
 }
-/*
- Parse the input form and class data
-*/
+
+/**
+ * Parse the input forms and determines if any fields are missing
+ */
 async function parseName() {
     let className = document.getElementById('courseName').value.toUpperCase();
     let classNum = document.getElementById('courseNum').value;
     let department = document.getElementById('courseField').value.trim().toUpperCase();
+    let departmentList = '';
     let semester = document.getElementById('semester').value;
-    let departments = '';
     await fetch('https://derec4.github.io/ut-grade-data/2022prefixes.json')
         .then(res => res.json())
         .then(data => {
-            departments = data;
+            departmentList = data;
         });
     if (!className && !classNum && !department) {
         alert("At least fill out the form...");
@@ -32,7 +34,7 @@ async function parseName() {
         alert("Missing fields")
         return;
     }
-    if (!departments.includes(department)) {
+    if (!departmentList.includes(department)) {
         alert("Invalid Department");
         return;
     }
@@ -40,9 +42,11 @@ async function parseName() {
     await PapaParse(department, classNum.toString(), className.trim(), semester);
 }
 
-/*
- Fetch the necessary database depending on semester and filter based on the input data
-*/
+/**
+ * Fetch the necessary table depending on the user selected semester. 
+ * Then, filter through the table based on the input data to get grade info for the class.
+ * Displays an alert if nothing could be found.
+ */
 async function PapaParse(department, num, name, sem) {
     let cData = '';
     let url = '';
@@ -90,7 +94,6 @@ async function PapaParse(department, num, name, sem) {
             .filter(cData => cData["Course Number"].includes(num.toString().toUpperCase()))
             .filter(cData => cData["Course Title"].includes(name));
         if (selectedClass.length == 0) {
-
             // summer names are weird
             console.log("Invalid name; trying again with just the course number");
             selectedClass = cData.filter(cData => cData["Course Prefix"] == department)
@@ -101,7 +104,6 @@ async function PapaParse(department, num, name, sem) {
             .filter(cData => cData["Course Number"] == num.toString().toUpperCase())
             .filter(cData => cData["Course Title"].includes(name));
         if (selectedClass.length == 0) {
-
             // Possible that the class name was typed wrong; try again with just the course number
             console.log("Invalid name; trying again with just the course number");
             selectedClass = cData.filter(cData => cData["Course Prefix"] == department)
@@ -109,7 +111,6 @@ async function PapaParse(department, num, name, sem) {
         }
     }
     if (selectedClass.length == 0) {
-
         // Still can't find anything? Just exit without making a chart and alert that nothing could be found
         alert("No data found. Try again :(");
         return;
@@ -143,6 +144,7 @@ async function PapaParse(department, num, name, sem) {
             lableName = (sem.substring(0, 2) === 's2' ? "Remember, summer courses have special prefixes!" : "Multiple courses detected; try specifying a course name!");
             sameName = false;
         }
+
         // console.log(selectedClass[i]["Letter Grade"]);
         // console.log(selectedClass[i]["Count of letter grade"]);
     }