I made a simple website a few weeks ago to keep track of my schedule. It was pretty simply and looked a little like this:

schedule.

This was my first really project in JavaScript so I didn’t want to go too crazy. It works by drawing onto an HTML Canvas and getting data from a JSON file. Each JSON file has an array of 7 days, each of those days has an array of classes, and each class has has the name, course number, building, room number, start and end times, as well as the color to display.

Aside from general improvements, the biggest thing I have added recently added is a map which gives you directions to your next class automatically. This was a little more complicated to do but I could get most of what I needed from Google’s example code. What it does is get the current and next class based on the time, then grab the buildings from the JSON file. It then plugs those buildings into google maps to get directions using public transit and shows that on the map.

This is mainly intended to be used on mobile, so instead of buttons that you tap to change to the schedule or map page, you swipe left and right on the main screen. I found a library online which makes detecting swipes easy. There are 3 pages: Map, Schedule, and Settings. Right now the setting page doesn’t do anything (it’s just a blank screen) but here is what the map page looks like:

map

The schedule page is the same as shown above.

As I plan to eventually make this available to other users, I needed a way for whoever is using the site to choose which schedule to see. This is the login page that I have made:

login

Currently there is no password or anything like that but I do have plans for that. Right now my idea is to have a user login with an easily rememberable username and a strong password, but then the page that they will be directed to will have a long base64 string that the server will be able to look up. Using this means that you will be able to bookmark the page and go back to it without a password, but anybody who knows someones user ID will not be able to see the schedule unless they have the password.

The code is available on my Gitlab