🛫 Simple-Web-Projects

A collection of small yet beautiful frontend web projects built using HTML, CSS, and JavaScript.
Each project is self-contained and focuses on clean UI, interactivity, and simple logic — perfect for beginners and intermediate learners!

---

📁 Project Structure

Simple-Web-Projects/
│
├── Air-India/
│   │── index.html
│   │
│   ├── css/
│   │   └── style.css
│   │
│   ├── js/
│   │   └── jquery.js
│   │
│   ├── img/
│   │   ├── Logo.svg
│   │   └── indiabg.webp
│   │
│   └── README.md
│
├── Tic-Tac-Toe Game/
│   │── index.html        # Main game page
│   │── style.css         # Styling for the game board
│   │── script.js         # Game logic
│   └── README.md         # Documentation
│
├── Stopwatch/
│   │── index.html        # Stopwatch interface
│   │── style.css         # Stopwatch styling
│   │── script.js         # Stopwatch functionality
│   └── README.md         # Documentation
│
├── Login-Form/
│   │── index.html        # Main login form structure
│   │── style.css         # Styling for the login form
│   └── README.md         # Project documentation
│
├── OTP-Generator/
│   │── index.html        # Main HTML file (UI + button)
│   │── style.css         # Styling file (button + layout)
│   │── script.js         # JavaScript logic (OTP generation)
│   └── README.md         # Project documentation file
│
├── Password-Generator/
│   │── index.html        # Main UI
│   │── style.css         # Styling & Layout
│   │── script.js         # Password generation logic
│   └── README.md         # Project documentation file
│
├── Simple-Sidebar/
│   │── index.html        # Main HTML structure
│   │── style.css         # Sidebar styling and transitions
│   └── README.md         # Project documentation file
│
├── Animated-Sidebar/
│   │── index.html        # Main layout of the sidebar menu  
│   │── style.css         # Styling & hover animation  
│   └── README.md         # Project documentation
│
├── LuminCalci/
│   │── index.html        # Main calculator page
│   │── style.css         # Complete UI and theme styling
│   │── script.js         # Core calculator logic + theme/history handling
│   └── README.md         # Project documentation
│
├── Registration-Form/
│   │── index.html        # Main HTML file
│   │── style.css         # All styling
│   │── script.js         # Email & phone validation logic
│   └── README.md         # Project documentation
│
├── Snake/
│   │── index.html        # Main HTML file
│   │
│   ├── css/
│   │   └── style.css     # Game styling
│   │
│   ├── js/
│   │   └── index.js      # Game logic
│   │
│   ├── music/            # Optional sound effects
│   │   ├── food.mp3
│   │   ├── gameover.mp3
│   │   ├── move.mp3
│   │   └── music.mp3
│   │
│   └── README.md         # Project documentation
│
└── README.md             # Main repository documentation

---

🧩 Projects Included

✈️ 1. Air India Website Clone

A simple Air India landing page clone that captures the airline’s branding and modern design.

🔹 Features

• Elegant responsive layout
• Custom background with Air India branding
• Interactive elements using jQuery
• Optimized image assets (SVG + WebP)

🧱 Tech Stack

• HTML5
• CSS3
• JavaScript (jQuery)

🖼️ Folder Details

Folder	Description
css/	Stylesheet for UI design
js/	jQuery script for animations or DOM handling
img/	Logo and background assets

---

🎮 2. Tic-Tac-Toe Game

A fully functional two-player Tic Tac Toe game built using vanilla HTML, CSS, and JS.

🔹 Features

• Player-vs-Player gameplay (X & O)
• Win detection system
• Restart button to replay instantly
• Highlighted winning tiles
• Simple, attractive UI with smooth gameplay

🧱 Tech Stack

• HTML5
• CSS3
• JavaScript (ES6)

💻 How to Run

1. Open the folder Tic-Tac-Toe Game/
2. Run index.html in any modern browser
3. Start playing and have fun 🎉

---

⏱️ 3. Stopwatch

A simple yet elegant Stopwatch web application built using HTML, CSS, and JavaScript.
It allows users to start, stop, and reset time tracking easily.

🔹 Features

• Start, Stop, and Reset buttons
• Accurate hour-minute-second tracking
• Beautiful circular design
• Fully responsive layout

🧱 Tech Stack

• HTML5
• CSS3
• JavaScript (ES6)

💻 How to Run

1. Navigate to the Stopwatch/ folder
2. Open index.html in any web browser
3. Start the timer and track time efficiently ⏰

---

🔐 4. Login Form

A modern Login Form UI designed with glassmorphism effect, smooth borders, and minimal style.
Perfect for learning modern CSS effects and form design.

🔹 Features

• Transparent glassy background
• Stylish username & password inputs
• Remember Me & Forgot Password options
• Smooth transitions and hover animations
• Fully responsive layout

🧱 Tech Stack

• HTML5
• CSS3 (with blur effect)

💻 How to Run

1. Open the folder Login-Form/
2. Open index.html in your browser
3. Experience the modern glassmorphism login interface 💎

---

🔢 5.OTP Generator

A lightweight OTP (One-Time Password) generator built using HTML, CSS, and JavaScript. It instantly generates a random 4-digit OTP upon button click, perfect for practicing random number generation and UI events.

🔹 Features

• Generates a 4-digit random OTP
• Minimal, clean, and responsive design
• Runs completely offline
• Works in all browsers
• Simple alert-based OTP display

