Day 95 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 95 of my 100-day engineering sprint! 🎯 We are single-digit days away from the absolute grand finish. Continuing my deep-dive into core fundamentals, today I tackled the definitive benchmark of frontend mastery: Building a highly dynamic To-Do App completely with Pure Vanilla JavaScript and Native DOM Manipulation! 💻⚡

When working with modern frameworks like React, UI updates happen automatically via state bindings. But knowing exactly how the browser handles nodes under the hood is what separates a framework user from a true core engineer.

🧠 Deconstructing the Day 95 Vanilla Architecture

As visualized in my localized browser runtime environment inside "Screenshot (213).jpg", I engineered a full interactive lifecycle using zero external libraries:

1. Dynamic Node Generation (createElement)

• Instead of inserting insecure raw string innerHTML blocks, I utilized safe programmatic element creation:

javascript
const listItem = document.createElement('div');
const trashIcon = document.createElement('span');