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

drag-drop todo-app using javascript & sass

vite
Ahmed Mekawy•90
@mekawy2k
A solution to the Todo app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


TodoList App

TodoList App is a simple application that allows you to manage your daily tasks. It was created using JavaScript and designed with SCSS.

Features

  1. Dark and Light Mode: You can switch between dark and light modes according to your preference.

  2. Task Addition: Easily add new tasks to your list.

  3. Task Reordering: Drag and drop tasks to reorder them by priority.

  4. Task Filtering: Filter tasks by status (Incomplete/Complete/All).

  5. Uncompleted Tasks Counter: Displays the count of tasks that are yet to be completed.

  6. Delete Completed Tasks: With a single click, you can delete all completed tasks.

  7. Responsive Design: The TodoList App is optimized for various screen sizes and devices. It utilizes ideal image sizes and layouts to ensure a seamless user experience on desktops, tablets, and mobile devices. This means you can manage your tasks efficiently, no matter how you access the application.

How to Run the App

To run the app, follow these steps in terminal:

  1. git clone https://github.com/mekawy2k/todo-app.git

  2. cd todo-app

  3. npm run dev

Live Preview

  • https://mekawy2k.github.io/todo-app

Technologies Used

  • JavaScript (OOP)
  • SCSS
  • css variables
  • JSON (localstorage for storing JSON file)

Project Updates

This project is regularly updated to add new features and improve performance. For the latest version, you can visit the project repository on GitHub here.

Author

TodoList App was developed by Ahmed Mekawy. If you have any questions or suggestions, you can reach me via email at [email protected].

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 Ahmed Mekawy'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

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