Advanced DOM & JavaScript Assignment

🎯 Learning Objectives

By completing this assignment, you will demonstrate your ability to:

Handle form submissions and real-time validation using vanilla DOM

Implement event delegation for dynamic elements

Use localStorage for persistence across refreshes

Apply debouncing for performance optimization

Build interactive web apps using DOM manipulation

Understand challenges of vanilla JavaScript development

📂 Project Structure

advanced-dom-javascript-assignment/

├── contact-form/

│ ├── index.html

│ ├── style.css

│ └── script.js

├── todo-app/

│ ├── index.html

│ ├── style.css

│ └── script.js

└── README.md

📝 Assignment Tasks

✅ Question 1: Smart Contact Form

Features:

Real-time + debounced validation (300ms delay)

Form submission without page reload

Success + error messages

Message history stored in localStorage

Event delegation for delete buttons

Empty state handling (“No messages yet”)

✅ Question 2: Dynamic Todo List with Search

Features:

Add, delete, and toggle todos

Mark todos as complete/incomplete

Todo counter (total & completed)

localStorage persistence

Debounced search (400ms) with filters: All | Active | Completed

No results / empty state messages

⚙️ Technical Requirements

addEventListener for all DOM interactions

Debouncing for validation & search

Event delegation for delete/toggle actions

Todos & messages stored as JSON in localStorage

Graceful error handling

🚀 Setup & Run

Clone repository:

git clone https://github.com/\ksrtikbhardwaj2003/advanced-dom-javascript-assignment

cd advanced-dom-javascript-assignment

Open in browser:

contact-form/index.html → Smart Contact Form

todo-app/index.html → Dynamic Todo App

"# kartikbhardwaj2003-advanced-dom-javascript-assignment"