Inspiration

Students can often find themselves overworking with countless extracurriculars and school activities. Having to commit time to an excessive amount of activities creates severe stress for students, trying to accomplish more than what is healthy. So much so that many individuals cut on sleep, harming their physical and mental wellbeing. Schedule builder was created to allow students to recognize how much time they are spending in each of their activities to improve their time commitments. Whether it is too much time spent on work or procrastinating on school assignments, School Builder provides the student with an easy way to plan their week.

What it does

Schedule Builder is a website where the user can add the activities for each day to a planner format that keeps track of the time spent on each activity. It is able to schedule any type of time commitment the user wants to add for however long the user desires. The user can then see the hours of sleep they would get as a result of the day's time commitments. In the analysis tab, it shows the average amount of time you spend on the 4 types of activities, sleep, play, extracurriculars, and academics. If you find that your academic average hours each day is too much, and your sleep is lacking because of that, you can reschedule and find the perfect balance using the schedule builder.

How we built it

For the site, we are using a framework based on node called angular. The framework uses typescript, html, and css. We are able to increase the accessibility and feel of the site using a library called angular that helps format and size text. We use angular’s component feature to build our sides through many different parts, such as the day of the week on the schedule, which is a different component that makes up the larger component of the entire week. Using typescript, we are able to manipulate and store the values that are inputted by the user, which is then displayed using HTML and css.

Challenges we ran into

One challenge was having data from the activities component that had values from a user form and sharing that data to the days component that was supposed to display the activity name and hours allocated for it. Utilizing the formGroup object was confusing and hard when nesting forms, so we needed to utilize maps instead to retrieve the values of the user input from the dropdown form. We also had trouble painting the entire schedule because ngFor, a built in angular function that allows you to make a for loop for blocks of html code, only had 4 main variables you were allowed to use. This means the index variable could not be changed frequently because it would mess up the process in which the times and cells were ordered on the table. A variable called rowspan is supposed to make a cell span for multiple rows vertically, but it did not seem to work because all of the rows are already originally created beforehand.

Accomplishments that we're proud of

We are happy that we were able to create a working website that accomplished our initial goals. This is a website that is able to genuinely help students struggling with time management, which is even more difficult with the pandemic taking a toll on many individuals mentally and physically. As this is a problem we faced first hand, with many classes and extracurriculars we are juggling, it is very satisfying to know that we made a project that can be practically used in real life. As for the code, we are proud that the typescript logic was able to work to store and show values on the table, which was very challenging at first.

What we learned

We were able to learn more about the Angular framework and use its tools to fulfil our specific needs on the website. This knowledge will greatly help in future coding endeavours. We also learned that creating a project from scratch is very difficult and requires a lot of time spent researching and trial & error.

What's next for Schedule Builder

Next, we would like to add a feature that is able to automatically calculate how many hours to cut down on activities, if a person is not getting enough time for sleep.

Share this project:

Updates