This repository contains beginner-friendly JavaScript DOM manipulation tasks. Each task is focused on practicing core DOM concepts with clean structure and interactive behavior.
Each task contains:
index.html – HTML Structurestyle.css – Stylingscript.js – JavaScript functionalityREADME.md – Task description, concepts used, what I learned, and flow| No. | Task Name | Live Demo | Code |
|---|---|---|---|
| 01 | Change and Revert Heading | 🔗 Live Demo | 💻 Code |
| 02 | Toggle Button Text | 🔗 Live Demo | 💻 Code |
| 03 | Multiple Heading | 🔗 Live Demo | 💻 Code |
| 04 | innerHTML vs textContent | 🔗 Live Demo | 💻 Code |
| 05 | Change Style on Click | 🔗 Live Demo | 💻 Code |
| 06 | Update Heading | 🔗 Live Demo | 💻 Code |
| 07 | Show / Hide Paragraph | 🔗 Live Demo | 💻 Code |
| 08 | Live Character Counter | 🔗 Live Demo | 💻 Code |
| 09 | Increase Counter on Every Button Click | 🔗 Live Demo | 💻 Code |
| 10 | Add List Items Dynamically | 🔗 Live Demo | 💻 Code |
| 11 | Delete List Items Dynamically | 🔗 Live Demo | 💻 Code |
| 12 | Mark List as Completed | 🔗 Live Demo | 💻 Code |
| 13 | User Info Card | - - - - - - - - - - | 💻 Code |
| 14 | User Mood Based on Age | - - - - - - - - - - | 💻 Code |
| 15 | User Info Summary Card | - - - - - - - - - - | 💻 Code |
| 16 | Click to show info | - - - - - - - - - - | 💻 Code |
| 17 | Personalized Greeting Card | - - - - - - - - - - | 💻 Code |
| 18 | Toggle Dark/Light Mode | 🔗 Live Demo | 💻 Code |
| 19 | Image Slider | 🔗 Live Demo | 💻 Code |
| 19 | Form Validation | 🔗 Live Demo | 💻 Code |
This repository helps in understanding:
All tasks in this repository are fully responsive.
They adapt seamlessly to various screen sizes, ensuring usability on:
Custom @media queries are implemented where necessary to improve the user experience on very small devices.