Grow With Us

Inspiration

In a work from home environment, we know it can be very difficult for people to stay on track. It's also important to take breaks in between long periods of work - research shows that taking breaks helps increase productivity. Inspired by "study with us" livestreams, we wanted to create a timer that shows different plant animations based on whether you are in a study period or a break period.

What it does

Grow With Us is essentially a fixed timer. It goes between 20 minute breaks and 50 minute study periods, showing animations of plants growing during that time.

How we built it

We built the website from scratch using HTML, CSS, and JavaScript. We wrote functions for the timer countdowns and the plant-growing image sequences. The plants grow through a series of pixel-art images/gifs, which gradually complete the visual of each plant.

Challenges we ran into

Figuring out the timing of when the images need to change was difficult because each frame of the animation needed to be displayed for a different time based on whether it was being shown for the 50 minute period or the 20 minute period. It was also difficult to implement two different timers because we had to figure out how to switch between counting down from 20 minutes and counting down from 50 minutes.

Accomplishments that we're proud of

Our graphics! We were able to each create our own plant that we are able to display. We also were able to achieve everything we wanted to for our base project.

What we learned

We learned how to use different aspects of HTML to create different features like the timer and pictures that rotate every x amount of minutes.

What's next for Grow With Us

We hope to be able to incorporate more study tips/resources, so that when people are in the study period, our website can show them some study resources that may help them. Similarly, when people are in the break period, we would want to display some meditation/calming resources to help people destress during their breaks.