Building My First To-Do List App with JavaScript
I built a simple To-Do List App where you can add tasks, mark them as done, and delete them. But there was a catch—everything disappeared on refresh! 😅
How It Works
✅ Add a task through a form
✅ Mark tasks as completed with a checkbox
✅ Delete tasks with a button
I used HTML, CSS, and JavaScript to bring it to life.
Biggest Challenges & Fixes
❌ Form refreshing on submit → Solved with event.preventDefault()
❌ Incorrect checkbox handling → Switched from click to change event
❌ Struggled with setAttribute('onclick') → Used addEventListener instead
Each bug taught me something new! 🚀
What’s Next?
I plan to store tasks in localStorage so they don’t disappear on refresh.
I plan to improve it's responsiveness so it can accommodate more tasks.
Check out the User-Interface and code and let me know what you think! What would you improve?💭
💻 Deployed the app on Vercel! Try it out here 👉 https://to-do-list-coral-three-64.vercel.app/
📂 Code is open-source—check out the repo on GitHub: https://github.com/cvictorugs/mini-projects/tree/main/to-do-list
📝 Wrote a full breakdown of the process on Medium: https://medium.com/@cvictorugs/building-my-first-to-do-list-app-with-html-css-and-javascript-b008dd8f84ec
What would you improve in this app? I’d love to see it! 🚀 Drop your link in the comments or tag me on Twitter: https://twitter.com/cvictorugsDEV LinkedIn : https://www.linkedin.com/in/chibuikem-victor-ugwu-b9710a344?trk=contact-info
Top comments (0)