A comprehensive collection of interactive web applications built with vanilla JavaScript, HTML, and CSS. Each project demonstrates different concepts and functionalities, from basic calculators to complex interactive games and utilities.
This repository contains 21 unique JavaScript projects, each focusing on different aspects of web development including DOM manipulation, event handling, API integration, game logic, UI components, and more. All projects are built using vanilla JavaScript (no frameworks) to demonstrate core web development skills.
A fully functional calculator with a clean, modern interface. Supports basic arithmetic operations (addition, subtraction, multiplication, division) with error handling for edge cases like division by zero.
Features:
- Real-time display updates
- Previous operand display
- Clear (AC) and Delete (DEL) functionality
- Number formatting with locale support
- Responsive design
Files: index.html, script.js, style.css
Calculate Body Mass Index (BMI) based on height and weight inputs. Displays BMI value and corresponding health status category.
Features:
- Input validation for height (cm) and weight (kg)
- BMI calculation with status categorization
- Visual feedback for different BMI ranges
- Educational information about BMI categories
Files: index.html, script.js, style.css
A collapsible content component that allows users to expand and collapse sections. Perfect for FAQs, documentation, or any hierarchical content display.
Features:
- Smooth expand/collapse animations
- Multiple accordion items
- Active state management
- Clean, accessible design
Files: index.html, script.js, style.css
A weather dashboard that fetches and displays current weather information for any city using a weather API.
Features:
- City-based weather search
- Real-time weather data fetching
- Weather information display (temperature, conditions, etc.)
- Error handling for invalid cities
Files: index.html, script.js, style.css
A task management application that allows users to add, edit, and delete tasks with an intuitive user interface.
Features:
- Add new tasks
- Edit existing tasks
- Delete tasks
- Form validation and error handling
- Clean, user-friendly interface
Files: index.html, script.js, style.css
A classic two-player Tic Tac Toe game with turn-based gameplay and win detection.
Features:
- Two-player gameplay (X and O)
- Turn indicator
- Win condition detection
- Draw detection
- Restart game functionality
- Visual feedback for game state
Files: index.html, script.js, style.css
An interactive color generator that creates unlimited random background colors with smooth transitions.
Features:
- Random color generation
- Smooth color transitions
- Real-time color display
- Hex color code display
Files: index.html, script.js, style.css
A tabbed interface component that switches content when tabs are clicked, with visual indication for the active tab.
Features:
- Multiple tabs (Tab 1, Tab 2, Tab 3)
- Active tab highlighting
- Content switching
- Default active tab on page load
- Scalable architecture for adding more tabs
Files: index.html, script.js, style.css
A password strength checker that validates password requirements and displays real-time strength feedback.
Features:
- Real-time password validation
- Strength meter with visual indicator
- Requirement checklist:
- At least 8 characters
- Uppercase letter
- Lowercase letter
- Number
- Special character
- Color-coded strength levels (Very Weak to Very Strong)
Files: index.html (includes inline styles and script)
An interactive star rating component that allows users to select and display ratings.
Features:
- Clickable star ratings (1-5 stars)
- Visual feedback on hover
- Current rating display
- Smooth interactions
Files: index.html, script.js, style.css
A classic Rock Paper Scissors game where players compete against the computer with score tracking.
Features:
- Player vs Computer gameplay
- Visual choice representation with emoji images
- Score tracking for both player and computer
- Result display after each round
- Reset game functionality
Files: index.html, script.js, style.css, images/ (rock, paper, scissors emojis)
A pagination component that fetches products from an API and displays them with page navigation controls.
Features:
- Fetches products from DummyJSON API
- 10 products per page
- Previous/Next navigation
- Page number buttons
- Edge case handling (first/last page)
- Dynamic UI updates
Files: index.html, app.js, style.css
An interactive number guessing game where players try to guess a randomly generated number between 1 and 100.
Features:
- Random number generation (1-100)
- Guess input with validation
- Feedback messages (too high, too low, correct)
- Previous guesses tracking
- Attempt counter
- New game functionality
Files: index.html, script.js, style.css
An event keycode display tool that shows keyboard event information when keys are pressed.
Features:
- Real-time key event detection
- Displays key information:
- Key code
- Key name
- Event details
- Interactive demonstration of keyboard events
Files: index.html, script.js, style.css
A classic CSS layout pattern implementation featuring header, footer, and three-column layout.
Features:
- Header with dark background
- Footer with dark background
- Three-column layout:
- Left sidebar (light pink background)
- Main content (light gray background)
- Right sidebar (light blue background)
- Responsive design principles
Files: index.html, style.css
A full-screen modal component with fade-in/fade-out animations and smooth transitions.
Features:
- Full-screen modal overlay
- Fade-in/fade-out animations
- Open/Close functionality
- Smooth transitions
- Backdrop click handling (if implemented)
Files: index.html, script.js, style.css
A real-time digital clock that displays the current local time with automatic updates.
Features:
- Real-time time display
- Automatic updates every second
- Local time formatting
- Clean, modern design
- Banner text display
Files: index.html, script.js, style.css
A currency conversion tool that converts amounts between different currencies using real-time exchange rates.
Features:
- Multiple currency support
- Real-time exchange rate fetching
- Bidirectional conversion
- Amount input validation
- Error handling and display
- Result display with formatting
Files: index.html, main.js, style.css
A dynamic box generator that creates clickable boxes with configurable colors and widths.
Features:
- Dynamic box generation
- Color picker for box color
- Width input (percentage-based)
- Clickable boxes with color alerts
- Scalable and clean code structure
Files: index.html, script.js, style.css
An automatic background color changer with start, stop, and manual change controls.
Features:
- Automatic color changing
- Start/Stop controls
- Manual color change button
- Current color code display
- Smooth color transitions
Files: index.html, script.js, style.css
A fully functional e-commerce shopping application with product catalog, shopping cart, and cart management features. Built with modular JavaScript architecture separating data, state, UI, and application logic.
Features:
- Product catalog display with grid layout
- Add products to cart functionality
- Shopping cart sidebar with slide-in animation
- Quantity tracking for cart items
- Remove items from cart
- Real-time cart total calculation
- Cart item count badge in header
- Responsive design (mobile-friendly cart)
- Modular code architecture:
data.js- Product data managementstate.js- Cart state and operationsui.js- Rendering functionsapp.js- Event handling and app initialization
Files: index.html, styles.css, js/data.js, js/state.js, js/ui.js, js/app.js
All projects are built using:
- HTML5 - Structure and markup
- CSS3 - Styling and layout
- Vanilla JavaScript (ES6+) - Functionality and interactivity
- APIs (where applicable):
- Weather API (Weather App)
- DummyJSON API (Pagination)
- Currency Exchange API (Currency Converter)
JS_PROJECTS/
│
├── Calculator/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── BMI-Calculator/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── Accordion/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── WeatherApp/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── Todo-List/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── TicTacToe/
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── images/
│ ├── rock-emoji.png
│ ├── paper-emoji.png
│ └── scissors-emoji.png
│
├── Unlimited-Colour/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── Tabs/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── StrongPassword/
│ └── index.html
│
├── StarRating/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── RockPaperScissors/
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── images/
│ ├── rock-emoji.png
│ ├── paper-emoji.png
│ └── scissors-emoji.png
│
├── Pagination/
│ ├── index.html
│ ├── app.js
│ └── style.css
│
├── NumberGuess/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── KeyBoard/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── HolyGrailLayout/
│ ├── index.html
│ └── style.css
│
├── Full-Modal/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── DigitalClock/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── CurrencyConverter/
│ ├── index.html
│ ├── main.js
│ └── style.css
│
├── ConfigurableColorBoxes/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── ColorChanger/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── E-Commerce/
│ ├── index.html
│ ├── styles.css
│ └── js/
│ ├── data.js
│ ├── state.js
│ ├── ui.js
│ └── app.js
│
└── README.md
- A modern web browser (Chrome, Firefox, Safari, Edge)
- A code editor (VS Code, Sublime Text, etc.) - optional
- A local web server (for projects using APIs) - optional but recommended
-
Clone or download this repository
git clone <repository-url> cd JS_PROJECTS
-
Navigate to any project folder
cd Calculator -
Open the project
- Option 1: Simply open
index.htmlin your web browser - Option 2: Use a local server (recommended for API-based projects):
# Using Python python -m http.server 8000 # Using Node.js (http-server) npx http-server # Using VS Code Live Server extension # Right-click on index.html → Open with Live Server
- Option 1: Simply open
-
Access the project
- If opened directly:
file:///path/to/project/index.html - If using a server:
http://localhost:8000
- If opened directly:
- API-based projects (Weather App, Currency Converter, Pagination) require an active internet connection
- Some projects may require API keys - check individual project files for configuration
- All projects are standalone and can be run independently
- Calculator
- BMI Calculator
- Currency Converter
- Tic Tac Toe
- Rock Paper Scissors
- Number Guess
- Accordion
- Tabs
- Full Modal
- Star Rating
- Pagination
- Todo List
- Strong Password
- Keyboard Event Display
- Digital Clock
- Unlimited Colour
- Color Changer
- Configurable Color Boxes
- Holy Grail Layout
- Weather App
- Currency Converter
- Pagination
- E-Commerce
These projects demonstrate:
- DOM Manipulation - Selecting, creating, and modifying HTML elements
- Event Handling - Click, input, keyboard, and custom events
- API Integration - Fetching and displaying data from external APIs
- State Management - Managing application state without frameworks
- Form Validation - Input validation and error handling
- CSS Animations - Transitions and animations
- Responsive Design - Mobile-friendly layouts
- Game Logic - Implementing game mechanics and win conditions
- Component Architecture - Building reusable UI components
- Modular Architecture - Separating concerns with multiple JavaScript modules
- E-Commerce Logic - Shopping cart management and product catalog systems
This collection is open source and available for educational purposes.