DerexXD/ut-grade-distribution-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: DerexXD:semesterSelection
Branches Tags
DerexXD:master DerexXD:responsive DerexXD:handleMultipleClasses DerexXD:summerHandling DerexXD:checkPrefix DerexXD:semesterSelection
..
compare: DerexXD:responsive
Branches Tags
DerexXD:master DerexXD:responsive DerexXD:handleMultipleClasses DerexXD:summerHandling DerexXD:checkPrefix DerexXD:semesterSelection

22 Commits
semesterSe ... responsive

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
Derek Chen
c69dfcaf0d Merge pull request #3 from DereC4/semesterSelection 
Semester selection
 2023-04-29 00:59:07 -05:00
Derek Chen
78f91df79f Delete tempbg.png 2023-04-25 19:37:22 -05:00
Derek Chen
dd07762fa0 Merge pull request #2 from DereC4/semesterSelection 
Semester selection
 2023-04-25 19:33:29 -05:00
Derek Chen
ee63bdfeb2 Update README.md 2023-04-25 19:31:44 -05:00
Derek Chen
9a9b238214 Merge pull request #1 from DereC4/semesterSelection 
Semester selection
 2023-04-25 00:04:03 -05:00
6 changed files with 153 additions and 131 deletions
Expand all files Collapse all files

6
README.md
View File

@@ -1,4 +1,8 @@
# Why is this a thing? ## How do I access the website?
https://derec4.github.io/ut-grade-distribution-viewer/
## Why is this a thing?
I'm sure you've all seen this before: I'm sure you've all seen this before:

14
index.html
View File

@@ -15,15 +15,15 @@
<meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>UT Grade Viewer</title> <title>UT Grade Viewer</title>
<link rel="icon" href="https://derec4.github.io/ut-grade-distribution-viewer/data/icon.png"> <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'> <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 src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script> </script>
</head> </head>
<body> <body>
<div class="bg"></div> <div class="wrapper">
<div class="bg-text" value=""> <div class="about-text" value="">
<h1>About</h1> <h1>About</h1>
<p> <p>
This is a database tool to assist students of the University of Texas - Austin in the biannual race for This is a database tool to assist students of the University of Texas - Austin in the biannual race for
@@ -71,8 +71,16 @@
<canvas id="gradeBar" style="width:100%;height:100%;"></canvas> <canvas id="gradeBar" style="width:100%;height:100%;"></canvas>
</div> </div>
</div> </div>
</div>
<footer>Created by Derek Chen <footer>Created by Derek Chen
<!-- because VAPA lecture was a bit boring that day --> <!-- 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> </footer>
<script src='main.js'></script> <script src='main.js'></script>

114
main.css
View File

@@ -1,7 +1,7 @@
body { body {
font-family: 'Helvetica Neue', sans-serif; font-family: 'Helvetica Neue', sans-serif;
background: #1b1a2a; 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 { a {
@@ -10,87 +10,101 @@ a {
} }
main { 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; line-height: 1.5;
margin: 0 0 20px 0 margin: 0 0 1rem 0
} }
footer { footer {
background-color: #2e2d2d; background-color: #2e2d2d;
color: #fff; color: #fff;
padding: 10px; padding: 1%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
text-align: left; 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; 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; 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%; width: 70%;
padding: 10px; margin: 0 auto;
text-align: center border-radius: 10px;
} }
.bg-form { .bg-form {
background-color: #000;
background-color: rgba(0, 0, 0, .4); background-color: rgba(0, 0, 0, .4);
color: #fff;
font-weight: 700;
border: 3px solid #f1f1f1; 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 { .chart-container {
position: relative; position: relative;
margin: auto; margin: auto;
height: 80vh; 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;
}
} }

49
main.js
View File

