Merge pull request #1 from DereC4/semesterSelection

Semester selection

index.html

@@ -14,7 +14,7 @@
   <meta charset='utf-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <title>UT Grade Viewer</title>
-  <link rel="icon" href="data\icon.pngs">
+  <link rel="icon" href="https://derec4.github.io/ut-grade-distribution-viewer/data/icon.png">
   <meta name='viewport' content='width=device-width, initial-scale=1'>
   <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"
@@ -60,10 +60,11 @@
       <!-- Dropdown menu for semester selection -->
       <form>
         <label for="dropdown">Semester (under construction):</label>
-        <select id="dropdown" name="dropdown">
-          <option value="option1">Fall 2022</option>
-          <option value="option2">Spring 2022</option>
-          <option value="option3">Fall 2021</option>
+        <select id="semester" name="dropdown">
+          <option value="f2022">Fall 2022</option>
+          <option value="s2022">Summer 2022</option>
+          <option value="sp2022">Spring 2022</option>
+          <option value="f2021">Fall 2021</option>
         </select>
         <br><br>
       </form>

main.css

@@ -14,12 +14,12 @@ main {
 }
 
 main h1 {
-  font-size: 36px;
+  font-size: 24px;
   margin: 0 0 20px 0
 }
 
 main p {
-  font-size: 18px;
+  font-size: 10px;
   line-height: 1.5;
   margin: 0 0 20px 0
 }
@@ -63,11 +63,12 @@ footer p {
   border: 3px solid #f1f1f1;
   margin: 5px auto;
   position: absolute;
+  font-size: small;
   top: 15%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 70%;
-  padding: 20px;
+  padding: 10px;
   text-align: center
 }
 

main.js

@@ -9,12 +9,13 @@ var gradeChart;
 const ctx = document.getElementById("gradeBar");
 
 /*
- Parse the name
+ Parse the input form and class data
 */
 async function parseName() {
     let className = document.getElementById('courseName').value;
     let classNum = document.getElementById('courseNum').value;
     let department = document.getElementById('courseField').value.trim();
+    let semester = document.getElementById('semester').value;
     let departments = '';
     await fetch('https://derec4.github.io/ut-grade-data/2022prefixes.json')
     .then(res => res.json())
@@ -32,13 +33,35 @@ async function parseName() {
         return;
     } 
     console.log(department, classNum.toString(), className.trim());
-    await PapaParse(department, classNum.toString(), className.trim());
+    await PapaParse(department, classNum.toString(), className.trim(), semester);
 }
 
-async function PapaParse(department, num, name) {
+/*
+ Fetch the necessary database depending on semester and filter based on the input data
+*/
+async function PapaParse(department, num, name, sem) {
     let cData = '';
-    // await fetch('https://derec4.github.io/UT-Grade-Dist/2022prefixes.json');
-    await fetch('https://derec4.github.io/ut-grade-data/2022%20Fall.json')
+    // console.log(sem);
+    let url = '';
+    switch (sem) {
+        case 'f2022':
+            url = 'https://derec4.github.io/ut-grade-data/2022%20Fall.json';
+            break;
+        case 's2022':
+            url = 'https://derec4.github.io/ut-grade-data/2022%20Fall.json';
+            break;
+        case 'sp2022':
+            // Temp, change when other data sets are added
+            url = 'https://derec4.github.io/ut-grade-data/2022%20Fall.json';
+            break;
+        case 'f2021':
+            url = 'https://derec4.github.io/ut-grade-data/2022%20Fall.json';
+            break;          
+        default:
+            url = 'https://derec4.github.io/ut-grade-data/2022%20Fall.json';
+            break;
+    }
+    await fetch(url)
     .then(res => res.json())
     .then(data => { cData = data; });
 
@@ -53,7 +76,7 @@ async function PapaParse(department, num, name) {
     } 
     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 on " + className);
+        alert("No data found");
         return;
     }