Decision Mirror

• 

  First Page

• 

  Example of the inside

• 

  Last page, final results

Inspiration Decision Mirror was inspired by the idea that small, everyday decisions reflect deeper personality patterns. Many personality tools feel static and disconnected, so I wanted to create something interactive, visual, and engaging that gives users instant feedback on how they think and act.

What Impressed Me One of the most exciting parts of this project was experimenting with code. While exploring different ideas, I tested new techniques, UI elements, and logic structures. Seeing how simple code could turn into an interactive experience was incredibly motivating and helped shape the final concept.

What I Learned Through this project, I strengthened my skills in HTML, CSS, and JavaScript. Since I hadn’t used these languages in a while, I revisited core concepts and improved my understanding of: DOM manipulation Event handling Structuring interactive logic I also learned how important clean, commented code is. It not only makes projects look more professional, but also ensures others can easily understand and build on your work.

How I Built It Decision Mirror was built using CodePen, combining: HTML for structure CSS for styling and animations JavaScript for logic and interactivity The app uses a simple scoring system where each choice adds points to a personality trait: Total Score = Choice 1+Choice 2+Choice 3 These traits are calculated dynamically and displayed through animated bars, along with a personality description and a confetti effect using the Canvas API.

Challenges I Faced One major challenge was getting back into coding after a long break. I used resources like W3Schools to refresh my knowledge and rebuild confidence. Another challenge was recording the demo video. Finding a tool that supported both screen recording and audio took time, and I had to re-record multiple times due to small mistakes or technical issues. Despite this, I stayed persistent and improved with each attempt.

Outcome The final result is a fully functional, interactive web app that combines logic, design, and animation. Decision Mirror successfully turns abstract personality traits into something visual, engaging, and easy to understand.

Built With

• codepen
• w3schools