FitVerse – Virtual Fit & Style Recommendation System

Project Description:

FitVerse is a front-end web application that provides virtual body-shape analysis and clothing style recommendations based on user-entered body measurements. The project simulates a basic “virtual try-on” experience using a visual body model and dynamic UI interactions, without relying on external APIs or backend services.

Problem Statement:

					Online clothing shopping often results in poor fit selection due to the absence of physical try-ons. Users struggle to understand which clothing styles suit their 								body shape. FitVerse addresses this problem by:
					
					1.Identifying a user’s body type from measurements
					
					2.Displaying a visual representation of the body shape
					
					3.Suggesting suitable clothing styles interactively

Features Implemented:

					Interactive body measurement input (height, weight, bust, waist, hip)

					Automatic body shape detection (Hourglass, Pear, Apple, Rectangle, Inverted Triangle)
					
					Dynamic 3D-style body preview using visual assets
					
					Clothing category and fit-type selection buttons with active state styling
					
					Real-time style recommendations displayed below the preview
					
					Responsive and modern UI with animations and transitions
					
					Keyboard-accessible numeric inputs
					
					Clean separation of HTML, CSS, and JavaScript

DOM Concepts Used:

					getElementById() for accessing form inputs and display areas

					querySelectorAll() for handling button groups

					addEventListener() for click and input events

					classList.add() / classList.remove() for active state UI changes

					Dynamic DOM updates using innerHTML

					Conditional rendering based on user input

					Event delegation for grouped buttons

Steps to Run the Project:

					Download or clone the project folder

					Ensure the following files exist in the same directory:

					index.html

					style.css

					script.js

					images/ folder containing body shape images

					Open index.html in any modern web browser (Chrome recommended)

					Enter body measurements and select clothing options

					Click Generate Fit Recommendation to view results

Known Limitations:

						No real 3D rendering (visuals are image-based simulations)

						No backend or database integration
						
						Recommendations are rule-based, not AI-driven
						
						Body images must be manually added to the images folder
						
						Not optimized for extremely small screen devices

Future Improvements:

				True 3D avatar using WebGL or Three.js

				Gender-specific body models
				
				AI-based recommendation engine
				
				Backend user profile storage
				
				Product-based outfit previews