Decision Mirror

• 

  First Page

• 

  Example of the Inside

• 

  End/Last page/ Final Results

Inspiration Decision Mirror was inspired by the idea that small, everyday decisions reflect deeper personality patterns. Many existing personality tools feel static and disconnected, often giving results without showing how they were formed. I wanted to create something more interactive and engaging, an experience where users can see their decisions actively shape their results in real time.

What Impressed Me One of the most interesting parts of building this project was experimenting with code and watching ideas come to life. At the beginning, I wasn’t sure what direction I wanted to take, but by trying different layouts, features, and logic systems, I was able to discover what worked best. I explored new UI elements, tested different ways of structuring logic, and experimented with how user input could be translated into meaningful feedback. Seeing a simple idea evolve into an interactive application was both surprising and motivating.

What I Learned This project helped me significantly strengthen my skills in HTML, CSS, and JavaScript. Since I hadn’t used these languages in about a year, I had to relearn core concepts and rebuild my confidence as a developer. Some key things I learned include:

• How to structure and organize a clean, responsive layout using HTML and CSS
• How to use JavaScript to handle user input and create dynamic behavior
• How loops and conditional logic can simplify repetitive code instead of copying and pasting
• The importance of writing clean, well-commented code so others can easily understand it I also realized that programming is flexible, there are often multiple ways to solve the same problem, and finding efficient solutions is an important skill.

How I Built It I built Decision Mirror using CodePen, which allowed me to develop and preview my project in real time. The project combines:

• HTML to structure the questions and layout
• CSS to design the interface and improve user experience
• JavaScript to power the logic and interactivity The application works by asking users a series of questions. Each answer contributes to a score representing different personality traits: Total Score=Q1+Q2+Q3+⋯+Qn​ These scores are calculated dynamically and displayed visually, helping users better understand their decision-making patterns. The goal was to make abstract traits feel clear, interactive, and engaging.

Challenges I Faced One of the biggest challenges was getting back into coding after a long break. I had to revisit tutorials and resources, such as W3Schools, to refresh my understanding of HTML, CSS, and JavaScript. At times, it was frustrating to relearn concepts I once knew, but it ultimately strengthened my foundation. Another major challenge was creating the project demonstration video. Finding a reliable tool that allowed both screen recording and audio took a lot of trial and error. Many tools were limited, required payment, or didn’t work properly. Even after finding a solution, recording wasn’t easy, I had to restart multiple times due to small mistakes, technical issues, or background noise. However, I stayed persistent and kept improving until I was satisfied with the final result.

Outcome The final product is a fully functional and interactive web application that transforms user input into meaningful insights. Decision Mirror successfully combines logic, design, and interactivity to create a user-friendly experience. Beyond the final result, this project represents growth in both my technical skills and problem solving abilities. It challenged me to relearn, adapt, and push through obstacles, ultimately making me a more confident developer.

Built With

• codepen
• w3schools