feat: spring and summer 2025 data

perf: word difference
feat: you do not want to miss this one
2025-12-01 15:21:58 -06:00 · 2025-10-19 02:44:19 -05:00 · 2025-10-19 02:42:16 -05:00 · 2025-10-19 02:32:49 -05:00 · 2025-10-19 02:32:45 -05:00 · 2025-10-19 02:28:08 -05:00
18 changed files with 1366 additions and 367 deletions
--- a/README.md
+++ b/README.md
@@ -1,19 +1,30 @@
-## How do I access the website?
+
 ![UTAustinGradeDistributionViewerand4morepages-Personal-MicrosoftEdge2024-10-0618-20-14-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/e49d82fa-2184-4610-8e10-bead266e8894)
 ## How do I access the site?
 https://derec4.github.io/ut-grade-distribution-viewer/
 ## Where did you go?
 I work on [UT Registration Plus](https://github.com/Longhorn-Developers/UT-Registration-Plus) now!
 ## Why is this a thing? 
-I'm sure you've all seen this before: 
+I'm sure you've all seen this page before: 
 ![image](https://user-images.githubusercontent.com/53978637/233871181-d681c4a6-20a7-4544-9f1f-5e5fae1a6569.png)
-It's from a (super helpful) registration extension, and shows for more than half the classes looked at (No hate, I love UT Registration Plus they laughed at my jokes)
+It's from a (super helpful) registration extension, and shows for more than half the classes looked at. No hate on the extension though, ironically enough, I was actually annexed into the UT Registration Plus team last year.
 Bored in VAPA one day, I noticed popular sites like Catalyst and UT Registration Plus showed outdated on grade distributions, or no data at all. They may update in the future but for the time being that is an issue. As a result, I decided to make this website instead of paying attention to the pipelining lecture in 429 that day. Magically, my quiz grade average decreased dramatically that week. Go figure 🤷‍♂️
 Using the site is simple, just input the necessary data and voila!
-![image](https://user-images.githubusercontent.com/53978637/233871547-cabbbf4c-b09d-46ed-a9b2-8193b4d73f4c.png)
+![image](https://user-images.githubusercontent.com/53978637/236986082-f02b2b29-af09-4a39-afff-da425c550073.png)
 Report bugs plz cuz I made this in a few days 
 By derex_ or derec4 or derexxd or derexd or DereC_ or CORRUPT_Greninja or lordnexus123 or whatever my username is these days
--- a/docs/about.html
+++ b/docs/about.html
@@ -0,0 +1,125 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>About - UT Austin Grade Distribution Viewer</title>
    <link rel="icon" href="favicon.ico" />
    <meta
      name="description"
      content="An up to date grade distribution viewer for students at the University of Texas at Austin"
    />
    <meta name="author" content="Derek Chen" />
    <meta
      name="keywords"
      content="UT, University of Texas at Austin, Grade viewer, grade distribution viewer, derex, grade distribution, ut austin"
    />
    <meta name="language" content="English" />
    <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"
    >
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    </script>
  </head>
  <body>
    <nav>
      <ul>
        <!-- <li><a href="/docs/index.html">Home</a></li>
        <li><a href="/docs/about.html">About</a></li>
        <li><a href="/docs/changelog.html">Changelog</a></li> -->
        <li><a href="https://derec4.github.io/ut-grade-distribution-viewer/index">Home</a></li>
        <li><a href="https://derec4.github.io/ut-grade-distribution-viewer/about">About</a></li>
        <li><a href="https://derec4.github.io/ut-grade-distribution-viewer/changelog">Changelog</a></li>
        <div class="top-left">
          <input type="checkbox" class="checkbox" id="colorToggle">
          <label for="colorToggle" class="checkbox-label">
            <i class="fas fa-moon"></i>
            <i class="fas fa-sun"></i>
            <span class="ball"></span>
          </label>
        </div>
    </ul>
    </nav>
    <div class="wrapper-changelog">
      <div class="about-text" value="">
        <h1>About</h1>
        <p>
          Note: At the time I developed this site, tools like <a href="https://github.com/Longhorn-Developers/UT-Registration-Plus">UT Registration Plus</a> and <a href="https://utcatalyst.org/grade-distributions">Catalyst</a> showed very outdated grade data, if any at all.
        </p>
        <p>I'm sure you've all seen this before:</p>
        <div class="image-container">
          <img
            src="https://user-images.githubusercontent.com/53978637/233871181-d681c4a6-20a7-4544-9f1f-5e5fae1a6569.png"
            alt="Screenshot of registration extension"
            class="responsive-image"
          />
        </div>
        <p>
          It's the grade distribution page on UT Registration Plus, a popular
          registration extension, and shows for more than half the courses
          available.
        </p>
        <p>
          During Spring 2023 registration, I noticed these tools showed outdated data on grade distributions, or no
          data at all. As a result, instead of paying attention to the
          pipelining lecture in 429 that day, I decided to start working on this
          website. Magically, my quiz grade average decreased dramatically that
          week.
        </p>
      </div>
      <div class="about-text">
        <h1>Thousands of Users!</h1>
        <p>
          On April 17th, 2023, the project was born! Though it was finished
          midway through registration, the subsequent registration periods saw a
          lot of use from students all over campus.
        </p>
        <div class="iframe-container">
          <iframe
            width="600"
            height="371"
            frameborder="0"
            src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSIcbjzLhH9H0RP8rF69XrnZtQk1umBTofOJBqAG5xWGBJhVDAi_mEmxQ-DsZZtuLVMvrhvJadYCf_m/pubchart?oid=370744605&amp;format=interactive"
            allowfullscreen
          ></iframe>
        </div>
        <p>(Mobile Users may have to scroll a bit)</p>
      </div>
      <div class="about-text">
        <h1>What's next?</h1>
        <p>
          The website will continue to be updated with the latest grade
          distribution data from UT Austin for the foreseeable future
        </p>
        <p>
          In the meantime, my team and I have been working on
          <a
            href="https://chromewebstore.google.com/detail/ut-registration-plus/hboadpjkoaieogjimneceaahlppnipaa"
            target="_blank"
            rel="noopener noreferrer"
            >UT Registration Plus</a
          >
          so we're excited to ship out our new overhaul update soon! Check the
          <a href="https://derec4.github.io/ut-grade-distribution-viewer/changelog">changelog</a> for our beta testing interest
          form!
        </p>
      </div>
    </div>
    <div class="footy">
      <div class="footy-interior">
        <p>Created by <a href="https://www.linkedin.com/in/derekyujirchen/">Derek Chen.</a>
        <!-- because VAPA lecture was a bit boring that day -->
        Help keep the site up by <a href="https://www.paypal.com/donate/?business=ND35WHTPKM494&no_recurring=0&item_name=Help+support+our+grade+distribution+site+and+other+tools%21&currency_code=USD">supporting it here!</a></p>
        <!-- <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="100" height="30" title="GitHub">
        </iframe> -->
      </div>
    </div>
    <script src="main.js"></script>
    <script src="colorScheme.js"></script>
  </body>
 </html>
--- a/docs/analytics.js
+++ b/docs/analytics.js
--- a/docs/changelog.html
+++ b/docs/changelog.html
@@ -0,0 +1,249 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Changelog - UT Austin Grade Distribution Viewer</title>
    <link rel="icon" href="favicon.ico" />
    <meta
      name="description"
      content="An up to date grade distribution viewer for students at the University of Texas at Austin"
    />
    <meta name="author" content="Derek Chen" />
    <meta
      name="keywords"
      content="UT, University of Texas at Austin, Grade viewer, grade distribution viewer, derex, grade distribution, ut austin"
    />
    <meta name="language" content="English" />
    <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"
    >
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    </script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <style>
      @media screen and (max-width: 800px) {
        .leftcolumn,
        .rightcolumn {
          width: 100%;
          padding: 0;
        }
      }
    </style>
  </head>
  <body>
    <nav>
      <ul>
        <!-- <li><a href="/docs/index.html">Home</a></li>
        <li><a href="/docs/about.html">About</a></li>
        <li><a href="/docs/changelog.html">Changelog</a></li> -->
        <li>
          <a href="https://derec4.github.io/ut-grade-distribution-viewer/index"
            >Home</a
          >
        </li>
        <li>
          <a href="https://derec4.github.io/ut-grade-distribution-viewer/about"
            >About</a
          >
        </li>
        <li>
          <a
            href="https://derec4.github.io/ut-grade-distribution-viewer/changelog"
            >Changelog</a
          >
        </li>
        <div class="top-left">
          <input type="checkbox" class="checkbox" id="colorToggle" />
          <label for="colorToggle" class="checkbox-label">
            <i class="fas fa-moon"></i>
            <i class="fas fa-sun"></i>
            <span class="ball"></span>
          </label>
        </div>
      </ul>
    </nav>
    <div class="wrapper">
      <div class="about-text changelog">
        <h1>Changelog</h1>
      </div>
      <div class="changelog-split-row">
        <div class="column">
          <div class="default-card">
            <h2>Manifesting a J o b</h2>
            <p>October 19, 2025</p>
            <p>Episode IV</p>
            <p>A NEW GRIND</p>
            <p>
              It is a period of leetcode. UNDERGRAD STUDENTS, applying from dorm
              basements and labs, have secured their first OA from a
              career fair. During the assessment, brave students managed to pass
              all hidden test cases in a treacherous CODESIGNAL challenge — a
              digital trial with enough power to wreck self-esteem in minutes.
              Hunted by WORKDAY and Applicant Tracking Systems, nervous students
              update their resumes, guardians of hard-won projects and
              open-source contributions that might land them an offer and
              restore freedom to their credit card debts...
            </p>
          </div>
          <div class="default-card">
            <h2>how is it march already</h2>
            <p>March 3, 2025</p>
            <p>
              what the kevin it is already halfway through spring semester. Oh
              and the grade database has been updated, enjoy!
            </p>
            <a href="https://ibb.co/g7Wy31T">Preview Here</a>
          </div>
          <div class="default-card">
            <h2>Experimental Feature: Professors!</h2>
            <p>August 3, 2024</p>
            <p>
              Test out the new instructor field, it goes up to fall 2023 for now
              but is pretty cool and everyone should definitely try it. Also
              your semester will be remembered now in the dropdown menu so there
              goes your cache storage.
            </p>
            <a href="https://ibb.co/g7Wy31T">Preview Here</a>
          </div>
          <div class="default-card">
            <h2>New Semester Added!</h2>
            <p>July 28, 2024</p>
            <p>
              Happy 2/3 of summer! The spring 2024 semester has been added to
              our database and we can now analyze grades from that semester. You
              may also notice a new, experimental "instructor" field. That is
              classified.
            </p>
          </div>
          <div class="default-card">
            <h2>Server Maintenance</h2>
            <p>May 30, 2024</p>
            <p>
              We would like to inform you that we have scheduled server
              maintenance for [Your Software/Service Name] on [Maintenance Date]
              from [Start Time] to [End Time]. This maintenance is essential to
              ensure the continued performance, reliability, and security of our
              systems. Please mark your calendar and plan accordingly for this
              maintenance window. If you have any questions or need assistance,
              please contact our support team at [Support Email Address] or
              visit our [Support Page].
            </p>
            <p>Thank you for your cooperation,</p>
            <p>[Your Company Name]</p>
          </div>
          <div class="default-card">
            <h2>Donation page created</h2>
            <p>May 28, 2024</p>
            <p>
              Made a quick page so y'all can support our tools for UT and keep
              our site/database alive. Check it out
              <a
                href="https://www.paypal.com/donate/?business=ND35WHTPKM494&no_recurring=0&item_name=Help+support+our+grade+distribution+site+and+other+tools!&currency_code=USD"
                >here!</a
              >
            </p>
          </div>
          <div class="default-card">
            <h2>Small update and repositioning</h2>
            <p>May 28, 2024</p>
            <p>Happy summer break!</p>
            <p>
              I saw this video where Darth Vader said that he ate a cat and that
              was funny. Also updated the page with a link to my Linkedin from
              my name, and moved the color scheme changer to the top left corner
              so it looked more organized.
            </p>
          </div>
          <div class="default-card">
            <h2>UT Registration Plus Testing Phase!</h2>
            <p>April 20, 2024</p>
            <p>
              My team and I have been working on
              <a
                href="https://chromewebstore.google.com/detail/ut-registration-plus/hboadpjkoaieogjimneceaahlppnipaa"
                target="_blank"
                rel="noopener noreferrer"
                >UT Registration Plus</a
              >
              and testing has opened up for our upcoming overhaul update!
              <a href="https://forms.gle/YrEmq3R8nLU5a6iU6"
                >Interest form here</a
              >
            </p>
          </div>
          <div class="default-card">
            <h2>Overhaul Update [Patch 1.0.1.0]</h2>
            <p>April 20, 2024</p>
            <p>
              Created two more pages and the navbar today and now the site looks
              so much cooler.
            </p>
          </div>
          <div class="default-card">
            <h2>Made this page</h2>
            <p>April 20, 2024</p>
            <p>
              Yay I fixed a ton of things today and made this page! Got the
              color changing slider working way more smoothly now too so that's
              great.
            </p>
            <p>Can't believe this semester ends in 2 weeks</p>
          </div>
        </div>
        <div class="column">
          <div class="default-card">
            <h2>About Me</h2>
            <p>Just a simple student trying to make his way in the universe.</p>
          </div>
          <div class="social-icons-container">
            <a
              href="https://www.linkedin.com/in/derekyujirchen/"
              class="fa fa-linkedin"
            ></a>
            <a
              href="https://en.wikipedia.org/wiki/Mark_Zuckerberg"
              class="fa fa-facebook"
            ></a>
            <a
              href="https://www.youtube.com/@DereC519/featured"
              class="fa fa-youtube"
            ></a>
            <a href="https://photricity.com/flw/ajax/" class="fa fa-reddit"></a>
            <a href="https://github.com/DereC4" class="fa fa-github"></a>
            <a
              href="https://www.instagram.com/ramen__is__good/"
              class="fa fa-instagram"
            ></a>
          </div>
        </div>
      </div>
    </div>
    <div class="footy">
      <div class="footy-interior">
        <p>
          Created by
          <a href="https://www.linkedin.com/in/derekyujirchen/">Derek Chen.</a>
          <!-- because VAPA lecture was a bit boring that day -->
          Help keep the site up by
          <a
            href="https://www.paypal.com/donate/?business=ND35WHTPKM494&no_recurring=0&item_name=Help+support+our+grade+distribution+site+and+other+tools%21&currency_code=USD"
            >supporting it here!</a
          >
        </p>
        <!-- <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="100" height="30" title="GitHub">
        </iframe> -->
      </div>
    </div>
    <script src="colorScheme.js"></script>
  </body>
 </html>
--- a/docs/colorScheme.js
+++ b/docs/colorScheme.js
@@ -0,0 +1,9 @@
 const colorToggle = document.getElementById("colorToggle")
 colorToggle.addEventListener("change", () => {
  const darkModeEnabled = document.body.classList.toggle("dark");
  Chart.defaults.global.defaultFontColor = darkModeEnabled ? "#484b6a" : "#F8F0E5";
  // Chart.defaults.plugins.legend.labels.color = isDarkModeEnabled ? "#484b6a" : "#F8F0E5";
  Chart.helpers.each(Chart.instances, (instance) => {
    instance.chart.update();
  });
 })
--- a/docs/favicon.ico
+++ b/docs/favicon.ico
--- a/docs/favicon.io
+++ b/docs/favicon.io
--- a/docs/favicon.png
+++ b/docs/favicon.png
--- a/docs/index.html
+++ b/docs/index.html
@@ -0,0 +1,210 @@
 <!DOCTYPE html>
 <html>
  <head>
    <!-- Google tag (gtag.js) -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-Z5B0S1WMC4"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "G-Z5B0S1WMC4");
    </script>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>UT Austin Grade Distribution Viewer</title>
    <link rel="icon" href="favicon.ico" />
    <meta
      name="description"
      content="An up to date grade distribution viewer for students at the University of Texas at Austin"
    />
    <meta name="author" content="Derek Chen" />
    <meta
      name="keywords"
      content="UT, Austin, Grade, Distribution, Grades, University of Texas, UT Austin, ut grade distributions, ut grades plus, grades+"
    />
    <meta
      property="og:description"
      content="Explore UT Austin's grade distributions with two simple clicks!"
    />
    <meta name="language" content="English" />
    <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"
    >
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    </script>
  </head>
  <body>
    <nav>
      <ul>
        <!-- <li><a href="/docs/index.html">Home</a></li>
        <li><a href="/docs/about.html">About</a></li>
        <li><a href="/docs/changelog.html">Changelog</a></li> -->
        <li>
          <a href="https://derec4.github.io/ut-grade-distribution-viewer/index"
            >Home</a
          >
        </li>
        <li>
          <a href="https://derec4.github.io/ut-grade-distribution-viewer/about"
            >About</a
          >
        </li>
        <li>
          <a
            href="https://derec4.github.io/ut-grade-distribution-viewer/changelog"
            >Changelog</a
          >
        </li>
        <div class="top-left">
          <input type="checkbox" class="checkbox" id="colorToggle" />
          <label for="colorToggle" class="checkbox-label">
            <i class="fas fa-moon"></i>
            <i class="fas fa-sun"></i>
            <span class="ball"></span>
          </label>
        </div>
      </ul>
    </nav>
    <div class="wrapper">
      <div class="about-text" value="">
        <h1>Intro</h1>
        <p>
          This is a database tool to assist students of the
          <a href="https://en.wikipedia.org/wiki/University_of_Texas_at_Austin"
            >University of Texas at Austin</a
          >
          in the biannual scramble for Jazz Appr- I mean course registration
          process.
        </p>
        <p>
          I noticed other grade sites used outdated data, so I made my own.
          Enjoy! Also check out my team's other project, <a href="https://github.com/Longhorn-Developers/UT-Registration-Plus">UT Registration Plus</a>
        </p>
      </div>
      <div class="bg-form">
        <div class="bg-form-blurb">
          <p>
            Use the
            <a href="https://registrar.utexas.edu/schedules"
              >official course name</a
            >
            for best results.
          </p>
          <p>Some departments have a space in the middle (e.g., "C S")</p>
          <p>
            Course Name is optional, but used for duplicate ID courses (e.g.
            "UGS 303")
          </p>
        </div>
        <br />
        <form action="">
          <!-- Data is separated into course number, course prefix, and course name-->
          <div class="form-group">
            <label for="courseField"
              >Department (e.g. "MUS") <span class="required">*</span></label
            >
            <input type="text" id="courseField" name="fname" required />
          </div>
          <div class="form-group">
            <label for="courseNum"
              >Course Number (e.g. "307")
              <span class="required">*</span></label
            >
            <input type="text" id="courseNum" name="fname" required />
          </div>
          <div class="form-group">
            <label for="courseName"
              >Course Name (e.g. "JAZZ APPRECIATION-WB")</label
            >
            <input type="text" id="courseName" name="fname" />
          </div>
          <!-- <label for="sectionNum">Section Number (Optional, Experimental)</label>
        <input type="text" id="sectionNum" name="fname" required> -->
          <div class="form-group">
            <label
              for="courseInstructor"
              title="This is an experimental option!"
              >Instructor</label
            >
            <input type="text" id="courseInstructor" name="fname" />
          </div>
          <!-- Dropdown menu for semester selection -->
          <div class="form-group">
            <label for="semester">Semester:</label>
            <select id="semester" name="dropdown">
              <option value="s2025">Summer 2025</option>
              <option value="sp2025">Spring 2025</option>
              <option value="f2024">Fall 2024</option>
              <option value="sp2024">Spring 2024</option>
              <option value="f2023">Fall 2023</option>
              <option value="s2023">Summer 2023</option>
              <option value="sp2023">Spring 2023</option>
              <option value="f2022">Fall 2022</option>
              <option value="s2022">Summer 2022</option>
              <option value="sp2022">Spring 2022</option>
              <option value="f2021">Fall 2021</option>
              <option value="s2021">Summer 2021</option>
              <option value="sp2021">Spring 2021</option>
              <option value="f2020">Fall 2020</option>
              <option value="s2020">Summer 2020</option>
              <option value="sp2020">Spring 2020</option>
            </select>
          </div>
          <button type="button" id="subBut" class="submit-button">
            Submit
          </button>
        </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>
      </div>
    </div>
    <div class="footy">
      <div class="footy-interior">
        <p>
          Created by
          <a href="https://www.linkedin.com/in/derekyujirchen/">Derek Chen.</a>
          <!-- because VAPA lecture was a bit boring that day -->
          Help keep the site up by
          <a
            href="https://www.paypal.com/donate/?business=ND35WHTPKM494&no_recurring=0&item_name=Help+support+our+grade+distribution+site+and+other+tools%21&currency_code=USD"
            >donating!</a
          >
          Report feedback
          <a
            href="https://github.com/DereC4/ut-grade-distribution-viewer/issues"
            >here!</a
          >
        </p>
        <!-- <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="100" height="30" title="GitHub">
      </iframe> -->
      </div>
    </div>
    <script src="main.js"></script>
    <script src="colorScheme.js"></script>
    <script src="rememberSemester.js"></script>
  </body>
 </html>
--- a/docs/main.css
+++ b/docs/main.css
@@ -0,0 +1,465 @@
 :root {
    /* Mobile - Default */
    --bg-form-padding: 3px;
    --about-text-padding: 3px;
    --p-size: 12px;
    --label-size: 12px;
    --h1-size: 16px;
    --footer-size: 10px;
    --font-color: white;
    --background-color: #2b323c;
    --container-color: #526d82c5;
    /* --background-gradient-webkit: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);
    --background-gradient: linear-gradient(to right, #2C5364, #203A43, #0F2027); */
    --link-color: #2c82c9;
    font-family: 'Helvetica Neue', sans-serif;
 }
 body {
    font-family: 'Helvetica Neue', sans-serif;
    background: var(--background-color);
    /* background: var(--background-gradient-webkit);
    background: var(--background-gradient); */
    margin: 0;
    transition: background 0.2s linear;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
 }
 body.dark {
    --background-color: #ffcab0;
    --container-color: #fdffcd;
    --font-color: #484b6a;
    /* --background-gradient-webkit: -webkit-linear-gradient(to right, #eef2f3, #8e9eab);
    --background-gradient: linear-gradient(to right, #eef2f3, #8e9eab); */
 }
 a {
    color: var(--link-color);
    text-decoration: none;
 }
 main {
    padding: 10%;
 }
 nav ul {
    font-size: var(--p-size);
    list-style-type: none;
    padding: 0;
    text-align: center;
    width: auto;
    margin-left: 50px;
 }
 nav ul li {
    display: inline;
    margin-right: 20px;
 }
 nav ul li a {
    text-decoration: none;
    color: var(--font-color);
 }
 nav ul li a:hover {
    text-decoration: underline;
 }
 * {
    box-sizing: border-box;
 }
 .wrapper {
    /* display: grid;
    gap: 2vw;
    grid-auto-rows: minmax(100px, auto); */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    flex-grow: 1; /* Allow .wrapper to grow and occupy remaining space */
    row-gap: 100px;
    text-align: center;
    color: var(--font-color);
    margin-top: 30px;
    /* min-height: 100vh; */
    /* background-color: rgba(0, 0, 0, .4); */
 }
 .wrapper-changelog {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    flex-grow: 1; /* Allow .wrapper to grow and occupy remaining space */
    row-gap: 20px;
    text-align: center;
    color: var(--font-color);
    margin-top: 30px;
    .about-text {
        padding-left: 10%;
        padding-right: 10%;
    }
 }
 .submit-button {
    display: flex;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 15px;
    border-radius: 10px;
    border: 2px solid #000;
    max-width: 150px;
    width: 100%;
    font-size: 16px;
 }
 .about-text {
    background-color: var(--container-color);
    grid-column: 1;
    grid-row: 1;
    width: 70%;
    margin: 0 auto;
    border-radius: 5px;
    height: fit-content;
    padding: var(--about-text-padding);
 }
 .changelog {
    max-width: 800px;
 }
 .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
 .tooltip .tooltiptext {
 visibility: hidden;
 width: 120px;
 background-color: #555;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: absolute;
 z-index: 1;
 bottom: 125%;
 left: 50%;
 margin-left: -60px;
 opacity: 0;
 transition: opacity 0.3s;
 }
 .tooltip .tooltiptext::after {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: #555 transparent transparent transparent;
 }
 .tooltip:hover .tooltiptext {
 visibility: visible;
 opacity: 1;
 }
 .bg-form {
    background-color: var(--container-color);
    /* grid-column: 1;
    grid-row: 2; */
    font-weight: 400;
    width: auto;
    margin: 0 auto;
    border-radius: 5px;
    padding: var(--bg-form-padding);
    display: flex;
    flex-direction: column;
    height: fit-content;
    align-items: center;
 }
 .bg-form-blurb {
    text-align: left;
    align-items: flex-start;
 }
 .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    align-items: center;
 }
 .form-group label {
    margin-bottom: 5px;
    font-weight: 500;
    text-align: left;
    width: 100%;
 }
 .form-group input,
 .form-group select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: var(--p-size);
    width: 100%;
    max-width: 400px;
    text-align: left;
 }
 .form-group input:focus,
 .form-group select:focus {
    outline: none;
    border-color: var(--link-color);
 }
 .chart-container {
    position: relative;
    margin: auto;
    height: 80vh;
    width: 80vw;
 }
 .footy {
    background-color: #2e2d2d;
    color: white;
    padding: 1%;
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: left;
    font-size: var(--footer-size);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* margin-top: -200px; */
    align-self: flex-end;
    flex-shrink: 0;
 }
 .footy-interior {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: row;
    column-gap: 10px;
 }
 p {
    font-size: var(--p-size);
    line-height: 1.5;
    margin: 0 0 1rem 0
 }
 label {
    font-size: var(--label-size);
 }
 h1 {
    font-size: var(--h1-size);
    margin: 0 0 1rem 0
 }
 .required {
    color: #ff3d78;
    font-weight: bold;
 }
 .column {
    display: flex;
    flex-direction: column;
    gap: 10px;
 }
 .default-card {
    background-color: var(--container-color);
    padding: 20px;
    margin-top: 20px;
    text-align: left;
    text-wrap: wrap;
    max-width: 800px;
 }
 .changelog-split-row {
    content: "";
    display: flex;
    flex-direction: row;
    gap: 10px;
    /* margin: 0 auto; */
 }
 .top-left {
    position: fixed;
    top: 10px;
    left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .checkbox {
    opacity: 0;
    position: absolute;
 }
 .checkbox-label {
    background-color: #111;
    width: 50px;
    height: 26px;
    border-radius: 50px;
    position: relative;
    padding: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
 .image-container {
    width: 80%;
    max-width: fit-content;
    min-width: 200px;
    margin: 0 auto;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 .responsive-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
 }
 .iframe-container {
    width: 100%;
    overflow: auto; /* Enable scrolling when content overflows */
    max-width: 600px; /* Set maximum width to match iframe width */
    margin: 0 auto; /* Center the container horizontally */
  }
 .social-icons-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-gap: 10px;
    justify-content: center;
 }
 .fa:hover {
    opacity: 0.8;
 }
 .fa-linkedin {
    background: #007bb5;
    color: white;
 }
 .fa-facebook {
    background: #1575e4;
    color: white;
 }
 .fa-github {
    background: #333; /* GitHub black */
    color: #fff; /* White text */
  }
 .fa-reddit {
    background: #ff5700;
    color: white;
 }
 .fa-youtube {
    background: #b81111;
    color: white;
 }
 .fa-instagram {
    background: #e4405f; /* Instagram pink */
    color: #fff; /* White text */
  }
 .fa {
    padding: 20px;
    font-size: 40px;
    width: 60px;
    text-decoration: none;
 }
 .fa-moon {
    color: #f1c40f;
 }
 .fa-sun {
    color: #f39c12;
 }
 .checkbox-label .ball {
    background-color: #fff;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: transform 0.2s linear;
 }
 .checkbox:checked+.checkbox-label .ball {
    transform: translateX(24px);
 }
 /* form {
    text-align: right;
 } */
 /* Tablet */
@media (min-width:600px) {
    :root {
        --bg-form-padding: 15px;
        --about-text-padding: 10px;
        --p-size: 14px;
        --label-size: 14px;
        --h1-size: 18px;
        --footer-size: 15px;
    }
    .social-icons-container {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
      }
      .fa {
        font-size: 24px;
      }
 }
 /* Desktop */
@media (min-width:900px) {
    :root {
        --bg-form-padding: 24px;
        --about-text-padding: 12px;
        --p-size: 16px;
        --label-size: 18px;
        --h1-size: 30px;
        --footer-size: 18px;
    }
 }
--- a/docs/main.js
+++ b/docs/main.js
@@ -0,0 +1,268 @@
 const aboutDiv = document.querySelector('.about-text');
 const backgroundColor = ["rgb(98, 244, 54)", "rgb(129, 231, 10)", "rgb(151, 218, 0)", "rgb(168, 204, 0)", "rgb(181, 190, 0)", "rgb(191, 176, 0)", "rgb(199, 162, 0)", "rgb(205, 148, 0)", "rgb(209, 133, 0)", "rgb(211, 119, 0)", "rgb(210, 105, 0)", "rgb(208, 91, 23)", "rgb(204, 78, 36)", "rgb(198, 66, 46)", "rgb(190, 54, 54)", ""];
 const chartDiv = document.querySelector('#grades');
 const ctx = document.getElementById("gradeBar");
 const formDiv = document.querySelector('.bg-form');
 const gradeLabels = ["A", "A-", "B+", "B", "B-", "C+", "C", "C-", "D+", "D", "D-", "F"];
 const submitButton = document.getElementById('subBut');
 var gradeChart;
 submitButton.addEventListener("click", parseName);
 if (chartDiv.getAttribute('value') == 'invisible') {
    chartDiv.style.display = 'none';
 }
 Chart.defaults.global.defaultFontColor = "#F8F0E5";
 let gradeMapping = {
    "A_Plus": "A",
    "A_Minus": "A-",
    "B_Plus": "B+",
    "B_Minus": "B-",
    "C_Plus": "C+",
    "C_Minus": "C-",
    "D_Plus": "D+",
    "D_Minus": "D-"
 };
 /**
 * Parse the input forms and determines if any fields are missing
 */
 async function parseName() {
    let className = document.getElementById('courseName').value.toUpperCase();
    let classNum = document.getElementById('courseNum').value;
    let department = document.getElementById('courseField').value.trim().toUpperCase();
    let departmentList = '';
    let semester = document.getElementById('semester').value;
    let instructor = document.getElementById('courseInstructor').value;
    await fetch('https://derec4.github.io/ut-grade-data/2022prefixes.json')
        .then(res => res.json())
        .then(data => {
            departmentList = data;
        });
    if (!className && !classNum && !department) {
        alert("At least fill out the form...");
        return;
    }
    if (!department || !classNum) {
        alert("Missing fields")
        return;
    }
    if (!departmentList.includes(department)) {
        alert("Invalid Department");
        return;
    }
    console.log(department, classNum.toString(), className.trim(), instructor.trim(), semester);
    await PapaParse(department, classNum.toString(), className.trim(), instructor.trim(), semester);
 }
 /**
 * Fetch the necessary table depending on the user selected semester. 
 * Then, filter through the table based on the input data to get grade info for the class.
 * Displays an alert if nothing could be found.
 */
 async function PapaParse(department, num, name, instructor, sem) {
    const semesterURLs = {
        's2025': 'https://derec4.github.io/ut-grade-data/2025%20Summer.json',
        'sp2025': 'https://derec4.github.io/ut-grade-data/2025%20Spring.json',
        'f2024': 'https://derec4.github.io/ut-grade-data/2024%20Fall.json',
        'sp2024': 'https://derec4.github.io/ut-grade-data/2024%20Spring.json',
        'f2023': 'https://derec4.github.io/ut-grade-data/2023%20Fall.json',
        's2023': 'https://derec4.github.io/ut-grade-data/2023%20Summer.json',
        'sp2023': 'https://derec4.github.io/ut-grade-data/2023%20Spring.json',
        'f2022': 'https://derec4.github.io/ut-grade-data/2022%20Fall.json',
        's2022': 'https://derec4.github.io/ut-grade-data/2022%20Summer.json',
        'sp2022': 'https://derec4.github.io/ut-grade-data/2022%20Spring.json',
        'f2021': 'https://derec4.github.io/ut-grade-data/2021%20Fall.json',
        's2021': 'https://derec4.github.io/ut-grade-data/2021%20Summer.json',
        'sp2021': 'https://derec4.github.io/ut-grade-data/2021%20Spring.json',
        'f2020': 'https://derec4.github.io/ut-grade-data/2020%20Fall.json',
        's2020': 'https://derec4.github.io/ut-grade-data/2020%20Summer.json',
        'sp2020': 'https://derec4.github.io/ut-grade-data/2020%20Spring.json',
    };    
    //Update to an array of URL options instead of a lengthy switch statement for readability
    const url = semesterURLs[sem] || 'https://derec4.github.io/ut-grade-data/2022%20Fall.json';
    const response = await fetch(url);
    let cData = await response.json();
    let selectedClass = cData.filter(cData => cData["Course Prefix"] == department);
    let usingExperimental = false;
    if (instructor) {
      const altUrl = new URL("https://ut-grade-data.vercel.app/v2/query");
      const params = {
        department: department,
        sem: sem,
        num: num,
        professor: instructor,
      };
      Object.keys(params).forEach((key) => {
        if (params[key]) {
          altUrl.searchParams.append(key, params[key]);
        }
      });
      console.log(altUrl);
      try {
        const response = await fetch(altUrl);
        const data = await response.json();
        if (data.length === 0) {
          console.error("Error executing query :((( :");
        } else {
            selectedClass = data;
            usingExperimental = true;
        }
      } catch (error) {
        console.error("Error fetching data:");
      }
    }
    if (!usingExperimental && sem.substring(0, 2) === 's2') {
        /**
         * Summer names are really weird but we can safely assume the prefix of the semester
         * will not become "s3" within the next lifetime
         */
        console.log("Summer Semester Detected");
        selectedClass = selectedClass.filter(cData => cData["Course Number"].includes(num.toString().toUpperCase())).filter(cData => cData["Course Title"].includes(name));
        if (selectedClass.length == 0) {
            selectedClass = cData.filter(cData => cData["Course Prefix"] == department)
                                 .filter(cData => cData["Course Number"].includes(num.toString().toUpperCase()))
        }
    } else if (!usingExperimental) {
        selectedClass = selectedClass.filter(cData => cData["Course Number"] == num.toString().toUpperCase()).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("Trying again with just the course number");
            selectedClass = cData.filter(cData => cData["Course Prefix"] == department)
                                 .filter(cData => cData["Course Number"] == num.toString().toUpperCase());
        }
    }
    if (selectedClass.length == 0) {
        // Still can't find anything? Exit without a chart and alert
        alert("No data found. Try again :(");
        return;
    }
    console.log(selectedClass);
    let gradeDist = {
        "A": 0,
        'A-': 0,
        'B+': 0,
        'B': 0,
        'B-': 0,
        'C+': 0,
        'C': 0,
        'C-': 0,
        'D+': 0,
        'D': 0,
        'D-': 0,
        'F': 0,
        'Other': 0
    };
    let lableName = usingExperimental ? selectedClass[0]["Course_Title"] : selectedClass[0]["Course Title"];
    if (usingExperimental) {
        for (let classObj of selectedClass) {
            updateGradeDist(classObj, gradeDist);
        }
        console.log(gradeDist);
        (gradeChart ? updateChart(lableName, gradeDist) : createChart(gradeDist, lableName));
    } else {
        let sameName = true;
        for (i in selectedClass) {
            let letterGrade = selectedClass[i]["Letter Grade"];
            let cnt = selectedClass[i]["Count of letter grade"];
            gradeDist[letterGrade] += cnt;
            if (sameName && lableName !== selectedClass[i]["Course Title"]) {
                // We can reasonably expect that time stays in the 2000s for a few more years
                lableName = (sem.substring(0, 2) === 's2' ? "Remember, summer courses have special prefixes!" : "Multiple courses detected; try specifying a course name!");
                sameName = false;
            }
            // console.log(selectedClass[i]["Letter Grade"]);
            // console.log(selectedClass[i]["Count of letter grade"]);
        }
        console.log(gradeDist);
        (gradeChart ? updateChart(lableName, gradeDist) : createChart(gradeDist, lableName));
    }
 }
 /**
 * If the chart is in a state of existence, we update the data values
 */
 function updateChart(labelName, gradeDist) {
    gradeChart.config.data = {
        labels: gradeLabels,
        datasets: [{
            label: '\"' + labelName + "\"",
            data: Object.values(gradeDist),
            borderWidth: 2,
            backgroundColor: backgroundColor,
        }]
    };
    gradeChart.update();
 }
 /**
 * If the chart is nowhere to be found, we load a new chart, its attributes and the values
 * Then, make the chart visible on screen
 */
 function createChart(gradeDist, courseName) {
    gradeChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: gradeLabels,
            datasets: [{
                label: '\"' + courseName + "\"",
                data: Object.values(gradeDist),
                borderWidth: 2,
                backgroundColor: backgroundColor,
            }]
        },
        options: {
            legend: {
                labels: {
                    fontSize: 15
                }
            },
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    stacked: true,
                    grid: {
                        display: true,
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            }
        }
    });
    aboutDiv.style.visibility = 'hidden';
    aboutDiv.style.display = 'none';
    chartDiv.style.display = '';
    formDiv.setAttribute("style", "grid-row: 1");
 }
 function updateGradeDist(classObj, gradeDist) {
    for (let key in classObj) {
        if (key in gradeDist || key in gradeMapping) {
            let normalizedKey = gradeMapping[key] || key;
            gradeDist[normalizedKey] += classObj[key];
        }
    }
 }
