Inspiration
As university students with heavy workloads, weekly assignments and tests, stress and anxiety are common experiences. One of the group members had discovered a method for relieving stress and relaxing called the box breathing technique. This technique involves inhaling, holding your breath, exhaling, and then holding again, each step for 4-6 seconds. This 'cycle' is then repeated until the individual is relaxed. This box breathing method inspired us to create a relaxation app or website with an animation of sorts that guides the user through the box breathing technique. The relaxed breathing reminded us of meditation so we decided we should also have relaxing meditation music playing in the background as well as a relaxing background.
What it does
This is a breathing and relaxation website. It has a circle with instructions in the middle telling the user when to inhale, when to hold their breath, and when to exhale. These breaths are timed in order to allow the user to calm down and relax from anything that may be stressing them out. The circle expands while the user is instructed to inhale, and shrinks while the user is instructed to exhale. In addition, there is a calming video in the background as well as relaxing meditation music. This music and background are randomized between 3 different sceneries when the website is opened. There is also a play button to pause or play the video and music if needed.
How we built it
To build this site, we used HTML and CSS for the front-end UI design and JavaScript for the functionality of the website.
Challenges we ran into
Since we were working on this project online through Discord rather than in person, communication and organization was a major challenge. It was challenging to keep track of other teammates' additions to the code while at the same time adding your own. Luckily, due to good leadership and teamwork, we were able to assign specific roles to each member and prioritized communicating any changes that we made to the project files. This solved the initial challenge of poor communication and messy, unorganized files.
Accomplishments that we're proud of
Since most of us went in only knowing the basics of Python, we are very proud of the simple fact that we were even able to learn how to develop a fully functioning website. In just a couple of days, we were able to teach ourselves the basics of HTML, CSS and JavaScript and create a website using these languages, one that looks pretty good.
What we learned
We learned a lot in this project; mainly, we learned how to use basic HTML, CSS, and JavaScript, and how to connect them all together to create a product. We improved our skills in developing and designing software and improved our teamwork and communication.
What's next for Knight Hax-Relax
A couple of ideas we may add is a timer to let the user set how long they want to meditate, more scenery, options for how long the breaths should be and how many breaths should be taken, and more.
Log in or sign up for Devpost to join the conversation.