Skip to content
Submitted about 4 years ago

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

Akash Sharma•170
@aakash19090
A solution to the Todo app challenge
Preview (opens in new tab)Code (opens in new tab)

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! 😊

Code

Please log in to post a comment

Log in

Community feedback

  • Rufai Ayomide•170
    @haryor745

    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.

  • Michal•665
    @mbart13

    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

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