Welcome to my collection of 26 interactive web projects built with HTML, CSS, and JavaScript! Each project demonstrates different concepts and techniques in front-end web development.
- Age Calculator
- Amazon Clone
- Background Generator
- BMI Calculator
- Calculator
- Clock
- Color Palette Generator
- Countdown Timer
- Dictionary App
- Drum Kit
- Expense Tracker
- Image Search
- Movie App
- Music Player
- Note App
- Password Generator
- QR Code Generator
- Quiz App
- Random Quote Generator
- Rock Paper Scissors
- Snake Game
- Stopwatch
- Tic Tac Toe
- To Do List
- Weather App
- Weight Converter
Description: Calculate your exact age in years, months, and days based on your birth date.
Technologies: HTML5, CSS3, JavaScript
Features:
- Date input validation
- Real-time age calculation
- Responsive design
Screenshot:
Description: A responsive clone of Amazon's homepage with modern UI/UX design.
Technologies: HTML5, CSS3, JavaScript
Features:
- Product grid layout
- Search functionality
- Responsive navigation
- Cart simulation
Screenshot:
Description: Generate beautiful gradient backgrounds with customizable colors.
Technologies: HTML5, CSS3, JavaScript
Features:
- Color picker interface
- Live gradient preview
- CSS code generation
- Copy to clipboard
Screenshot:
Description: Calculate Body Mass Index with health category classification.
Technologies: HTML5, CSS3, JavaScript
Features:
- Imperial & Metric units
- BMI category display
- Health recommendations
- Input validation
Screenshot:
Description: A fully functional calculator with basic arithmetic operations.
Technologies: HTML5, CSS3, JavaScript
Features:
- Basic operations (+, -, ×, ÷)
- Decimal calculations
- Clear and delete functions
- Keyboard support
Screenshot:
Description: Digital clock displaying current time with multiple formats.
Technologies: HTML5, CSS3, JavaScript
Features:
- Real-time updates
- 12/24 hour format
- Date display
- Elegant design
Screenshot:
Description: Generate harmonious color palettes for design projects.
Technologies: HTML5, CSS3, JavaScript
Features:
- Random palette generation
- Color code display (HEX, RGB)
- Palette export
- Color harmony rules
Screenshot:
Description: Customizable countdown timer for events and deadlines.
Technologies: HTML5, CSS3, JavaScript
Features:
- Custom time setting
- Visual countdown display
- Alert notifications
- Start/pause/reset controls
Screenshot:
Description: Look up word definitions, pronunciations, and examples.
Technologies: HTML5, CSS3, JavaScript, Dictionary API
Features:
- Word search functionality
- Phonetic pronunciation
- Multiple definitions
- Example sentences
Screenshot:
Description: Virtual drum kit with realistic sounds and animations.
Technologies: HTML5, CSS3, JavaScript, Web Audio API
Features:
- Multiple drum sounds
- Keyboard controls
- Visual feedback
- Touch support
Screenshot:
Description: Track personal expenses with categorization and analytics.
Technologies: HTML5, CSS3, JavaScript, Local Storage
Features:
- Add/delete expenses
- Category management
- Monthly summaries
- Data persistence
Screenshot:
Description: Search and browse images using external image APIs.
Technologies: HTML5, CSS3, JavaScript, Unsplash API
Features:
- Keyword search
- Grid layout
- Image preview
- Download links
Screenshot:
Description: Browse movies with details, ratings, and trailers.
Technologies: HTML5, CSS3, JavaScript, TMDB API
Features:
- Movie search
- Detailed information
- Rating system
- Responsive cards
Screenshot:
Description: Interactive music player with playlist management.
Technologies: HTML5, CSS3, JavaScript, Web Audio API
Features:
- Play/pause controls
- Progress bar
- Volume control
- Playlist navigation
Screenshot:
Description: Simple note-taking application with local storage.
Technologies: HTML5, CSS3, JavaScript, Local Storage
Features:
- Create/edit/delete notes
- Auto-save functionality
- Search notes
- Export options
Screenshot:
Description: Generate secure passwords with customizable parameters.
Technologies: HTML5, CSS3, JavaScript
Features:
- Customizable length
- Character type options
- Strength indicator
- Copy to clipboard
Screenshot:
Description: Generate QR codes for text, URLs, and other data.
Technologies: HTML5, CSS3, JavaScript, QR Code Library
Features:
- Text to QR conversion
- Downloadable QR codes
- Size customization
- Error correction levels
Screenshot:
Description: Interactive quiz application with scoring system.
Technologies: HTML5, CSS3, JavaScript
Features:
- Multiple choice questions
- Score tracking
- Timer functionality
- Results summary
Screenshot:
Description: Display inspirational quotes with author information.
Technologies: HTML5, CSS3, JavaScript, Quotes API
Features:
- Random quote generation
- Author attribution
- Social sharing
- Favorite quotes
Screenshot:
Description: Classic game against computer with score tracking.
Technologies: HTML5, CSS3, JavaScript
Features:
- Player vs Computer
- Score tracking
- Game animations
- Win/loss statistics
Screenshot:
Description: Classic Snake game with score tracking and levels.
Technologies: HTML5, CSS3, JavaScript, Canvas API
Features:
- Arrow key controls
- Score system
- Game over detection
- Responsive gameplay
Screenshot:
Description: Precision stopwatch with lap time recording.
Technologies: HTML5, CSS3, JavaScript
Features:
- Start/stop/reset functions
- Lap time recording
- Millisecond precision
- Clean interface
Screenshot:
Description: Classic Tic Tac Toe game with AI opponent.
Technologies: HTML5, CSS3, JavaScript
Features:
- Player vs Player/Computer
- Win detection
- Game reset
- Score tracking
Screenshot:
Description: Task management app with priority levels and categories.
Technologies: HTML5, CSS3, JavaScript, Local Storage
Features:
- Add/edit/delete tasks
- Priority levels
- Category filters
- Data persistence
Screenshot:
Description: Current weather and forecast display for any location.
Technologies: HTML5, CSS3, JavaScript, Weather API
Features:
- Location search
- Current conditions
- 5-day forecast
- Weather icons
Screenshot:
Description: Convert weight between different units of measurement.
Technologies: HTML5, CSS3, JavaScript
Features:
- Multiple unit support
- Real-time conversion
- Input validation
- Clean interface
Screenshot:
- Web browser (Chrome, Firefox, Safari, Edge)
- Basic understanding of HTML, CSS, and JavaScript
- Clone the repository:
git clone https://github.com/uttam002/Html-css-Javascript-mini-project.git- Navigate to the project directory:
cd Html-css-Javascript-mini-project- Open any project folder and run the
index.htmlfile in your browser.
Html-css-Javascript-mini-project/
├── Age Calculator/
├── Amazon Clone/
├── Background Generator/
├── BMI Calculator/
├── Calculator/
├── Clock/
├── Color Palette Generator/
├── Countdown Timer/
├── Dictionary App/
├── Drum Kit/
├── Expense Tracker/
├── Image Search/
├── Movie App/
├── Music Player/
├── Note App/
├── Password Generator/
├── QR Code Generator/
├── Quiz App/
├── Random Quote Generator/
├── Rock Paper Scissors/
├── Snake Game/
├── Stopwatch/
├── Tic Tac Toe/
├── To Do List/
├── Weather App/
├── Weight Converter/
└── screenshots/
- HTML5: Semantic markup and structure
- CSS3: Styling, animations, and responsive design
- JavaScript: Interactive functionality and DOM manipulation
- APIs: Various external APIs for enhanced functionality
- Local Storage: Data persistence for applicable projects
These projects cover:
- DOM manipulation
- Event handling
- API integration
- Local storage
- Responsive design
- CSS animations
- Form validation
- Game development
- Data visualization
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
Uttam Kumar
- GitHub: @uttam002
- Thanks to all the online resources and tutorials that helped in building these projects
- Special thanks to the open-source community for providing amazing APIs and libraries
⭐ If you found these projects helpful, please give this repository a star!