Inspiration

We've all experienced it: The stress of deadlines, meetings, and everything else we deal with in our daily lives. What if there was a way to relax and de-stress right from your computer? Well now there is! Meet exhale! exhale leverages the power of deep breathing to help you de-stress and practice mindfulness.

How I built it

exhale is built entirely with vanilla web technologies (HTML/CSS/JS). I did not use any CSS or JS frameworks to build this project. Using my prior knowledge of HTML and CSS, I was able to get a basic layout and animation working. I then used online resources to learn how to add JavaScript to make the site more dynamic.

Challenges I ran into

I found it difficult to add interactivity to the site, as I have very little experience with JavaScript. I used various tutorials and guides to help me add features such as play/pause and speed selection.

Accomplishments that I'm proud of

I am very proud that I was able to deliver a fully functional and good-looking site in time for this hackathon. I gained more experience with JavaScript and learned how to make a webpage interactive.

What I learned

I experimented with new layouts, properties, and effects in CSS. I also got more comfortable with JavaScript as I learned how to control a CSS animation and how to update the inner text of an HTML element.

What's next for exhale

I hope to add new features and get feedback from friends and family. I would also like to expand the site to offer more resources for stress management and mindfulness techniques.

Built With

Share this project:

Updates