meh

nah
oops
2023-04-29 05:30:50 -05:00 · 2023-04-29 05:29:06 -05:00 · 2023-04-29 05:22:44 -05:00 · 2023-04-29 05:15:48 -05:00
3 changed files with 103 additions and 134 deletions
--- a/index.html
+++ b/index.html
@@ -15,15 +15,15 @@
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>UT Grade Viewer</title>
  <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.0">
+  <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/Chart.js/2.9.4/Chart.js">
  </script>
 </head>

 <body>
-  <div class="wrapper">
-    <div class="about-text" value="">
+  <div class="bg"></div>
+  <div class="bg-text" value="">
    <h1>About</h1>
    <p>
      This is a database tool to assist students of the University of Texas - Austin in the biannual race for
@@ -59,7 +59,7 @@
        <label for="dropdown">Semester (under construction):</label>
        <select id="semester" name="dropdown">
          <option value="f2022">Fall 2022</option>
-            <option value="s2022">Summer 2022</option>
+          <option value="sum2022">Summer 2022</option>
          <option value="sp2022">Spring 2022</option>
          <option value="f2021">Fall 2021</option>
        </select>
@@ -71,16 +71,8 @@
      <canvas id="gradeBar" style="width:100%;height:100%;"></canvas>
    </div>
  </div>
-  </div>
  <footer>Created by Derek Chen
    <!-- because VAPA lecture was a bit boring that day -->
-    <iframe
-      src="https://ghbtns.com/github-btn.html?user=Derec4&repo=ut-grade-distribution-viewer&type=star&count=true&size=large"
-      frameborder="0" scrolling="0" width="170" height="30" title="GitHub">
-    </iframe>
-    <iframe src="https://ghbtns.com/github-btn.html?user=DereC4&type=follow&count=true&size=large" frameborder="0"
-      scrolling="0" width="170" height="30" title="GitHub">
-    </iframe>
  </footer>

  <script src='main.js'></script>
