Mood Tracker

Our web app is a mood tracker and journal. You can log how you’re feeling, write a reflection, and revisit past entries. It’s designed to support your mental well-being in one easy and clean platform.

Comment

Inspiration

The State of Mind logs in the Health app in our iPhones inspired us to build a clean and accessible platform where people can log and track their moods and be able to see a trend within their logs. This can help them understand their emotional states and patterns, and also provide a platform for them to securely write down their feelings.

What it does

It allows the user to select any mood based on hoe they are feeling at the moment, and then pops up a text box with a prompt for them to write about what is making them feel this way. After their reflection, they are able to save their entry and are then provided with a motivational/inspirational quote. The past entries can also be visited by the user using the view my journal button. This allows them to see the mood, their reflection, the quote, and the timestamps from previous logs, even after refreshing the page. The web app was also designed with accessibility in mind, so we used a colorblind friendly color palette for the UI, and we kept a font that is comfortably big.

How we built it

We used VS Code and combined our HTML and JavaScript skills to start off by building a basic website and then eventually expanding on it by experimenting with different styles and features. Before we began coding, however, we had sketched out and discussed a rough idea of the web app itself.

Challenges we ran into

We had some trouble finding a suitable API to use and integrating it took a lot of trial and error but we were eventually able to get it. We also had to teach ourselves async functions and await so that the page wouldn't freeze while it was trying to fetch the data from the API.

Accomplishments that we're proud of

The API was finally able to work smoothly and the storage of the previous logs also worked out in the end. We are also proud of the fact that the logs are saved even if the page is refreshed.

What we learned

We learned a lot about using APIs and also about async functions and await. It took us a lot of trial and error with the styling of the page as well, so we were able to learn even more CSS than before. We were also able to expand our knowledge on JSON.

What's next for Mood Tracker

In the future, we would like to build onto mood tracker to include more features like rating the intensity of your moods from 1-10, more specific and different prompts, and suggestions for what to do based on how you're feeling. We would also like to make it more aesthetically pleasing, perhaps by adding more animations and adjusting the layout of the page even more.

Built With

Share this project:

Updates