SlugPlanners

Inspiration

In our opinion, the academic planner tool that MyUCSC provides is not a pretty one to work with. It isn't that functional or tailored well enough to fit our needs as a student. Although resources like the Academic Planning Form from UCSC advising exists, we felt that we could make some resources more convenient and appealing overall for students to use.

What it does

SlugPlanners offers a means of searching for classes from the UCSC catalog and creating a 4-year planner. All course results are displayed with an associated link to the appropriate catalog page for easy reference. The planner, which is built into the site, is separated by quarter and year, allowing for the addition or removal of individual classes. Furthermore, the site dedicates pages to an undergraduate major/minor search tool and a set of catalog resources for general education requirements.

How we built it

The site was constructed with the basic web development elements of HTML, CSS, and JavaScript. Brief information about UCSC's majors, minors, and courses were extracted by web scraping with the help of Axios and Cheerio.

(Sidenote: One of us started drafting a very loose skeleton of the site a few minutes before 1/14/22 at 9:00PM PST, as the first commit with files shows. All other coding work was completed after.)

Challenges we ran into

As one of us was completely new to web development and the other had some experience but wasn't well acquainted in things like web scraping or manipulating the DOM with JS, we ran into plenty of small problems. It took a bit of time to just create the planner, let alone the menu bar, and we lost some time figuring out how to scrape data from the UCSC catalog site. Learning a whole new language in just two days was already a rather big struggle, yet we still had a whole project to create along the way. Some technical issues we ran into were when we tried to make the menu bar open and close as well as overlapping elements so the menu wasn't behind the class list or planner. We also struggled with the slide bar on the planner as well as creating columns within the planner in order to list the classes in a more organized fashion. On the JS side, we found some difficulties in getting HTML elements to respond to events like submitting courses or showing and hiding sections of the planner. There were a few issues with coordinating the JS to work with the HTML/CSS, as we often worked separately to develop these parts of the site, but for the most part, we managed to get through these issues.

Accomplishments that we're proud of

We are so proud of how much we were able to accomplish in only 2 days! The interface exceeded our expectations and we didn't expect the website to look so professional, especially coming from two rookie coders. We are amazed that we were able to extract data from other sites, specifically UCSC catalogs to get the full class lists, which was a completely brand new concept to both of us.

What we learned

We learned so much about web design and the backend of extracting information. Since one of us was completely foreign to HTML/CSS, she basically learned the language as we were trying to accomplish this project. The other partner, who had some familiarity with HTML/CSS/JS, nonetheless managed to learn quite a bit about new technologies and techniques in order to collect UCSC course data and make some elements responsive -- not without failures, but we think we pulled things off well enough for 2 days.

What's next for SlugPlanners

We want to continue to expand this website to provide much more resources and functionalities before releasing it to the public. In the near future, we hope to add class descriptions, class availability, current credits/how many more you need to graduate, and account creation so that students have a way to save their planners and personalize their accounts to their liking.

Built With

• axios
• cheerio
• css
• html5
• javascript
• json