One thing that we recognized is that in the modern world there is always stress—from school, work, social media, family, and more. Especially now with the continuing pandemic and the trouble abroad, it is important to find a way to dissipate this stress and to try to find a sense of calm and relaxation.

What it does

This website aims to help people relax and focus on their breathing. It has calm colors and animations, as well as calming ocean noises when the button is pressed. Pressing the button also causes the oval to grow & shrink, with the aim of people focusing on it to control their breathing.

How we built it

We built it using html for the basic structure of the website, css for the formatting and most of the animations, and javascript to help control animations and the audio.

Challenges we ran into

The main challenge we ran into was that both of us only knew C++ at the beginning of the hackathon—a problem when our idea was infeasible with just C++. Throughout the project, we worked to find solutions to the problems we faced & to learn enough to actually make a finished product.

Accomplishments that we're proud of

To be honest, we're mainly proud of actually managing a finished website when we had to learn all of the html, css, and javascript we used for it during the hackathon. We are most proud of the animations through css, as learning how to properly use keyframes and trying to sync animations was difficult.

What we learned

We learned a lot about how to create a website with html, and how to use css to actually make a website look nice. The main lesson we learned was about animating using css. We also figured out how to use javascript to change the predefined html and css based on user input.

What's next for Meditation Website

The next steps for the website would be (1) getting more audio tracks / adding a selection menu to switch between audio tracks, and (2) making more options for the background so that people can find something that works for them.

Built With

Share this project: