This is a simple and interactive color theme switcher web application made using HTML, CSS, and JavaScript. It allows users to dynamically change the background color of the page with just a click.
- 🎨 Multiple color options (Peach, Grey, Black, Transparent, Red)
- 💡 One-click background switching
- 🟢 Live preview of selected color
- 🌐 GitHub redirect button on top right
- When a button is clicked, JavaScript changes the background color of the page to the respective value.
- The GitHub button links to the project repository (or profile).
- HTML5 – Structure of the webpage
- CSS3 – Styles for buttons and layout
- JavaScript – Logic to handle color switching
A simple and clean BMI (Body Mass Index) Calculator built using HTML, CSS, and JavaScript. This app calculates your BMI based on your height and weight and shows the health category in a visually styled result box.
- ✅ Real-time BMI calculation
- 🎨 Gradient background and smooth animations
- 🧼 Reset button to clear inputs and result
- 📱 Fully responsive design for mobile & desktop
- 📊 Categorizes BMI as Underweight, Normal, or Overweight
- HTML5 – structure
- CSS3 – styling
- JavaScript (Vanilla) – logic and interactivity
BMI = Weight (kg) / (Height (m))²
Example: If your weight is 70kg and height is 170cm,
BMI = 70 / (1.7 × 1.7) ≈ 24.22
| Category | BMI Range |
|---|---|
| Underweight | Less than 18.6 |
| Normal | 18.6 - 24.9 |
| Overweight | Greater than 24.9 |
A minimalist and responsive Digital Clock built using HTML, CSS, and JavaScript. It displays your current local time in 12-hour format and updates every second. The design features a clean, modern interface with a glowing time display.
- 🕰️ Real-time local clock with live seconds
- 🌗 AM/PM 12-hour format display
- 🎨 Glowing time bubble styled with CSS
- ⚡ Lightweight and super fast
- 📱 Fully responsive for all devices
- Uses JavaScript's
Date()object to fetch the current time. - Converts time into 12-hour format with AM/PM.
- Updates the DOM every second using
setInterval().
- HTML5 – Markup structure
- CSS3 – Styling and glowing effect
- JavaScript – Clock logic and real-time update
A fun and interactive "Guess the Number" game built using HTML, CSS, and JavaScript. The user has 10 chances to guess a random number between 1 and 100. It features a clean glassmorphism UI and gives feedback on each guess!
- 🔢 Random number generation between 1 and 100
- 💬 Instant feedback: Too High / Too Low / Correct
- ✅ Tracks previous guesses and remaining attempts
- 🎨 Beautiful glassmorphism UI with responsive design
- 🔄 Automatic prompt to restart game after win or loss
- User enters a number between 1 and 100.
- App checks if it's correct, too high, or too low.
- Game ends if the number is guessed or after 10 attempts.
- Option to restart the game automatically appears.
- HTML5 – Markup structure
- CSS3 – Styles using modern glass UI
- JavaScript (Vanilla) – Game logic and interactivity
A modern and stylish Weather App built using HTML, CSS, and JavaScript.
It allows users to search for any city and view its current temperature and weather conditions in real time using the OpenWeather API.
The app features a glassmorphism UI over a scenic background image for a clean, elegant look.
- 🔍 Search for real-time weather by city name
- 🌡️ Displays temperature (°C) and weather description
- 🚫 Shows error message for invalid city names
- 🎨 Glassmorphism design with rounded corners and blur effect
- 📱 Fully responsive design
- Enter the city name in the input box.
- Click Get weather to fetch live data from the OpenWeather API.
- Displays:
- City name
- Temperature in °C
- Weather condition
- If city not found, an error message is shown.
- HTML5 – Structure
- CSS3 – Styling with glassmorphism and background
- JavaScript (ES6) – Fetch API for data retrieval
- OpenWeather API – Real-time data source
This project is open-source and available under the MIT License.