REsponsive done :X))))

Stuff
Star
2023-04-29 16:42:09 -05:00 · 2023-04-29 16:37:31 -05:00 · 2023-04-29 16:32:03 -05:00 · 2023-04-29 16:24:30 -05:00 · 2023-04-29 16:02:45 -05:00 · 2023-04-29 16:01:12 -05:00
4 changed files with 148 additions and 130 deletions
--- a/index.html
+++ b/index.html
@@ -15,64 +15,72 @@
  <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'>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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="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
-      Jazz Appr- I mean course registration process.
-    </p>
-    <p>
-      I noticed other grade sites used outdated data, so I made
-      my own. Enjoy!
-    </p>
-  </div>
-  <div class="bg-form">
-    <p>
-      Keep course names as close to the
-      <a href="https://registrar.utexas.edu/schedules">official course name</a>
-      as possible
-    </p>
-    <br>
-    <form action="">
-
-      <!-- Data is separated into course number, course prefi;x, and course name-->
-      <label for="courseField">Department (Ex: "MUS"):</label>
-      <input type="text" id="courseField" name="fname" required><br><br>
-      <label for="courseNum">Course Number (Ex: "307"):</label>
-      <input type="text" id="courseNum" name="fname" required><br><br>
-      <label for="courseName">Course Name (Optional, useful if classes have the same number like UGS 303):</label>
-      <input type="text" id="courseName" name="fname"><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>
-        <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="sp2022">Spring 2022</option>
-          <option value="f2021">Fall 2021</option>
-        </select>
-        <br><br>
+  <div class="wrapper">
+    <div class="about-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
+        Jazz Appr- I mean course registration process.
+      </p>
+      <p>
+        I noticed other grade sites used outdated data, so I made
+        my own. Enjoy!
+      </p>
+    </div>
+    <div class="bg-form">
+      <p>
+        Keep course names as close to the
+        <a href="https://registrar.utexas.edu/schedules">official course name</a>
+        as possible
+      </p>
+      <br>
+      <form action="">
+  
+        <!-- Data is separated into course number, course prefi;x, and course name-->
+        <label for="courseField">Department (Ex: "MUS"):</label>
+        <input type="text" id="courseField" name="fname" required><br><br>
+        <label for="courseNum">Course Number (Ex: "307"):</label>
+        <input type="text" id="courseNum" name="fname" required><br><br>
+        <label for="courseName">Course Name (Optional, useful if classes have the same number like UGS 303):</label>
+        <input type="text" id="courseName" name="fname"><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>
+          <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="sp2022">Spring 2022</option>
+            <option value="f2021">Fall 2021</option>
+          </select>
+          <br><br>
+        </form>
      </form>
-    </form>
-    <div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw">
-      <!--Bar graph stuff-->
-      <canvas id="gradeBar" style="width:100%;height:100%;"></canvas>
+      <div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw">
+        <!--Bar graph stuff-->
+        <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,87 +10,101 @@ a {
 }

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

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

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

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

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

-.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
-}
-
-.bg-text {
-  background-color: #000;
-  background-color: rgba(0, 0, 0, .4);
+.wrapper {
+  display: grid;
+  gap: 2vw;
+  grid-auto-rows: minmax(100px, auto);
+  text-align: center;
  color: #fff;
-  font-weight: 700;
+  /* background-color: rgba(0, 0, 0, .4); */
+
+}
+
+.about-text {
+  background-color: rgba(0, 0, 0, .4);
  border: 3px solid #f1f1f1;
-  margin: 5px auto;
-  position: absolute;
-  font-size: small;
-  top: 15%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  grid-column: 1;
+  grid-row: 1;
  width: 70%;
-  padding: 10px;
-  text-align: center
+  margin: 0 auto;
+  border-radius: 10px;
 }

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

 .chart-container {
  position: relative;
  margin: auto;
  height: 80vh;
-  width: 80vw
+  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;
+  }
 }
--- a/main.js
+++ b/main.js
@@ -1,12 +1,13 @@
 const submitButton = document.getElementById('subBut');
 submitButton.addEventListener("click", parseName);
 var chartDiv = document.querySelector('#grades');
