Skip to content
Submitted over 2 years ago

Responsive Todo App using HTML, CSS & Javascript

LVL 3
@khlifibrahim
A solution to the Todo app challenge

Solution retrospective


This JavaScript project is a simple task manager that allows you to add, complete, and filter tasks. It also features a dark mode toggle.

  • Add tasks with a description.
  • Mark tasks as completed.
  • Filter tasks by All, Active, and Completed.
  • Toggle between light and dark mode.
  1. Clone the repository to your local machine.
  2. Open the index.html file in your web browser.
  • bodyBg, darkModeIcon, taskValue, addTask, and other variables are used to select elements from the HTML document for interaction.
  • Event listeners are set up to handle user interactions, such as adding tasks, toggling dark mode, and filtering tasks.
  • The createTask function adds a new task to the list when the "Add" button is clicked.
  • The deletefinish function handles task completion and deletion when the checkmark or cross icon is clicked.
  • The counter function updates the task counter and enables drag-and-drop functionality for tasks.
  • The menu function filters tasks based on the selected menu option.

This project is licensed under the MIT License - see the LICENSE.md file for details.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on KHLIFI BRAHIM’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