Inspiration

As first-year students just entering university and transitioning from high school life, this is our first time dealing with our stress and our problems alone. With the coming of various midterms and exams, it's really difficult to find an outlet to vent our stress. So, we decided to come up with an easy, accessible way for anyone with similar experiences -or just anyone in general -to deal with stress during tough times.

What it does

Our main website web interface presents links to three different websites with activities for the user to do to relieve their stress. The first one is a balloon popping activity. This allows the user to click the balloon to make it bigger and eventually pop. The second is a motivational quote generator. Every time the user clicks the button on the interface, a motivational quote is generated on a box centered in the middle. The third activity is a guided breathing exercise. In this activity, the user is guided through proper deep breathing using a timer to time how long one should breath in and breathe out, as well as having an animation that helps to visualize the breathing process (a circle gets bigger as you breathe in, smaller as you breathe out). The interface is user-friendly (easy to go back and forth between pages) and has colorful cartoon backgrounds of unique nature settings.

How we built it

We built our project using HTML, CSS, and JavaScript, along with a web font API to enhance the visual aspect of our web interface. HTML formed the structure of our site, including navigation links, activity pages, and all on-screen content. CSS allowed us to create an accessible interface and implement animations such as the balloon-popping effect and the expanding/contracting breathing circle. JavaScript powered the interactive elements, like the quote generator and timed breathing sequence. The visual elements were all original works (not outsourced). Finally, we integrated a font API to give the site a calming visual style.

Challenges we ran into

The main challenge that we faced was finding ways to blend various programming languages to create one final, cohesive project. Previously, we were more used to working on projects dealing with specific languages and then moving onto different languages.

Accomplishments that we're proud of

Being able to make a working project for our first hackathon and implementing features that worked the way we wanted it to was something that we are all extremely proud of.

What we learned

We learned to apply our skills in more theory based learning into an actual hard-coded project that can be implemented on a public platform.

What's next for The Stress-Relief Website

We can implement more stress relieving activities as our next step and make our current features more refined.

Share this project:

Updates