🚀 Day 5 of My MERN Stack Journey – Building a Real Task Dashboard with JavaScript
Today was a turning point in my learning journey.
Until now, I was learning JavaScript concepts step by step. But on Day 5, I started applying those concepts to build something that actually feels like a real application.
🎯 What I Focused On Today
I dived deeper into DOM (Document Object Model) and learned how JavaScript can directly control what users see and interact with on a webpage.
Here’s what I practiced:
Selecting elements using
document.querySelector()Changing content with
.innerTextand.innerHTMLStyling elements dynamically using
.styleCreating new elements with
document.createElement()Adding elements to the page using
appendChild()Handling user actions with
addEventListener()
🛠️ Mini Project: Task Dashboard
To apply everything I learned, I built a Task Dashboard (To-Do App).
✨ Features I Implemented:
Add new tasks
Delete individual tasks
Mark tasks as completed (line-through effect)
Clear all tasks with a single click
Dynamic UI updates using JavaScript
Input validation (prevent empty tasks)
💡 Key Learnings
1. JavaScript Makes Web Pages Alive
Before this, HTML felt static. Now I understand how JavaScript can:
Update content instantly
Respond to user actions
Create elements dynamically
2. DOM Manipulation is Powerful
Using methods like:
document.createElement()
element.appendChild()
I was able to build and modify UI elements in real-time.
3. Events = Interactivity
With addEventListener(), I made my app respond to:
Button clicks
Task interactions
This is what makes a web app interactive instead of static.
4. Small Details Matter
While building, I improved my app by:
Preventing empty inputs using
.trim()Adding confirmation before clearing all tasks
Separating styling using CSS instead of JavaScript
These small improvements made a big difference in user experience.
⚠️ Challenges I Faced
Understanding how events work with dynamically created elements
Handling multiple interactions (click vs delete button)
Structuring the code cleanly
But solving these issues helped me understand the DOM much better.
🚀 What’s Next?
Tomorrow, I plan to level up this project by:
Using arrays to manage tasks
Saving tasks using LocalStorage (so data doesn’t disappear on refresh)
📌 Final Thoughts
This project may look simple, but for me, it represents a big shift:
👉 From learning syntax → to building real UI behavior
Every small project like this is helping me move closer to becoming a full-stack developer.
If you're also learning JavaScript, I highly recommend building small projects like this. That’s where real understanding happens.
💬 I’d love feedback from the community! What should I improve or build next?
#JavaScript #WebDevelopment #MERN #LearningInPublic #100DaysOfCode