--- a/docs/rememberSemester.js
+++ b/docs/rememberSemester.js
@@ -0,0 +1,12 @@
 document.addEventListener('DOMContentLoaded', function() {
    const savedSemester = sessionStorage.getItem('selectedSemester');
    if (savedSemester) {
      document.getElementById('semester').value = savedSemester;
    }
    // Save the selected semester to sessionStorage on change
    document.getElementById('semester').addEventListener('change', function() {
      sessionStorage.setItem('selectedSemester', this.value);
    });
  });
--- a/docs/sitemap.xml
+++ b/docs/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>
--- a/now.png
+++ b/now.png
--- a/index.html
+++ b/index.html
@@ -1,81 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z5B0S1WMC4"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-Z5B0S1WMC4');
  </script>
  <meta charset='utf-8'>
  <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'>
  <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>
      </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>
  </div>
  <footer>Created by Derek Chen
    <!-- because VAPA lecture was a bit boring that day -->
  </footer>
  <script src='main.js'></script>
 </body>
 </html>
--- a/main.css
+++ b/main.css
@@ -1,96 +0,0 @@
 body {
  font-family: 'Helvetica Neue', sans-serif;
  background: #1b1a2a;
  background: linear-gradient(90deg, rgba(61, 87, 92, 1) 0, #454454 100%)
 }
 a {
  color: #2c82c9;
  text-decoration: none
 }
 main {
  padding: 20px
 }
 main h1 {
  font-size: 24px;
  margin: 0 0 20px 0
 }
 main p {
  font-size: 10px;
  line-height: 1.5;
  margin: 0 0 20px 0
 }
 footer {
  background-color: #2e2d2d;
  color: #fff;
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: left;
  font-size: 13px
 }
 footer p {
  font-size: 18px;
  margin: 0
 }
 * {
  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);
  color: #fff;
  font-weight: 700;
  border: 3px solid #f1f1f1;
  margin: 5px auto;
  position: absolute;
  font-size: small;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  padding: 10px;
  text-align: center
 }
 .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
 }
 .chart-container {
  position: relative;
  margin: auto;
  height: 80vh;
  width: 80vw
 }
