Teen Clothing Preference Survey


About the Project

This project is a simple, interactive web survey built with HTML, CSS, and JavaScript that helps teenagers explore their clothing preferences and provides personalized recommendations based on their answers. It focuses on everyday clothing choices like sleeveless vests, hoodies, and casual wear, aiming to boost teens’ confidence and comfort with their style.


Inspiration

Many teenagers struggle with clothing choices due to peer pressure, comfort concerns, or lack of awareness about benefits of certain garments. I wanted to build an easy-to-use tool that encourages self-expression and educates teens about practical benefits of simple wardrobe items like sleeveless vests, which are often overlooked.


What I Learned

  • How to build accessible and responsive forms using only HTML and CSS.
  • Handling user input and events using vanilla JavaScript.
  • Using conditional logic to provide personalized recommendations.
  • Storing and manipulating data on the client side without any backend.
  • Designing a user-friendly interface with clear feedback and minimal distractions.

How I Built It

The project was developed as a single-page web app:

  • Structured the survey with semantic HTML form elements and radio buttons for easy choices.
  • Styled the interface with clean, responsive CSS for readability on desktop and mobile.
  • Implemented JavaScript event listeners to capture form submissions.
  • Based on user selections, dynamically generated customized advice shown below the survey.
  • Ensured the app works fully offline, requiring no external libraries or frameworks.

Challenges Faced

  • Designing questions that were clear, neutral, and relatable to diverse teen audiences.
  • Providing helpful recommendations without sounding judgmental or intrusive.
  • Keeping the app simple and fast while maintaining meaningful interaction.
  • Handling validation and ensuring every question was answered before submission.
  • Styling the results box so it stood out without overwhelming the user.

Final Thoughts

This simple web survey is a step towards helping teens feel comfortable and confident in their clothing choices. By combining straightforward questions with thoughtful recommendations, it encourages self-reflection and promotes positive style habits in a friendly, accessible way.

Built With

Share this project:

Updates