Inspiration
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.
Log in or sign up for Devpost to join the conversation.