+
+
About
+
+ 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.
+
+
+ I noticed other grade sites used outdated data, so I made
+ my own. Enjoy!
+
+
+
Created by Derek Chen
+
+
diff --git a/main.css b/main.css
index fe97cff..b5280ba 100644
--- 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%
}
h1 {
- font-size: 2vw;
- margin: 0 0 20px 0
+ font-size: 2rem;
+ margin: 0 0 1rem 0
}
p {
- font-size: 1vw;
+ 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;
+ }
}
\ No newline at end of file
diff --git a/main.js b/main.js
index 3bc92bf..f7b719d 100644
--- a/main.js
+++ b/main.js
@@ -1,7 +1,7 @@
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';
}
@@ -125,6 +125,7 @@ async function PapaParse(department, num, name, sem) {
} else {
loadChart(gradeDist, lableName);
aboutDiv.style.visibility='hidden';
+ aboutDiv.style.display='none';
chartDiv.style.display = '';
}
}