--- a/main.css
+++ b/main.css
@@ -1,7 +1,7 @@
 body {
  font-family: 'Helvetica Neue', sans-serif;
  background: #1b1a2a;
-  background: linear-gradient(90deg, rgba(61, 87, 92, 1) 0, #454454 100%);
+  background: linear-gradient(90deg, rgba(61, 87, 92, 1) 0, #454454 100%)
 }

 a {
@@ -10,101 +10,87 @@ a {
 }

 main {
-  padding: 10%
+  padding: 20px
 }

-h1 {
-  font-size: 2rem;
-  margin: 0 0 1rem 0
+main h1 {
+  font-size: 24px;
+  margin: 0 0 20px 0
 }

-p {
-  font-size: 1rem;
+main p {
+  font-size: 10px;
  line-height: 1.5;
-  margin: 0 0 1rem 0
+  margin: 0 0 20px 0
 }

 footer {
  background-color: #2e2d2d;
  color: #fff;
-  padding: 1%;
+  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: left;
-  font-size: 1rem
+  font-size: 13px
+}
+
+footer p {
+  font-size: 18px;
+  margin: 0
 }

 * {
-  box-sizing: border-box;
+  box-sizing: border-box
 }

-.wrapper {
-  display: grid;
-  gap: 2vw;
-  grid-auto-rows: minmax(100px, auto);
-  text-align: center;
-  color: #fff;
-  /* background-color: rgba(0, 0, 0, .4); */
-
+.bg {
+  background-image: url(tempbg.png);
+  filter: blur(8px);
+  -webkit-filter: blur(8px);
+  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover
 }

-.about-text {
+.bg-text {
+  background-color: #000;
  background-color: rgba(0, 0, 0, .4);
+  color: #fff;
+  font-weight: 700;
  border: 3px solid #f1f1f1;
-  grid-column: 1;
-  grid-row: 1;
+  margin: 5px auto;
+  position: absolute;
+  font-size: small;
+  top: 15%;
+  left: 50%;
+  transform: translate(-50%, -50%);
  width: 70%;
-  margin: 0 auto;
-  border-radius: 10px;
+  padding: 10px;
+  text-align: center
 }

 .bg-form {
+  background-color: #000;
  background-color: rgba(0, 0, 0, .4);
+  color: #fff;
+  font-weight: 700;
  border: 3px solid #f1f1f1;
-  grid-column: 1;
-  grid-row: 2;
-  font-weight: 600;
-  width: 50%;
-  margin: 0 auto;
-  border-radius: 10px;
+  margin: 5px auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: auto;
+  padding: 20px;
+  text-align: center
 }

 .chart-container {
  position: relative;
  margin: auto;
  height: 80vh;
-  width: 80vw;
-}
-
-/* Mobile */
-.bg-form {
-  padding: 14px;
-}
-
-.about-text {
-  padding: 14px;
-}
-
-/* Tablet */
-@media (min-width:600px) {
-  .bg-form {
-    padding: 20px;
-  }
-
-  .about-text {
-    padding: 14px;
-  }
-}
-
-/* Desktop */
-@media (min-width:900px) {
-  .bg-form {
-    padding: 24px;
-  }
-
-  .about-text {
-    padding: 14px;
-  }
+  width: 80vw
 }
--- a/main.js
+++ b/main.js
@@ -1,14 +1,13 @@
 const submitButton = document.getElementById('subBut');
 submitButton.addEventListener("click", parseName);
 var chartDiv = document.querySelector('#grades');
-var aboutDiv = document.querySelector('.about-text');
+var aboutDiv = document.querySelector('.bg-text');
 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 labels = ['A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'D-', 'F'];
 /*
 Parse the input form and class data
 */
@@ -47,11 +46,10 @@ async function PapaParse(department, num, name, sem) {
        case 'f2022':
            url = 'https://derec4.github.io/ut-grade-data/2022%20Fall.json';
            break;
-        case 's2022':
+        case 'sum2022':
            url = 'https://derec4.github.io/ut-grade-data/2022%20Summer.json';
            break;
        case 'sp2022':
-            // Temp, change when other data sets are added
            url = 'https://derec4.github.io/ut-grade-data/2022%20Spring.json';
            break;
        case 'f2021':
@@ -70,7 +68,7 @@ async function PapaParse(department, num, name, sem) {
                             .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");
+        console.log("Invalid name; trying again with just course number and prefix");
        selectedClass = cData.filter(cData => cData["Course Prefix"].includes(department))
                             .filter(cData => cData["Course Number"] == num.toString().toUpperCase());
    } 
@@ -81,7 +79,6 @@ async function PapaParse(department, num, name, sem) {
    }
    
    console.log(selectedClass);
-    
    let gradeDist = { 
        "A": 0,
        'A-': 0,
@@ -97,24 +94,19 @@ async function PapaParse(department, num, name, sem) {
        'F': 0,
        'Other': 0
    };
-
-    let lableName = selectedClass[0]["Course Title"];
    for(i in selectedClass) {
        let letterGrade = selectedClass[i]["Letter Grade"];
        let cnt = selectedClass[i]["Count of letter grade"]
        gradeDist[letterGrade] += cnt;
-        if(!(lableName === selectedClass[i]["Course Title"])) {
-            lableName = "Multiple courses found using the same ID; try specifying a course name!"
-        }
        // console.log(selectedClass[i]["Letter Grade"]);
        // console.log(selectedClass[i]["Count of letter grade"]);
    }
    console.log(gradeDist);
    if(gradeChart) {
        gradeChart.config.data = {
-            labels: gradeLabels,
+            labels: labels,
            datasets: [{
-                label: 'Grade distribution for \"' + lableName +"\"",
+                label: 'Grade distribution for \"' + selectedClass[0]["Course Title"] +"\"",
                data: Object.values(gradeDist),
                borderWidth: 2,
                // borderColor: '#36A2EB',
@@ -123,9 +115,8 @@ async function PapaParse(department, num, name, sem) {
            };
        gradeChart.update();
    } else {
-        loadChart(gradeDist, lableName);
+        loadChart(gradeDist, selectedClass[0]["Course Title"]);
        aboutDiv.style.visibility='hidden';
-        aboutDiv.style.display='none';
        chartDiv.style.display = '';
    }
 }
@@ -134,7 +125,7 @@ function loadChart(gradeDist, courseName) {
    gradeChart = new Chart(ctx, {
        type: 'bar',
        data: {
-        labels: gradeLabels,
+        labels: labels,
        datasets: [{
            label: 'Grade distribution for \"' + courseName + "\"",
            data: Object.values(gradeDist),
Author	SHA1	Message	Date
Derek Chen	50c7e0468b	meh	2023-04-29 05:30:50 -05:00
Derek Chen	4f1efd12b1	nah	2023-04-29 05:29:06 -05:00
Derek Chen	15ad0417fc	oops	2023-04-29 05:22:44 -05:00
Derek Chen	2363631674	Renaming how summer semester is handled	2023-04-29 05:15:48 -05:00