A beginner-friendly Task Manager application built using HTML, CSS, and JavaScript for cohort 3.0.
- Add Tasks
- Edit Tasks
- Delete Tasks
- Complete Tasks
- Dark / Light Theme Toggle
- Local Storage Persistence
- Event Delegation
- Event Bubbling & Capturing Demo
- Browser Rendering Pipeline Visualization
A working demonstration of the project is available in the screenrecording folder.
Parsing is the process where the browser reads HTML and CSS code and converts them into structures that it can understand.
Example:
<h1>Hello World</h1>The browser parses this HTML before displaying.
Tokenization breaks source code into units called tokens.
<h1>Hello</h1>Tokens: - Opening tag <h1> - Text: Hello - Closing tag: <h1>
These tokens are used to build the DOM Tree.
Example:
<body>
<h1>Hello</h1>
</body>DOM tree:
Body
└── H1
└── HelloJavascript doesn't changes directly in HTML is uses DOM to manipulate HTML.
CSSOM (CSS Object Model) is created from CSS rules.
Example:
h1 { color: blue; }The browser converts CSS into a CSSOM Tree.
The browser combines:
- DOM Tree
- CSSOM Tree
to create the Render Tree.
The Render Tree contains Only visible elements that needs to be displayed on the screen.
Event Propagation describes how events travel through the DOM.
Event starts from the target element and moves upward to its ancestors.
Example order:
Child
Parent
GrandparentBubbling is the default behavior of JavaScript events.
Event starts from the root element and moves downward to the target element.
Example order:
Grandparent
Parent
ChildCapturing is enabled using:
element.addEventListener("click", handler, true);
Event Delegation allows handling events on multiple child elements using a single event listener attached to parent element.
Example:
tasksList.addEventListener('click', (e) => {
if(e.target.classList.contains('delete-btn')) {
console.log('Deleted!')
}
})- Better Performance
- Less Memory Usage
- Works for dynamically added element
- HTML5
- CSS3
- JavaScript (DOM Manipulation)
- Local Storage