Stress Relief Website-A Web Application for Mental Wellness

Project Summary

The Stress Relief Website is a user-centric platform designed to promote mental wellbeing through a collection of interactive, science-backed stress management tools. Built using HTML, CSS, and JavaScript, the site empowers users to engage in real-time relaxation practices like guided breathing, ambient sound therapy, and mood tracking. The project focuses on emotional comfort, user input validation, and accessible self-care.

Primary Objectives

• Provide a non-clinical, user-friendly stress relief platform.
• Incorporate scientifically proven relaxation techniques.
• Deliver a calming user experience across all devices.
• Utilize input validation and UX testing for improved interaction.

Technology Stack

Component	Purpose
HTML5	Structured page content
CSS3	Styling, animations, responsive layout
JavaScript	Interactivity, timers, audio control, validation

Core Features

1. Breathing Exercise Visualizer

• Box and 4-7-8 breathing techniques
• Circle animation synced with JS timers
• Reduces anxiety and slows heartbeat

2. Ambient Sound Player

• Nature sounds: Rain, ocean, forest, piano
• JS Audio control (play/pause/volume)

3. Guided Affirmation Prompts

• Positive quotes on a timer with fade animation
• Improves self-esteem and calmness

4. Mood Tracker

• Emoji-based emotion selection
• Custom suggestions based on mood

5. Feedback Form

• HTML form with name, email, message
• JavaScript validation for format and completeness

6. Dark/Light Mode

• Toggle theme with one-click JavaScript
• Enhances visual comfort for users

Design Considerations

• Pastel color palette for calm emotions
• Minimal UI with white space and soft fonts
• CSS animations with slow transitions

Validation & Testing

• Form validation using JavaScript (email, message, empty check)
• Cross-browser testing and responsiveness checks
• Feedback from test users on pacing, readability, and comfort

Psychological Foundations

Feature	Based On	Purpose
Breathing	CBT, Yoga	Calm nervous system
Sound Therapy	Music psychology	Reduce stress hormones
Affirmations	Positive Psychology	Encourage self-belief
Mood Tracking	Self-regulation	Build emotional awareness

Real World Applications

• Students and professionals managing burnout
• Daily mental health check-in tool
• Useful in school/college wellness programs
• Corporate wellbeing portals

What I Learned

• Designed with empathy and psychology in mind
• Improved JS skills through breathing logic, audio control, and form validation
• Learned human-centered design for wellness tech
• Gained experience balancing aesthetics and usability