Bloom

Main Page
The Get Outside! page with a Google Map of your local area, links to mental health resources and others.
Tasklist for tracking self care!

Inspiration

Not sure where to start with building self care habits? Bloom is here to help you have fun with them!

What it does

Bloom incorporates a tasklist, rewarding users with cute animations when they complete tasks. There are special sections for tasks that are common across all people, like drinking water and spending time outside. There is also a page connecting users to resources, like an embedded Google Map of parks in their area, the National Park Service Instagram, and a list of dedicated websites for getting outdoors.

How we built it

We used GitHub pages to host the site and wrote our code in HTML, CSS, and JavaScript.

Challenges we ran into

We ran into some challenges early on with setting up and beginning to use GitHub. We ended up with some confusing merge conflicts, but were able to plan a way to separate out parts of the site to work on them simultaneously and not get in each others' way.

We also had some trouble implementing the image carousel, but after collaborating and trying several different element types, we made it work.

We also had to explore some different ways of implementing an animation upon task completion, but settled on using a timeout on an onclick function for swapping images.

Accomplishments that we're proud of

We're really proud of our finished product and how we were able to put all the pieces together. We all come from different majors, so it was really interesting being able to put our collective skill sets together and create a project that we think is pretty cool.

We also did well with communicating and figuring out whose skill sets fit different aspects of the project, as well as citing our resources when we used free icons. We also took accessibility into account by showing things like button changes with more attributes than just color.

What we learned

Not all of the members knew JavaScript coming into the project so everyone learned a ton relating to that. We also learned a great deal about version control, teamwork, and communication to make the project development go as smoothly as possible.

What we did to make it accessible

Used appropriate HTML5 tags for all the html elements like forms, images, footers, and links
Added alt text to all images
Ensured that the color contrast passed WCAG color contrast standards
Spellchecked and edited for correct grammar
Made all fonts a readable size and put them in a color that stands out against its background
Clickable items are large and easy to find
More than one method is used for identifying changes to an element. For example, changing the image as well as the background color of a button when it is clicked.

What's next for Bloom

In the future, we'd like to add more interaction to the plant on the main page, like making it grow and more animations. We'd also like to integrate AI to suggest self care tasks, and continue to add more resources for self care and getting outdoors. In addition, we'd like to add an browser extension for the website so the user doesn't need to be in the tab to track tasks, water, etc.