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

Todo app (HTML, CSS, JS)

@nekokanbaru

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 tried to input the close button svg using svgsprite to change the color on hover, but when I did it the element was there but you couldn't see the icon, so I changed it back to a regular img.

Another problem I had is that I could load tasks from local JSON but not save them, I looked it up on google but everywhere I looked people were using node, so if someone knows any other way I could do that I would be grateful if someone could tell me.

Otherwise it was a very fun project.

Community feedback

Eray• 1,410

@ErayBarslan

Posted

Hello Sylvanas! Great work on the challenge. It's responsive and everything works fine.

  • You can use visibility:hidden by default and turn it to visible on hover to achieve that effect.
  • To save data if you're not down to use a database which would be too much for this challenge, your option is localStorage. Whenever user creates a todo you can use localStorage.setItem() method to save the data and call with localStorage.getItem() method. You'd need some checking but it's pretty straightforward. If you wish to see on usage you can check my solution of the challenge which I used localStorage: Todo App. Hope these answers your questions, happy coding :)

Marked as helpful

1

@nekokanbaru

Posted

@ErayBarslan Thank you :)

0

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