to do

Worked on improving the stylesheet and the overall design of the todo app. I restructured the CSS using design tokens and added a lot more CSS variables for things like colors, border radii, shadows, and transitions. I also switched the font to Inter and set a consistent px base to make the typography easier to manage.The UI got a pretty big refresh. I added gradients and some subtle animations like fadeIn and slideUp so the headings and forms appear a bit smoother. The input field, add button, todo items, delete button, and the custom checkbox were all restyled with better hover and active states, shadows, and smoother transitions.I also added a placeholder message and an empty-wrapper state for when there are no todos yet. Accessibility got some improvements too with better focus styles. On top of that, I added custom scrollbar styling and made several layout adjustments for smaller screens with a media query under 500px so the app works better on mobile.

Added a new app.js file that implements the basic functionality of the todo app. It handles the form for adding todos, lets you delete items, mark them as completed with a checkbox, and saves everything using localStorage so the list stays after refreshing the page. I also added the main DOM functions like createTodoItem, updateTodoList, saveTodos, and getTodos to manage rendering and storing the todos.The script is now connected to the project by adding a deferred app.js include in index.html.I also updated style.css with mobile responsive rules using a media query for screens smaller than 500px. This adjusts the font size, changes the add-button layout, and scales the h1 so the app looks better on small screens.

Today I set up the basic skeleton of my todo app. I added index.html and style.css to create the UI and styling. It’s using a dark theme with CSS variables, a responsive wrapper, an input form for adding todos, custom checkboxes, and a layout for the todo items with delete button hover effects. I also put in some example todos in the HTML so I can see how it looks, but there’s no JavaScript yet.

I added a few gray SVG icons under the icons/ folder check, close, delete, and delete_forever which I’ll use later for marking tasks done or deleting them.

Next, I’ll work on adding JavaScript to make the todos actually functional and hook up the icons for interactions. I also want to make sure it looks good on smaller screens.