A simple web application built using HTML, CSS, and pure JavaScript. It helps you manage tasks while demonstrating how the browser renders elements and handles user events.

When you open a website, the browser follows these simple steps to show the page on your screen:

• Tokenization: The browser reads the raw HTML text file and breaks it down into small code tags (tokens like <p>, <div>, etc.).
• Parsing: The browser takes these small tags and organizes them to understand the structure of the document.
• DOM Tree: The browser builds a complete family tree of your HTML tags in its memory (Document Object Model).
• CSSOM Tree: At the same time, the browser reads your CSS styles and makes a tree of rules for colors, sizes, and fonts.
• Render Tree: Finally, the browser combines the HTML tree and the CSS tree together. It skips hidden elements (like display: none) and paints the final look on your screen.

When a user clicks on an element inside another element, the browser detects it in three phases:

• Event Capturing: The click signal travels from the very top (the webpage container) down into the deepest target child element.
• Event Bubbling: Once the child is clicked, the action signal automatically bubbles back up from the child to its parents, like a bubble rising in water.
• Event Delegation (Best Practice): Instead of putting a click listener on every single button, we put one single click listener on the parent box. The parent catches the click signals from its children, making the app faster and memory efficient.

They look similar but represent two different versions of your data:

• HTML Attribute: This is the original configuration value that you write directly inside your HTML code (e.g., <input value="hello">). It never changes automatically.
• DOM Property: This is the live, current value stored in the browser's active memory. If a user types something new into the input box, the property updates instantly, but the original attribute stays the same.

• Task Management: Add, update, complete, and delete your tasks.
• Persistent Storage: Uses localStorage so your tasks remain safe even after refreshing the page.
• Live Counter & Filters: Tracks pending vs completed items and allows searching by category.
• Responsive Theme Toggle: Easily switch between dark and light modes across all device layouts.