Clean up and comment code

Remove unnecessary code and add/revise comments

public/css/home.css

@@ -509,6 +509,7 @@ button:hover {
   height: 45px;
 }
 
+/* Hide the original select menu */
 .day_custom-select select{
   display: none;
 }
@@ -517,7 +518,7 @@ button:hover {
   background-color: var(--green);
 }
 
-/* Style the arrow inside the select element: */
+/* Style the arrow inside the select element */
 .day_select-selected:after {
   position: absolute;
   content: "";
@@ -529,13 +530,13 @@ button:hover {
   border-color: white transparent transparent transparent;
 }
 
-/* Point the arrow upwards when the select box is open (active): */
+/* Point the arrow upwards when the select box is open */
 .day_select-selected.day_select-arrow-active:after {
   border-color: transparent transparent white transparent;
   top: 10px;
 }
 
-/* style the items (options), including the selected item: */
+/* Style the options, including the selected option */
 .day_select-items div,.day_select-selected {
   color: white;
   padding: 10px 16px;
@@ -544,7 +545,7 @@ button:hover {
   cursor: pointer;
 }
 
-/* Style items (options): */
+/* Style options */
 .day_select-items {
   position: absolute;
   background-color: var(--green);
@@ -554,14 +555,14 @@ button:hover {
   z-index: 99;
 }
 
-/* Hide the items when the select box is closed: */
+/* Hide the items when the select box is closed */
 .day_select-hide {
   display: none;
 }
 
+/* Change the background color on hover */
 .day_select-items div:hover, .same-as-selected {
   background-color: var(--green1);
-  color: white;
 }
 
 div.tabcontent, div.tab {

public/home.html

@@ -284,7 +284,7 @@ <h3 id="import_modal_title">Import Data</h3>
       <span class="slider round"></span>
       <p id="schedule_title" class="unselectable">Black</p>
     </label>-->
-    <div class="day_custom-select">
+    <div class="day_custom-select" id="day_custom-select">
       <select id="day_select" onchange="schedule_toggle(value);">
         <option value="-1">Select Day</option>
         <option value="1">Monday (Silver)</option>

public/js/extraFunctions.js

@@ -1167,48 +1167,40 @@ let initialize_tableData_dropdown = function() {
   }
 }
 
+// Initialize the dropdown menu by creating divs around each option
 let initialize_dayOfWeek_dropdown = function() {
-  let x, i, j, selElmnt, a, b, c;
-  /* Look for any elements with the class "day_custom-select": */
-  x = document.getElementsByClassName("day_custom-select");
-  for (i = 0; i < x.length; i++) {
-    selElmnt = x[i].getElementsByTagName("select")[0];
-    /* For each element, create a new DIV that will act as the selected item: */
-    a = document.createElement("DIV");
-    a.setAttribute("class", "day_select-selected");
-    // a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
-    x[i].appendChild(a);
-    /* For each element, create a new DIV that will contain the option list: */
-    b = document.createElement("DIV");
-    b.setAttribute("class", "day_select-items select-hide");
-    for (j = 1; j < selElmnt.length; j++) {
-      /* For each option in the original select element,
-      create a new DIV that will act as an option item: */
-      let bs;
-      if (j === 1 || j === 4) {
-        bs = "silver";
-      } else if (j === 2 || j === 5) {
-        bs = "black";
-      }
-      c = document.createElement("DIV");
-      c.id = `day_select-items-${selElmnt.options[j].value}`;
-      c.innerHTML = selElmnt.options[j].innerHTML;
-      c.addEventListener("click", tableData_option_onclick);
-      b.appendChild(c);
-    }
-    x[i].appendChild(b);
-    a.addEventListener("click", function(e) {
-      /* When the select box is clicked, close any other select boxes,
-      and open/close the current select box: */
-      e.stopPropagation();
-      closeAllSelect(this);
-      this.nextSibling.classList.toggle("select-hide");
-      this.classList.toggle("select-arrow-active");
-      $('.tableData_select-selected').toggleClass("activated-selected-item");
-      $('.tableData_select-items div').toggleClass("activated-select-items");
-    });
-    document.addEventListener("click", closeAllSelect);
+  let i, selElmnt, a, b, c;
+  // Find the day select menu
+  selElmnt = document.getElementById("day_custom-select").getElementsByTagName("select")[0];
+  // Create a new div for the select menu and assign it a class
+  a = document.createElement("DIV");
+  a.setAttribute("class", "day_select-selected");
+  document.getElementById("day_custom-select").appendChild(a);
+  a.innerHTML = "Select Day";
+  // Create a new div to store the option list
+  b = document.createElement("DIV");
+  b.setAttribute("class", "day_select-items select-hide");
+  // Loop through each of the options and add a div for each one
+  for (i = 1; i < selElmnt.length; i++) {
+    // Possibly, somewhere in here we can add an onclick attribute for each option
+    c = document.createElement("DIV");
+    c.id = `day_select-items-${selElmnt.options[i].value}`;
+    c.innerHTML = selElmnt.options[i].innerHTML;
+    c.addEventListener("click", tableData_option_onclick);
+    b.appendChild(c);
   }
+  document.getElementById("day_custom-select").appendChild(b);
+  // Close all other select boxes when one is clicked
+  a.addEventListener("click", function(e) {
+    e.stopPropagation();
+    closeAllSelect(this);
+    this.nextSibling.classList.toggle("select-hide");
+    this.classList.toggle("select-arrow-active");
+    $('.tableData_select-selected').toggleClass("activated-selected-item");
+    $('.tableData_select-items div').toggleClass("activated-select-items");
+  });
+  // Close the select menu when you click outside of it
+  document.addEventListener("click", closeAllSelect);
 }
 
 // To add a tooltip to anything, follow these 3 easy steps

public/js/home.js

@@ -956,6 +956,7 @@ function responseCallback(response, includedTerms) {
         success: scheduleCallback
     });
 
+    initialize_dayOfWeek_dropdown();
     setup_tooltips();
 }
 
@@ -999,8 +1000,6 @@ function responseCallbackPartial(response) {
 function scheduleCallback(response) {
     if (!currentTableData.schedule) currentTableData.schedule = response;
 
-    initialize_dayOfWeek_dropdown();
-
     document.getElementById("scheduleTable").style.rowBackgroundColor = "black";
     //the following lines are used to set up the schedule table correctly