Formatting after learning some style; improve functions later

docs/main.js

@@ -3,13 +3,13 @@ submitButton.addEventListener("click", parseName);
 const chartDiv = document.querySelector('#grades');
 const aboutDiv = document.querySelector('.about-text');
 const formDiv = document.querySelector('.bg-form');
-if(chartDiv.getAttribute('value') == 'invisible'){
+if (chartDiv.getAttribute('value') == 'invisible') {
     chartDiv.style.display = 'none';
 }
 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)", ""];
 /*
  Parse the input form and class data
 */
@@ -20,19 +20,21 @@ async function parseName() {
     let department = document.getElementById('courseField').value.trim().toUpperCase();
     let semester = document.getElementById('semester').value;
     let departments = '';
-    if(!fiveDigit) {
+    if (!fiveDigit) {
         await fetch('https://derec4.github.io/ut-grade-data/2022prefixes.json')
             .then(res => res.json())
-        .then(data => { departments = data; });
-        if(!className && !classNum && !department) {
+            .then(data => {
+                departments = data;
+            });
+        if (!className && !classNum && !department) {
             alert("At least fill out the form...");
             return;
         }
-        if(!department || !classNum) {
+        if (!department || !classNum) {
             alert("Missing fields")
             return;
         }
-        if(!departments.includes(department)) {
+        if (!departments.includes(department)) {
             alert("Invalid Department");
             return;
         }
@@ -81,12 +83,14 @@ async function PapaParse(department, num, name, sem, unique) {
     }
     await fetch(url)
         .then(res => res.json())
-    .then(data => { cData = data; });
+        .then(data => {
+            cData = data;
+        });
     let selectedClass = '';
-    if(unique) {
+    if (unique) {
         selectedClass = cData.filter(cData => cData['Section Number'] == unique);
     } else {
-        if(sem.substring(0,2)==='s2') {
+        if (sem.substring(0, 2) === 's2') {
             console.log("Summer Semester Detected");
             selectedClass = cData.filter(cData => cData["Course Prefix"] == department)
                 .filter(cData => cData["Course Number"].includes(num.toString().toUpperCase()))
@@ -109,7 +113,7 @@ async function PapaParse(department, num, name, sem, unique) {
             }
         }
     }
-    if(selectedClass.length == 0) {
+    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;
@@ -134,34 +138,34 @@ async function PapaParse(department, num, name, sem, unique) {
 
     let lableName = selectedClass[0]["Course Title"];
     let sameName = true;
-    for(i in selectedClass) {
+    for (i in selectedClass) {
         let letterGrade = selectedClass[i]["Letter Grade"];
         let cnt = selectedClass[i]["Count of letter grade"]
         gradeDist[letterGrade] += cnt;
-        if(sameName && !(lableName === selectedClass[i]["Course Title"])) {
-            lableName = (sem.substring(0,2)==='s2' ? "Remember, summer courses have special prefixes!" : "Multiple courses detected; try specifying a course name!");
+        if (sameName && !(lableName === selectedClass[i]["Course Title"])) {
+            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"]);
     }
     console.log(gradeDist);
-    if(gradeChart) {
+    if (gradeChart) {
         gradeChart.config.data = {
             labels: gradeLabels,
             datasets: [{
-                label: '\"' + lableName +"\"",
+                label: '\"' + lableName + "\"",
                 data: Object.values(gradeDist),
                 borderWidth: 2,
                 // borderColor: '#36A2EB',
-                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)", ""],
+                backgroundColor: backgroundColor,
             }]
         };
         gradeChart.update();
     } else {
         loadChart(gradeDist, lableName);
-        aboutDiv.style.visibility='hidden';
-        aboutDiv.style.display='none';
+        aboutDiv.style.visibility = 'hidden';
+        aboutDiv.style.display = 'none';
         chartDiv.style.display = '';
         formDiv.setAttribute("style", "grid-row: 1");
     }
@@ -176,7 +180,7 @@ function loadChart(gradeDist, courseName) {
                 label: '\"' + courseName + "\"",
                 data: Object.values(gradeDist),
                 borderWidth: 2,
-            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)", ""],
+                backgroundColor: backgroundColor,
             }]
         },
         options: {