Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

MOS - TODO App

#cube-css#itcss#chart-js

@mohammadsalih

Desktop design screenshot for the Todo app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I recently embarked on a fun and challenging adventure to create my very own todo app. The excitement of designing a tool that could help me stay organized and efficient was just too good to pass up.

After several attempts and countless hours of coding, I finally managed to create an app that I'm proud of. It features an array of cool and dynamic features, such as the ability to change the order of tasks, sort them by completed or unfinished status, and remove tasks as desired. And if you're like me and love the satisfaction of having a clean slate, the app also lets you clear all your completed tasks at once with just a single button.

But what makes this app truly stand out is its simple yet stunning design. With two themes (dank and light) to choose from, you can pick the one that suits your mood best. And let me tell you, it was no easy feat to make the app look as beautiful as it does. I put a lot of effort into crafting every little detail to make it as user-friendly and aesthetically pleasing as possible.

While the whole journey was definitely challenging, it was also incredibly rewarding. Despite the occasional frustration and setbacks, the thrill of seeing my app come to life and being able to use it in my daily life is indescribable.

I did my best to write clean and efficient code, but I'll admit, the JavaScript code could use some improvement. Nonetheless, I'm excited to share my app with others and hope it will be useful for those seeking a practical and visually pleasing tool to keep them on track. So go ahead, give it a try and let me know what you think!

Community feedback

Suleman 750

@legion40216

Posted

its pretty good but the drag and drop wasnt working very well...

0

@mohammadsalih

Posted

Any idea how can i make it better ? @legion40216

0
Suleman 750

@legion40216

Posted

@mohammadsalih basically get the index value of the two and instead of appending them shuffle the todo list array by using splice with the index value of them both when u drop it...

1

Please log in to post a comment

Log in with GitHub
Discord logo

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