Ship #1

I built an interactive, high-contrast To-Do List manager completely from scratch using basic HTML, CSS, and JavaScript. The look was heavily inspired by a cool design I found on Pinterest, and I spent over 18 hours getting every single detail right!

The hardest part was making sure the dynamic task rows lined up perfectly with the headers on different screens, which I fixed by using a clean CSS Grid layout. I also customized the boring standard radio buttons by replacing them with my own animated dots. To make the app feel alive, I added a fun effect where the delete button physically moves down when you click it. Everything saves automatically so your tasks won't disappear when you refresh the page.

I’m super proud of figuring out how to handle the data tracking and click events on my own and the main part was the localStorage , didnt even knew it existed beofre, and it was such a fun to build. To test it out, try adding a task, choosing a priority, and hitting Enter—then click the radio buttons to cross a task off your list!

2 devlogs
19h

Try project → See source code →

Open comments for this post

@PAPER_01 on To-Do-List · 1 day ago

3h 40m 19s logged

Interactive To-Do List with Priority Tracking

Time Logged: 18+ Hours (Hackatime)
Tech Stack: HTML5, CSS3, Vanilla JavaScript
Live Demo: sudip-project-04.netlify.app
Code: github.com/sudipstha-01/To_Do_List

I built this To-Do List application completely from scratch to improve my JavaScript skills and create something I could actually use. The app lets users add tasks, assign priorities, mark tasks as ongoing or completed, delete tasks, and save everything using Local Storage so tasks remain even after refreshing the page.

This project ended up teaching me far more than I expected. Before starting, I only had a basic understanding of DOM manipulation. While building the app, I learned how to work with Local Storage, JSON parsing/stringifying, event listeners, event delegation, template literals, CSS Grid, and dynamic rendering.

One of the biggest challenges was managing task status with radio buttons. Each task needed its own independent status controls, and figuring out the logic took several attempts before I found a clean solution. I also spent a lot of time debugging issues related to updating and re-rendering tasks, which helped me understand how data and UI stay in sync.

The most rewarding part wasn’t finishing the project—it was seeing how much I improved throughout the process. Every feature introduced a new concept, every bug taught me something, and by the end I felt significantly more confident working with JavaScript.

This was one of the most fun and educational projects I’ve built so far.

Open comments for this post

@PAPER_01 on To-Do-List · 3 days ago

14h 51m 53s logged

I am working on a to do list.
After changing the design again and again , i finally decided to work on a black and white theme. I took the project inspiration from Pintrest . I know that its a simple project but i couldnt just figure out how the formating and stuff (I m a beginner), asked gemini for help again and again with css formating and js . Tried to make the code bugfree and maybe look somewhat professional looking by adding some professional looking variable names, stole the names from gemini though(lol) . Also one of the main factor that took time was leanring grid and shifting the layout of my site from flexbox to grid. [Still improving]