--- a/main.js
+++ b/main.js
@@ -1,186 +0,0 @@
 const submitButton = document.getElementById('subBut');
 submitButton.addEventListener("click", parseName);
 var chartDiv = document.querySelector('#grades');
 var aboutDiv = document.querySelector('.bg-text');
 if(chartDiv.getAttribute('value') == 'invisible'){
    chartDiv.style.display = 'none';
 }
 var gradeChart;
 const ctx = document.getElementById("gradeBar");
 /*
 Parse the input form and class data
 */
 async function parseName() {
    let className = document.getElementById('courseName').value.toUpperCase();
    let classNum = document.getElementById('courseNum').value;
    let department = document.getElementById('courseField').value.trim().toUpperCase();
    let semester = document.getElementById('semester').value;
    let departments = '';
    await fetch('https://derec4.github.io/ut-grade-data/2022prefixes.json')
    .then(res => res.json())
    .then(data => { departments = data; });
    if(!className && !classNum && !department) {
        alert("At least fill out the form...");
        return;
    }
    if(!department || !classNum) {
        alert("Missing fields")
        return;
    }
    if(!departments.includes(department)) {
        alert("Invalid Department");
        return;
    } 
    console.log(department, classNum.toString(), className.trim());
    await PapaParse(department, classNum.toString(), className.trim(), semester);
 }
 /*
 Fetch the necessary database depending on semester and filter based on the input data
 */
 async function PapaParse(department, num, name, sem) {
    let cData = '';
    // console.log(sem);
    let url = '';
    switch (sem) {
        case 'f2022':
            url = 'https://derec4.github.io/ut-grade-data/2022%20Fall.json';
            break;
        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':
            url = 'https://derec4.github.io/ut-grade-data/2021%20Fall.json';
            break;          
        default:
            url = 'https://derec4.github.io/ut-grade-data/2022%20Fall.json';
            break;
    }
    await fetch(url)
    .then(res => res.json())
    .then(data => { cData = data; });
    let selectedClass = cData.filter(cData => cData["Course Prefix"].includes(department))
                             .filter(cData => cData["Course Number"] == num.toString().toUpperCase())
                             .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");
        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");
        return;
    }
    console.log(selectedClass);
    let gradeDist = { 
        "A": 0,
        'A-': 0,
        'B+': 0,
        'B': 0,
        'B-': 0,
        'C+': 0,
        'C': 0,
        'C-': 0,
        'D+': 0,
        'D': 0,
        'D-': 0,
        'F': 0,
        'Other': 0
    };
    for(i in selectedClass) {
        let letterGrade = selectedClass[i]["Letter Grade"];
        let cnt = selectedClass[i]["Count of letter grade"]
        gradeDist[letterGrade] += cnt;
        // 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'],
            datasets: [{
                label: 'Grade distribution for \"' + selectedClass[0]["Course Title"] +"\"",
                data: Object.values(gradeDist),
                borderWidth: 2,
                // borderColor: '#36A2EB',
                backgroundColor: ["rgb(98, 244, 54)", "rgb(129, 231, 10)", "rgb(151, 218, 0)", "rgb(168, 204, 0)", "rgb(181, 190, 0)", "rgb(191, 176, 0)", "rgb(199, 162, 0)", "rgb(205, 148, 0)", "rgb(209, 133, 0)", "rgb(211, 119, 0)", "rgb(210, 105, 0)", "rgb(208, 91, 23)", "rgb(204, 78, 36)", "rgb(198, 66, 46)", "rgb(190, 54, 54)", ""],
            }]
            };
        gradeChart.update();
    } else {
        loadChart(gradeDist, selectedClass[0]["Course Title"]);
        aboutDiv.style.visibility='hidden';
        chartDiv.style.display = '';
    }
 }
 function loadChart(gradeDist, courseName) {
    gradeChart = new Chart(ctx, {
        type: 'bar',
        data: {
        labels: [           
            'A',
            'A-',
            'B+',
            'B',
            'B-',
            'C+',
            'C',
            'C-',
            'D+',
            'D',
            'D-',
            'F'],
        datasets: [{
            label: 'Grade distribution for \"' + courseName + "\"",
            data: Object.values(gradeDist),
            borderWidth: 2,
            backgroundColor: ["rgb(98, 244, 54)", "rgb(129, 231, 10)", "rgb(151, 218, 0)", "rgb(168, 204, 0)", "rgb(181, 190, 0)", "rgb(191, 176, 0)", "rgb(199, 162, 0)", "rgb(205, 148, 0)", "rgb(209, 133, 0)", "rgb(211, 119, 0)", "rgb(210, 105, 0)", "rgb(208, 91, 23)", "rgb(204, 78, 36)", "rgb(198, 66, 46)", "rgb(190, 54, 54)", ""],
        }]
        },
        options: {
            legend: {
                labels: {
                    fontColor: "#00FF59",
                    fontSize: 15
                }
            },
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              y: {
                stacked: true,
                grid: {
                  display: true,
                }
              },
              x: {
                grid: {
                  display: false
                }
              }
            }
        }
    });    
 }
