A reflective emotion-based web app Built with JavaScript, HTML5, and CSS3 | Designed in DTC 477 By: Zoe Thompson
Emotion Echo is an interactive web app that reflects user emotions through soft atmospheric visuals, inspirational messages, and personalized journal entries.
When users type an emotion in English, the app displays a curated message, a matching background image via the Unsplash API, and advice related to their current feeling. It also stores each interaction in a local "emotion diary" for personal reflection.
- π€ English-based emotion input
- π¨ Dynamic visuals powered by
particles.jsand Unsplash backgrounds - π Emotion diary using localStorage
- π§ Poetic, supportive feedback based on emotional tone
- π οΈ Modular, readable JavaScript functions
- HTML / CSS / JavaScript
- Unsplash API
localStoragefor client-side data persistence- ChatGPT-assisted planning and debugging
- p5.js for floating particles background effect
- Type your current emotion in English (e.g., happy, anxious, hopeful).
- Hit Enter or click the Submit button.
- View your personalized message, reflection, and evolving background.
- Use the diary log to revisit past entries.
- Click Clear Diary to reset.
This project uses the Unsplash API. In a production environment, do not expose your API key in public repos. For educational use only.
Zoe Thompson β GitHub Portfolio
Created as part of DTC 477: Advanced Web Development coursework.
The prompt βEnter your emotion in English pleaseβ appears as:
γζζ
γθ±θͺγ§ε
₯εγγ¦γγ γγγγ
For academic showcase purposes only. Not intended for commercial distribution.