Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

🥱🥱🐱‍👤Todo app Completed With drag N drop on laptops🚀🚀🚀🚀

Kelvin•770
@githukelvin
A solution to the Todo app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


The code is a To-Do List application that allows the user to add, remove, and filter tasks. The code uses vanilla JavaScript and manipulates the DOM to achieve these features.

Here are the features of the application:

- The user can add tasks to the To-Do List by typing in the input field and pressing the Enter key. When the user adds a task, it is displayed on the screen with a radio button to the left of the task text.

- The user can mark a task as completed by clicking on the radio button to the left of the task text. When a task is marked as completed, it is displayed with a strikethrough.

- The user can delete a task by clicking on the image to the right of the task text.

- The user can toggle between light and dark themes by clicking on the toggle button at the top right corner of the screen.

- The user can filter the tasks based on All, Active, and Completed categories by clicking on the corresponding buttons at the bottom left corner of the screen.

- The user can clear all completed tasks by clicking on the Clear Completed button at the bottom right corner of the screen.

- The user can see the number of tasks that are not completed at the bottom center of the screen.

- The tasks added by the user are saved to local storage so that they persist when the page is reloaded.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Kelvin's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License