Responsive Todo App with a dark and light theme

Greetings Oluwafemi. You have done well so far, nice work.

• The design looks pretty good, close to the design and responsive.

• in the header , the images for the themes are supposed to be either wrapped in an interactive element on the theme changes has to be triggered by an interactive element. In this current state , the theme control will not be available to assistive technology users. Using semantic elements is always beneficial.

• an input element such as input in the form element should be associated with a label

• the main element is important as it contains the main purpose of the site

• as mentioned earlier , the divs that are acting as checkboxes will require extra coding to be accessible to assistive technology as well as the p elements with an image inside having a class of delete.

• The functionalities are working well.

Hi there. You did a good job 👍

keep improving your programming skills

your solution looks great, however, if you want to improve it, you can follow these steps:

🟢 background doesn't fit the whole viewport. It can be resolved with background-size: 100% 300px;

🟢 I't would be better to store theme value with local storage

🟢 deleteAllBtn could be stored using querySelector as you did It before

🟢 this code can be used as separated function (updateCounter for example). this logic can be improved in the future, and you will work better with the function

counter.textContent = todos.childElementCount;

🟢 try to avoid settings inline styles, you can do it easier with setting css classes (hidden or flex for example)

todos.parentElement.firstElementChild.style.display = "block";
todos.parentElement.firstElementChild.style.display = "none";

I hope my feedback will be helpful

Good luck and fun coding 🤝⌨️