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
3 changed files with 136 additions and 105 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'>
+  <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="wrapper">
-  <div class="bg-text" value="">
+    <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
@@ -59,7 +59,7 @@
          <label for="dropdown">Semester (under construction):</label>
          <select id="semester" name="dropdown">
            <option value="f2022">Fall 2022</option>
-          <option value="sum2022">Summer 2022</option>
+            <option value="s2022">Summer 2022</option>
            <option value="sp2022">Spring 2022</option>
            <option value="f2021">Fall 2021</option>
          </select>
@@ -71,8 +71,16 @@
        <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 {
+h1 {
-  font-size: 24px;
+  font-size: 2rem;
-  margin: 0 0 20px 0
+  margin: 0 0 1rem 0
 }
-main p {
+p {
-  font-size: 10px;
+  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
+  font-size: 1rem
 }
 footer p {
  font-size: 18px;
  margin: 0
 }
 * {
-  box-sizing: border-box
+  box-sizing: border-box;
 }
-.bg {
+.wrapper {
-  background-image: url(tempbg.png);
+  display: grid;
-  filter: blur(8px);
+  gap: 2vw;
-  -webkit-filter: blur(8px);
+  grid-auto-rows: minmax(100px, auto);
-  height: 100%;
+  text-align: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover
 }
 .bg-text {
  background-color: #000;
  background-color: rgba(0, 0, 0, .4);
  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;
+  grid-column: 1;
-  position: absolute;
+  grid-row: 1;
  font-size: small;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
-  padding: 10px;
+  margin: 0 auto;
-  text-align: center
+  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;
+  grid-column: 1;
-  position: absolute;
+  grid-row: 2;
-  top: 50%;
+  font-weight: 600;
-  left: 50%;
+  width: 50%;
-  transform: translate(-50%, -50%);
+  margin: 0 auto;
-  width: auto;
+  border-radius: 10px;
  padding: 20px;
  text-align: center
 }
 .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,13 +1,14 @@
 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 labels = ['A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'D-', 'F'];
+const gradeLabels = ["A", "A-", "B+", "B", "B-", "C+", "C", "C-", "D+", "D", "D-", "F"];
 /*
 Parse the input form and class data
 */
@@ -46,10 +47,11 @@ async function PapaParse(department, num, name, sem) {
        case 'f2022':
            url = 'https://derec4.github.io/ut-grade-data/2022%20Fall.json';
            break;
-        case 'sum2022':
+        case 's2022':
            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':
@@ -68,7 +70,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 course number and prefix");
+        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());
    } 
@@ -79,6 +81,7 @@ async function PapaParse(department, num, name, sem) {
    }
    console.log(selectedClass);
    let gradeDist = { 
        "A": 0,
        'A-': 0,
@@ -94,19 +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: labels,
+            labels: gradeLabels,
            datasets: [{
-                label: 'Grade distribution for \"' + selectedClass[0]["Course Title"] +"\"",
+                label: 'Grade distribution for \"' + lableName +"\"",
                data: Object.values(gradeDist),
                borderWidth: 2,
                // borderColor: '#36A2EB',
@@ -115,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 = '';
    }
 }
@@ -125,7 +134,7 @@ function loadChart(gradeDist, courseName) {
    gradeChart = new Chart(ctx, {
        type: 'bar',
        data: {
-        labels: labels,
+        labels: gradeLabels,
        datasets: [{
            label: 'Grade distribution for \"' + courseName + "\"",
            data: Object.values(gradeDist),
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