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:
- DOM selection and manipulation
- Event handling
- Conditional rendering
- Styling and interaction using JavaScript
All tasks in this repository are fully responsive.
They adapt seamlessly to various screen sizes, ensuring usability on:
- Mobile devices (small screens)
- Tablets
- Desktops
Custom @media queries are implemented where necessary to improve the user experience on very small devices.