🧱 Tech Stack

• HTML5
• CSS3
• JavaScript (ES6)

💻 How to Run

1. Open the folder OTP-Generator/
2. Run index.html in any modern browser
3. Click the "Click For OTP" button
4. Get your unique 4-digit OTP instantly 💥

---

🔑 6. Password Generator

A secure and responsive Password Generator app made with HTML, CSS, and JavaScript, capable of generating strong random passwords with a single click.

🔹 Features

• Generates secure random passwords
• Adjustable password length
• Copy-to-clipboard functionality
• Simple, elegant, and responsive UI
• Works offline

🧱 Tech Stack

• HTML5
• CSS3
• JavaScript (ES6)

💻 How to Run

1. Open the folder Password-Generator/
2. Run index.html in any modern browser
3. Generate a new password instantly 🔒

---

📚 7. Simple Sidebar

A clean and minimal Sidebar Navigation built using only HTML and CSS — without any JavaScript. Perfect for beginners to understand how <details> and <summary> tags can create interactive toggle menus natively.

🔹 Features

• Pure HTML & CSS (no JS required)
• Toggle open/close sidebar with animation
• Smooth transition effects
• Lightweight and responsive layout
• Minimalist design for easy integration into any project

🧱 Tech Stack

• HTML5
• CSS3

💻 How to Run

1. Open the folder Simple-Sidebar/
2. Run index.html in any modern browser
3. Click the hamburger icon (☰) to expand/collapse the sidebar

---

🌈 8. Animated Sidebar

A sleek, modern Animated Sidebar Menu built using HTML, CSS, and Boxicons. It smoothly expands on hover, revealing navigation labels with a soft transition effect.

🔹 Features

• Smooth hover animation
• Clean and responsive design
• Icon-based navigation using Boxicons
• Lightweight and easy to customize

🧱 Tech Stack

• HTML5
• CSS3
• Boxicons

💻 How to Run

1. Open the folder Animated-Sidebar/
2. Run index.html in any modern browser
3. Hover over the sidebar to view the animation 🎨

---

🧮 9. LuminCalci

A stylish and functional Web Calculator named LuminCalci, built to perform basic arithmetic with a smooth interface, dual themes, and calculation history.

🔹 Features

• Perform addition, subtraction, multiplication, and division
• Switch between Light & Dark mode
• Display calculation history log
• Responsive UI for all screen sizes
• Smooth animations and clean modern theme

🧱 Tech Stack

• HTML5
• CSS3
• JavaScript (ES6)

💻 How to Run

1. Open the folder LuminCalci/
2. Run index.html in any modern browser
3. Start calculating with style ✨

---

🧾 10. Registration Form

A stylish and responsive Registration Form project made using HTML, CSS, and JavaScript, designed for validating user inputs like email and phone number in real-time.

🔹 Features

• Email & phone number validation using JavaScript
• Clean and user-friendly layout
• Fully responsive form
• Input error highlighting
• Modern UI with smooth focus effects

🧱 Tech Stack

• HTML5
• CSS3
• JavaScript (ES6)

💻 How to Run

1. Open the folder Registration-Form/
2. Run index.html in any modern browser
3. Try entering your details — it validates instantly ✅

---

🐍 11. Snake Game

A classic Snake Game recreated using HTML, CSS, and JavaScript — featuring smooth movement, food consumption, scoring, and sound effects. Perfect mini-project to understand keyboard events, game loops, and collision logic.

🔹 Features

• Smooth snake movement using arrow keys
• Food generation with scoring system
• Game-over detection
• Sound effects: move, food, background music & game-over
• Simple grid-based gameplay
• Fully responsive and lightweight

🧱 Tech Stack

• HTML5
• CSS3
• JavaScript (ES6)

🖼️ Folder Details

Folder/File	Description
css/style.css	Game board styling, grid layout, and snake/food visuals
js/index.js	Complete game logic (snake movement, food spawn, collisions, scoring)
music/	Sound effects for food, movement, background music, and game over
index.html	Main game interface

💻 How to Run

1. Open the folder Snake/
2. Run index.html in any modern browser
3. Use Arrow Keys to move the snake
4. Eat food, grow longer, and try not to collide! 🎯

---

⚙️ Requirements

No external dependencies needed — everything runs directly in the browser.

• Recommended Browser: Chrome, Edge, or Firefox
• Internet not required (fully offline projects)

---

🌟 Future Enhancements

• Add AI-based single-player mode to Tic Tac Toe
• Add animation effects to Air India’s homepage
• Improve responsiveness for mobile screens
• Add Dark/Light mode & Lap Timer feature to Stopwatch
• Integrate JavaScript authentication logic to Login Form
• Add OTP expiration timer, copy-to-clipboard, and toast notification features to OTP Generator
• Simple Sidebar by adding responsive slide-in/out animations, dark mode, multi-level menu support, and active link highlighting.
• Add customizable character sets and strength meter to Password Generator
• Add icon animation and menu click sound to Animated Sidebar
• LuminCalci with scientific functions, keyboard support, and local storage for history
• Add password strength meter, confirm password toggle and local storage support for user progress.
• Add speed levels, obstacle support, and local storage high-score tracking to the Snake game.

---

🧑‍💻 Author

Developer: ShakalBhau0001

GitHub: ShakalBhau0001

---