-var aboutDiv = document.querySelector('.bg-text');
+var aboutDiv = document.querySelector('.about-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"];

 /*
 Parse the input form and class data
@@ -32,7 +33,7 @@ async function parseName() {
        alert("Invalid Department");
        return;
    } 
-    console.log(department, classNum.toString(), className.trim());
+    console.log(department, classNum.toString(), className.trim(), semester);
    await PapaParse(department, classNum.toString(), className.trim(), semester);
 }

@@ -41,7 +42,6 @@ async function parseName() {
 */
 async function PapaParse(department, num, name, sem) {
    let cData = '';
-    // console.log(sem);
    let url = '';
    switch (sem) {
        case 'f2022':
@@ -70,17 +70,18 @@ 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("Second Option");
+        console.log("Invalid name; trying again with just the course number");
        selectedClass = cData.filter(cData => cData["Course Prefix"].includes(department))
                             .filter(cData => cData["Course Number"] == num.toString().toUpperCase());
    } 
    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");
+        alert("No data found. Try again :(");
        return;
    }
    
    console.log(selectedClass);
+    
    let gradeDist = { 
        "A": 0,
        'A-': 0,
@@ -96,31 +97,24 @@ 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: [           
-                'A',
-                'A-',
-                'B+',
-                'B',
-                'B-',
-                'C+',
-                'C',
-                'C-',
-                'D+',
-                'D',
-                'D-',
-                'F'],
+            labels: gradeLabels,
            datasets: [{
-                label: 'Grade distribution for \"' + selectedClass[0]["Course Title"] +"\"",
+                label: 'Grade distribution for \"' + lableName +"\"",
                data: Object.values(gradeDist),
                borderWidth: 2,
                // borderColor: '#36A2EB',
@@ -129,8 +123,9 @@ async function PapaParse(department, num, name, sem) {
            };
        gradeChart.update();
    } else {
-        loadChart(gradeDist, selectedClass[0]["Course Title"]);
+        loadChart(gradeDist, lableName);
        aboutDiv.style.visibility='hidden';
+        aboutDiv.style.display='none';
        chartDiv.style.display = '';
    }
 }
@@ -139,19 +134,7 @@ function loadChart(gradeDist, courseName) {
    gradeChart = new Chart(ctx, {
        type: 'bar',
        data: {
-        labels: [           
-            'A',
-            'A-',
-            'B+',
-            'B',
-            'B-',
-            'C+',
-            'C',
-            'C-',
-            'D+',
-            'D',
-            'D-',
-            'F'],
+        labels: gradeLabels,
        datasets: [{
            label: 'Grade distribution for \"' + courseName + "\"",
            data: Object.values(gradeDist),
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<url>
+  <loc>https://derec4.github.io/ut-grade-distribution-viewer/</loc>
+  <lastmod>2023-04-29T05:59:34+00:00</lastmod>
+</url>
+
+
+</urlset>
Author	SHA1	Message	Date
HW Computer	0b8efb3d52	REsponsive done :X))))	2023-04-29 16:42:09 -05:00
HW Computer	db92866bfe	Stuff	2023-04-29 16:37:31 -05:00
HW Computer	8b907f6f97	Star	2023-04-29 16:32:03 -05:00
HW Computer	dd15854ae7	Looking good	2023-04-29 16:24:30 -05:00
HW Computer	8d7d01f0de	For my ne;xt trick i'll make aboutDiv DISSAPEAR	2023-04-29 16:02:45 -05:00
HW Computer	f587a0aa68	More	2023-04-29 16:01:12 -05:00
HW Computer	534cb4263d	Rounded cornerssss	2023-04-29 15:57:07 -05:00
HW Computer	b87ed8a9c6	Ok deleting every single line of css we have and starting OVER	2023-04-29 15:40:17 -05:00
HW Computer	e006e38cb8	Progress	2023-04-29 15:34:40 -05:00
HW Computer	5e6490ad57	Responsive 1.0	2023-04-29 15:18:28 -05:00
Derek Chen	505fc9d1ae	Merge pull request #4 from DereC4/handleMultipleClasses Handle multiple classes	2023-04-29 05:51:21 -05:00
Derek Chen	ef357ec1fa	Wait that was pretty smooth	2023-04-29 05:45:06 -05:00
Derek Chen	1556395b73	check for multiple	2023-04-29 05:43:10 -05:00
Derek Chen	2b2050a729	simplified label	2023-04-29 05:33:58 -05:00
Derek Chen	565c326bfc	oops almost broke everything again	2023-04-29 05:31:26 -05:00
Derek Chen	5657a1be59	Cleaning up	2023-04-29 05:14:09 -05:00
Derek Chen	cae0828bb4	Sitemap	2023-04-29 05:12:06 -05:00