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

Merge pull request #5 from DereC4/responsive

Browse Source 
Responsive
This commit is contained in:
Derek Chen
2023-04-29 16:42:57 -05:00
committed by GitHub
parent 5e6490ad57 0b8efb3d52
commit 429317208b
3 changed files with 118 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
index.html
View File

@@ -22,57 +22,65 @@
</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
Jazz Appr- I mean course registration process. Jazz Appr- I mean course registration process.
</p> </p>
<p> <p>
I noticed other grade sites used outdated data, so I made I noticed other grade sites used outdated data, so I made
my own. Enjoy! my own. Enjoy!
</p> </p>
</div> </div>
<div class="bg-form"> <div class="bg-form">
<p> <p>
Keep course names as close to the Keep course names as close to the
<a href="https://registrar.utexas.edu/schedules">official course name</a> <a href="https://registrar.utexas.edu/schedules">official course name</a>
as possible as possible
</p> </p>
<br> <br>
<form action=""> <form action="">
<!-- Data is separated into course number, course prefi;x, and course name--> <!-- Data is separated into course number, course prefi;x, and course name-->
<label for="courseField">Department (Ex: "MUS"):</label> <label for="courseField">Department (Ex: "MUS"):</label>
<input type="text" id="courseField" name="fname" required><br><br> <input type="text" id="courseField" name="fname" required><br><br>
<label for="courseNum">Course Number (Ex: "307"):</label> <label for="courseNum">Course Number (Ex: "307"):</label>
<input type="text" id="courseNum" name="fname" required><br><br> <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> <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> <input type="text" id="courseName" name="fname"><br><br>
<!-- <label for="courseInstructor">Instructor (Optional):</label> <!-- <label for="courseInstructor">Instructor (Optional):</label>
<input type="text" id="courseInstructor" name="fname"><br><br> --> <input type="text" id="courseInstructor" name="fname"><br><br> -->
<button type="button" id="subBut">Submit</button><br><br> <button type="button" id="subBut">Submit</button><br><br>
<!-- Dropdown menu for semester selection --> <!-- Dropdown menu for semester selection -->
<form> <form>
<label for="dropdown">Semester (under construction):</label> <label for="dropdown">Semester (under construction):</label>
<select id="semester" name="dropdown"> <select id="semester" name="dropdown">
<option value="f2022">Fall 2022</option> <option value="f2022">Fall 2022</option>
<option value="s2022">Summer 2022</option> <option value="s2022">Summer 2022</option>
<option value="sp2022">Spring 2022</option> <option value="sp2022">Spring 2022</option>
<option value="f2021">Fall 2021</option> <option value="f2021">Fall 2021</option>
</select> </select>
<br><br> <br><br>
</form>
</form> </form>
</form> <div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw">
<div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw"> <!--Bar graph stuff-->
<!--Bar graph stuff--> <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>

110
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%
} }
h1 { h1 {
font-size: 2vw; font-size: 2rem;
margin: 0 0 20px 0 margin: 0 0 1rem 0
} }
p { p {
font-size: 1vw; 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;
}
} }

3
main.js
View File

@@ -1,7 +1,7 @@
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';
} }
@@ -125,6 +125,7 @@ async function PapaParse(department, num, name, sem) {
} else { } else {
loadChart(gradeDist, lableName); loadChart(gradeDist, lableName);
aboutDiv.style.visibility='hidden'; aboutDiv.style.visibility='hidden';
aboutDiv.style.display='none';
chartDiv.style.display = ''; chartDiv.style.display = '';
} }
} }