@@ -1,12 +1,13 @@
const submitButton = document.getElementById('subBut'); const submitButton = document.getElementById('subBut');
submitButton.addEventListener("click", parseName); submitButton.addEventListener("click", parseName);
var chartDiv = document.querySelector('#grades'); var chartDiv = document.querySelector('#grades');
var aboutDiv = document.querySelector('.bg-text'); var aboutDiv = document.querySelector('.about-text');
if(chartDiv.getAttribute('value') == 'invisible'){ if(chartDiv.getAttribute('value') == 'invisible'){
chartDiv.style.display = 'none'; chartDiv.style.display = 'none';
} }
var gradeChart; var gradeChart;
const ctx = document.getElementById("gradeBar"); 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 Parse the input form and class data
@@ -32,7 +33,7 @@ async function parseName() {
alert("Invalid Department"); alert("Invalid Department");
return; return;
} }
console.log(department, classNum.toString(), className.trim()); console.log(department, classNum.toString(), className.trim(), semester);
await PapaParse(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) { async function PapaParse(department, num, name, sem) {
let cData = ''; let cData = '';
// console.log(sem);
let url = ''; let url = '';
switch (sem) { switch (sem) {
case 'f2022': case 'f2022':
@@ -70,17 +70,18 @@ async function PapaParse(department, num, name, sem) {
.filter(cData => cData["Course Title"].includes(name)); .filter(cData => cData["Course Title"].includes(name));
if(selectedClass.length == 0) { if(selectedClass.length == 0) {
// Possible that the class name was typed wrong; try again with just the course number // 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)) selectedClass = cData.filter(cData => cData["Course Prefix"].includes(department))
.filter(cData => cData["Course Number"] == num.toString().toUpperCase()); .filter(cData => cData["Course Number"] == num.toString().toUpperCase());
} }
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 // 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; return;
} }
console.log(selectedClass); console.log(selectedClass);
let gradeDist = { let gradeDist = {
"A": 0, "A": 0,
'A-': 0, 'A-': 0,
@@ -96,31 +97,24 @@ async function PapaParse(department, num, name, sem) {
'F': 0, 'F': 0,
'Other': 0 'Other': 0
}; };
let lableName = selectedClass[0]["Course Title"];
for(i in selectedClass) { for(i in selectedClass) {
let letterGrade = selectedClass[i]["Letter Grade"]; let letterGrade = selectedClass[i]["Letter Grade"];
let cnt = selectedClass[i]["Count of letter grade"] let cnt = selectedClass[i]["Count of letter grade"]
gradeDist[letterGrade] += cnt; 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]["Letter Grade"]);
// console.log(selectedClass[i]["Count of letter grade"]); // console.log(selectedClass[i]["Count of letter grade"]);
} }
console.log(gradeDist); console.log(gradeDist);
if(gradeChart) { if(gradeChart) {
gradeChart.config.data = { gradeChart.config.data = {
labels: [ labels: gradeLabels,
'A',
'A-',
'B+',
'B',
'B-',
'C+',
'C',
'C-',
'D+',
'D',
'D-',
'F'],
datasets: [{ datasets: [{
label: 'Grade distribution for \"' + selectedClass[0]["Course Title"] +"\"", label: 'Grade distribution for \"' + lableName +"\"",
data: Object.values(gradeDist), data: Object.values(gradeDist),
borderWidth: 2, borderWidth: 2,
// borderColor: '#36A2EB', // borderColor: '#36A2EB',
@@ -129,8 +123,9 @@ async function PapaParse(department, num, name, sem) {
}; };
gradeChart.update(); gradeChart.update();
} else { } else {
loadChart(gradeDist, selectedClass[0]["Course Title"]); loadChart(gradeDist, lableName);
aboutDiv.style.visibility='hidden'; aboutDiv.style.visibility='hidden';
aboutDiv.style.display='none';
chartDiv.style.display = ''; chartDiv.style.display = '';
} }
} }
@@ -139,19 +134,7 @@ function loadChart(gradeDist, courseName) {
gradeChart = new Chart(ctx, { gradeChart = new Chart(ctx, {
type: 'bar', type: 'bar',
data: { data: {
labels: [ labels: gradeLabels,
'A',
'A-',
'B+',
'B',
'B-',
'C+',
'C',
'C-',
'D+',
'D',
'D-',
'F'],
datasets: [{ datasets: [{
label: 'Grade distribution for \"' + courseName + "\"", label: 'Grade distribution for \"' + courseName + "\"",
data: Object.values(gradeDist), data: Object.values(gradeDist),

13
sitemap.xml Normal file
View File

@@ -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>

BIN
tempbg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 MiB