Inspiration
Inspired by the belief that even small check-ins can make a big difference, this project aims to create a supportive, approachable tool for people to connect with their emotions and prioritize mental well-being. In today's fast-paced world, taking a moment to assess our feelings can be incredibly valuable, and this project seeks to make that moment simple and meaningful.
What it does
The project offers a quick mental health check-in. Users are prompted to rate their current feelings on a scale of 1 to 10. The tool provides a positive sentence, breathing exercises, or a motivational quote based on their responses. My goal is to provide users with a personalized response that meets them where they are emotionally.
Languages and Tools Used
- HTML: Structuring the content and layout of the web page.
- CSS: Designing the look and feel, including color schemes and animations.
- JavaScript: Enabling dynamic functionality.
Challenges I Ran Into
One of the main challenges I faced was with the slider element. Initially, I struggled to align the bubble displaying the slider's value directly above it. The bubble wasn’t syncing with the slider's position, creating an offset. After experimenting with JavaScript and tweaking the CSS, I finally got it to follow the slider’s movement smoothly, enhancing the user experience.
What I Learned
Through this project, I learned how small UX details can significantly impact the feel of an interactive web tool. I also gained more confidence working with JavaScript for real-time user interactions and learned more about CSS styling for intuitive designs.
Built With
- css
- html
- javascript
- platforms
- web
