A collection of vanilla web projects built with HTML, CSS, and JavaScript — no frameworks, no libraries, just the fundamentals.
An all-in-one HTML file showcasing what vanilla JavaScript can do. Every feature is self-contained and interactive.
Demos included:
| Feature | Description |
|---|---|
| 💡 Light Controls | Toggle a light bulb on/off with dynamic hover glow effects |
| ✏️ Text Controls | Modify a paragraph's size, visibility, and content |
| 🎂 Age Checker | Validates if an entered age meets the 18+ threshold |
| 🕐 Time Display | Shows/hides the current time in 12-hour AM/PM format |
| 🔢 Counter | Increment, decrement, and reset a number (goes negative) |
| ⌨️ Character Counter | Live character count as you type |
| 🧮 Calculator | Prompt-based calculator for basic arithmetic |
| 🖼️ Image Slider | Cat image carousel with Previous/Next, position indicators, and boundary messages |
| 💬 Quote Generator | Random quote from a hardcoded set, styled with decorative fonts |
| 🎨 Color Changer | Sets a div's background to any valid color name or hex code |
| 🌡️ Temperature Converter | Two-way conversion between Fahrenheit and Celsius |
| 🔑 Password Validator | Live rule checks: 8+ chars, 1+ number, 1+ uppercase |
| 📅 Birth Year Calculator | Calculates age from a birth year with full input validation |
| 📐 Window Info | Displays the browser's inner width and height |
| 📋 Copy Code | Copies the entire page's HTML source to clipboard |
| ✅ To-Do List | Add and remove tasks dynamically |
| 🖨️ Print Button | Opens the browser print dialog |
| 💥 Crash Button | Confirms then freezes the tab with an infinite loop (educational) |
A static resource page built for a friend. Organized into categories with curated external links.
Sections:
- Robux methods
- Money methods
- Free WiFi configs (Egypt only)
- Game accounts (Xbox, Minecraft, Steam)
- HTML5 — Semantic structure, forms, inputs
- CSS3 — Flexbox, transitions, media queries, custom hover effects
- Vanilla JavaScript — DOM API, Clipboard API, Browser APIs, event handling, state management
- Google Fonts — Poppins, Monsieur La Doulaise, Cormorant Garamond
- Material Symbols — Google icon font
No build step required. Just open any .html file directly in your browser:
git clone https://github.com/your-username/web-projects.git
cd web-projects/js-practice
open index.htmlOr drag the file into any browser window.
- All projects use zero external dependencies (except Google Fonts/Icons via CDN).
- The
js-practicedashboard is intentionally kept as a single file for simplicity and portability. - The crash button is included for educational purposes — it demonstrates how blocking operations affect the browser event loop.
Built for learning. Everything here is practice.