--- a/stats.png
+++ b/stats.png
Author	SHA1	Message	Date
Derek	33a748baf3	feat: spring and summer 2025 data	2025-12-01 15:21:58 -06:00
Derek Chen	46862b75a4	perf: word difference	2025-10-19 02:44:19 -05:00
Derek Chen	3a122b9fd1	feat: you do not want to miss this one	2025-10-19 02:42:16 -05:00
Derek Chen	941b77d66a	Merge branch 'master' of https://github.com/DereC4/ut-grade-distribution-viewer	2025-10-19 02:32:49 -05:00
Derek Chen	7a1b31d9bc	feat: required asterisk	2025-10-19 02:32:45 -05:00
Derek Chen	8ad1b2c694	style: form blurb text centered	2025-10-19 02:28:08 -05:00
Derek	b8063bb94d	Update README.md	2025-10-19 02:23:41 -05:00
Derek Chen	b6120ffd40	style: make the forms prettier and more consistent to click	2025-10-19 02:15:11 -05:00
Derek Chen	1dab808cb2	Update README.md	2025-03-25 17:01:24 -05:00
Derek Chen	f0a39ba1e9	Update README.md	2025-03-21 20:46:01 -05:00
Derek Chen	6510c0f089	Merge branch 'master' of https://github.com/DereC4/ut-grade-distribution-viewer	2025-03-03 04:44:08 -06:00
Derek Chen	3d467352b1	feat: update database, update changelog blog	2025-03-03 04:44:01 -06:00
Derek Chen	12b080d741	Update README.md	2024-10-06 18:24:54 -05:00
Derek Chen	83d87af3cf	Update README.md	2024-10-06 18:20:00 -05:00
Derek Chen	316a4bf20f	feat: added back issues, tested better input styling but didnt look too good	2024-10-05 17:48:34 -05:00
Derek Chen	56530685e2	feat: small change to how we handle no names, fallback to default option	2024-08-03 15:17:35 -05:00
Derek Chen	83fc1f53c9	feat: session will remember the semester you chose	2024-08-03 15:15:49 -05:00
Derek Chen	df79234ba8	feat: session will remember the semester you chose	2024-08-03 15:13:40 -05:00
Derek Chen	8d403b5fdb	feat: successfully hooked up to our experimental backend api that provides course instructor data	2024-08-03 14:51:35 -05:00
Derek Chen	5261ceabc6	fix : might as well comment that out while im at it	2024-07-29 01:11:00 -05:00
Derek Chen	36cd86689a	fix: oops	2024-07-29 01:05:25 -05:00
Derek Chen	68358de0c8	feat: checkpoint for api hooking up	2024-07-28 13:44:25 -05:00
Derek Chen	f24d6dc09c	feat: new changelog section	2024-07-28 12:15:28 -05:00
Derek Chen	f6e531ff1f	style: added a new sentence	2024-07-28 12:13:03 -05:00
Derek Chen	ad85bbc21f	feat: new spring semester!	2024-07-28 12:11:24 -05:00
Derek Chen	2113f1ff6d	feat: less word clutter for a better UI	2024-05-30 22:31:40 -05:00
Derek Chen	6755b7ec36	feat: changelog stuff	2024-05-30 00:53:37 -05:00
Derek Chen	5e6e2dad85	feat: fancy hyperlimk	2024-05-28 22:00:13 -05:00
Derek Chen	d64731bdb4	feat: blog posts	2024-05-28 21:56:00 -05:00
Derek Chen	23a21000c3	feat: removed the github star thingy ;-;	2024-05-28 21:49:34 -05:00
Derek Chen	cf72cd4e90	feat: button has been migrated	2024-05-28 21:44:07 -05:00
Derek Chen	93bb9a1d4b	Merge branch 'master' of https://github.com/DereC4/ut-grade-distribution-viewer	2024-04-23 15:51:26 -05:00
Derek Chen	a2f03345ed	fix: how did i not realize the favicon was mispelled for that long	2024-04-23 15:50:23 -05:00
Derek Chen	46f057f8ea	fix: desc	2024-04-23 15:42:23 -05:00
Derek Chen	7a88561dbe	Update README.md	2024-04-23 15:36:57 -05:00
Derek Chen	e1c5af3ff6	fix: another broken link	2024-04-20 20:27:06 -05:00
Derek Chen	31cd643f6f	fix: navbar broken links	2024-04-20 20:19:15 -05:00
Derek Chen	2edc3a5016	feat: last update for today woohoo	2024-04-20 20:12:00 -05:00
Derek Chen	048bd99a4d	feat: social media icons and a lil bit of trolling	2024-04-20 20:06:37 -05:00
Derek Chen	6f5a715baf	fix: responsive	2024-04-20 19:55:33 -05:00
Derek Chen	bfc5c69ad8	feat: about page is doneeeeeeee	2024-04-20 19:51:24 -05:00
Derek Chen	deab634aa8	graph I spent too long on	2024-04-20 19:39:07 -05:00
Derek Chen	7510bbacc8	feat: both pages look good! Color slider works for both too	2024-04-20 18:18:54 -05:00
Derek Chen	7889518286	more progress on the about and changelog page	2024-04-20 17:59:08 -05:00
Derek Chen	08088c9938	construction begins on a changelog page	2024-04-20 17:54:11 -05:00
Derek Chen	ec12a4829e	feat: mah god after 1 long hour i have finally figured out how to stick that flexbox footer where it belongs	2024-04-20 16:52:43 -05:00
Derek Chen	5b7a2b06bd	fix: chart.js bug not changing color scheme finally fixedddd	2024-04-20 16:16:57 -05:00
Derek Chen	edbeeb8df9	Fall 2023 Update (The Real One)	2024-04-20 16:11:15 -05:00
Derek Chen	7c72ae021c	Oops we got scammed	2024-03-04 15:24:28 -06:00
Derek Chen	99207228b4	Fall 2023 Update	2024-03-04 15:18:50 -06:00
Derek Chen	0cd3bcc6b2	grammar	2024-01-22 01:19:52 -06:00
Derek Chen	505786434e	Took a while but I think I got the font color of charts to change as well	2023-12-28 14:08:37 -06:00
Derek Chen	ca7bea8af7	While I'm at it might as well play with the color switcher real quick	2023-12-28 13:51:05 -06:00
Derek Chen	b4bb95ef4f	Merge branch 'master' of https://github.com/DereC4/ut-grade-distribution-viewer	2023-12-28 13:44:27 -06:00
Derek Chen	bd29ca1b82	Oops it appears we forgot to adjust the frontend	2023-12-28 13:42:53 -06:00
Derek Chen	cae4134f9a	Summer 2023 update!	2023-12-28 13:42:15 -06:00
Derek Chen	8cbf2ef3ce	Color palette changing for the funsies	2023-10-03 17:56:09 -05:00
Derek Chen	572e9ae558	Support for 2023 added	2023-09-09 19:20:17 -05:00
Derek Chen	bbd76cbd47	Reworked some css, made our friendly button look better and footer is stuck for good	2023-09-09 19:06:59 -05:00
Derek Chen	e6c0bbfad8	Flexbox fun	2023-08-25 00:42:48 -05:00
Derek Chen	86e9589ba8	comments	2023-08-01 14:51:15 -05:00
Derek Chen	6fe2197b59	Separated chart generation into different functions for readability	2023-08-01 14:47:40 -05:00
Derek Chen	099960691d	that boolean could be simplified though	2023-08-01 14:42:49 -05:00
Derek Chen	ee48cb965d	Nevermind i like this method better	2023-08-01 14:42:26 -05:00
Derek Chen	11d9e7f9c6	The iteration through selected classes has been changed from for i in range to a for each	2023-08-01 14:39:37 -05:00
Derek Chen	5c2a88d3b1	Restructured data fetching method, and added one semicolon	2023-08-01 14:37:30 -05:00
Derek Chen	6775139647	Switched to an array of URLs instead of lengthy switch statement. Await format simplified down	2023-08-01 14:25:55 -05:00
Derek Chen	daab17d214	Removed unneeded h1	2023-07-26 20:01:20 -05:00
Derek Chen	1380e1a369	Stuck our lovely footer at the bottom for good using the grid	2023-07-26 19:55:49 -05:00
Derek Chen	961c59fa41	Semantics	2023-07-26 19:50:17 -05:00
Derek Chen	5166f4a1ad	Looks like it worked!	2023-07-26 19:47:51 -05:00
Derek Chen	1cf69f943b	Introducing custom properties to make responsiveness easier	2023-07-26 19:44:19 -05:00
Derek Chen	232f14f4b1	Reorganized menu and cleaned up js code	2023-07-19 20:01:12 -05:00
Derek Chen	7237e07f01	Removed experimental feature label because well it has been working pretty properly for the past 3 months	2023-07-19 19:40:20 -05:00
Derek Chen	1144aa3c58	Icon	2023-06-07 11:00:06 +08:00
Derek Chen	5a974687c6	Icon	2023-06-07 10:56:24 +08:00
Derek Chen	5fb7ba71eb	Finalizing	2023-06-07 10:43:33 +08:00
Derek Chen	77832977e2	Oops broke the website	2023-06-07 10:38:12 +08:00
Derek Chen	31d901918f	Cleaning up conditional	2023-06-07 10:36:55 +08:00
Derek Chen	335a644608	Experimental feature bye bye	2023-06-07 10:36:11 +08:00
Derek Chen	335547cb6a	Formatting after learning some style; improve functions later	2023-06-07 10:33:25 +08:00
Derek Chen	69b7fe1971	Simplified a statement	2023-05-30 15:28:06 +08:00
Derek Chen	a9df833b00	Merge branch 'master' of https://github.com/DereC4/ut-grade-distribution-viewer	2023-05-25 11:41:08 +08:00
Derek Chen	e1cba24776	Nevermind that breaks everything:	2023-05-25 11:41:00 +08:00
Derek Chen	bc80c728aa	Let's comment it out for now	2023-05-25 11:40:38 +08:00
Derek Chen	f7d64dca98	Removed comment	2023-05-25 11:39:30 +08:00
Derek Chen	b0ea8316bf	Urls added to switch statements	2023-05-25 11:37:27 +08:00
Derek Chen	f27ec81981	New semester datasets incoming!	2023-05-25 11:35:04 +08:00
Derek Chen	7f724319ea	New semester datasets incoming!	2023-05-25 11:34:45 +08:00
Derek Chen	0c43411905	Update index.html	2023-05-09 23:19:01 -05:00
Derek Chen	183a8289ba	Update README.md	2023-05-08 22:25:27 -05:00
Derek Chen	cfee6b5335	Wow we missed a really major spot check	2023-05-08 21:17:50 +08:00
Derek Chen	63e8aec481	For unaware registerers	2023-05-03 22:14:02 -05:00
Derek Chen	de43d0e445	Huh it works?!?	2023-05-03 22:09:34 -05:00
Derek Chen	7e992624f9	good ol disclaimer	2023-05-03 22:03:11 -05:00
Derek Chen	7abc850bce	seo...	2023-05-02 16:05:12 -05:00
Derek Chen	754f488394	Meta tags	2023-05-02 16:04:50 -05:00
HW Computer	956312d1bd	Small changes	2023-05-01 03:32:25 -05:00
HW Computer	deda89a92b	Woah	2023-05-01 03:28:46 -05:00
HW Computer	c99770b64b	We got this	2023-05-01 03:27:51 -05:00
HW Computer	6c8cd20b06	Maybe thisll not break plz	2023-05-01 00:09:31 -05:00
HW Computer	e980ccf7fa	More responsivity	2023-04-30 00:13:00 -05:00
HW Computer	1c71a199ba	More efficient loop?	2023-04-29 23:56:59 -05:00
HW Computer	617fadb0af	Changed label te;xt	2023-04-29 23:55:15 -05:00
HW Computer	091d981818	Changed te;xt	2023-04-29 23:54:41 -05:00
Derek Chen	848d9e581b	Add files via upload	2023-04-29 17:07:19 -05:00
HW Computer	8e5a978332	E;xperimental semester now	2023-04-29 17:04:35 -05:00
HW Computer	66b67b8fa2	Finally fi;xed the grid row issue woohoo	2023-04-29 16:57:27 -05:00
Derek Chen	429317208b	Merge pull request #5 from DereC4/responsive Responsive	2023-04-29 16:42:57 -05:00
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