Skip to content
Submitted over 3 years ago

Todo App - React | SASS | LocalStorage | Theme & Sound Mode

Akash Sharma•170
@aakash19090
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Todo app
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hello Devs! 👋

Completed another challenge on Todo app! Made minor changes in the UI as per my creativity and to improve user experience.

Some additional challenge features:

  1. Adding a button to create Todo in the textbox considering the mobile first approach to avail user to create todo on tapping the same.

  2. Added count of 'Active' & 'Completed' respectively to get the idea of the todo state counts.

  3. Added sound effects to communicate using 2 human senses instead of 1. There is also option to toggle Sound mode on Mute or Unmute.

  4. Used Localstorage to store the user data & fetch it from there on reload.

Todo on 'Todo' 😊:

  1. Add Drag & Drop functionality. Will add this later.

  2. Trying on adding some cool animations with GSAP, finding it tough to implement in React.

Would be happy to get some suggestions and feedback on this challenge. Thank you! 😊

Community feedback

  • Rufai Ayomide•170
    @haryor745Posted over 3 years ago

    Hey Akash!

    Amazing job on the project, the sounds are pretty great too, you said you had issues with animations using GSAP, you could try Framer Motion instead, you can also use SortableJS for the drag and drop, I heard its easier than react beautiful dnd.

    1
    Akash Sharma•170
    @aakash19090Posted over 3 years ago

    @haryor745

    Thanks mate for the solutions, I have added drag & drop with Sortable. Will figure out on Framer motion. Seems interesting! Thanks for the feedback. :)

    0
  • Michal•665
    @mbart13Posted over 3 years ago

    hello, the sound is playing when 'mute' icon is active, it should be other way round

    also, this alert when clearing all completed breaks overall good impression, try maybe adding some custom pop up/modal?

    overall, good job

    1
    Akash Sharma•170
    @aakash19090Posted over 3 years ago

    @mbart13

    Yup i made it in context 'tap mute to mute', it should be other way, will work around on this. Thanks for the feedback :)

    0

Please log in to post a comment

Log in with GitHub

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