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

JS, SCSS, CSS variables, Sortable.js

Oleh Tovkaniukβ€’ 505

@OlehTovkaniuk

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


It would be great to receive a feedback about my JS code structure.

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hey, nice work on this challenge, Oleh Tovkaniuk! πŸ‘

Your solution looks good and works rather well! πŸ‘

The only thing I might suggest is perhaps preloading the background images so that there is no delay between the light/dark theme button changer is pressed for the first time and the image appears. It would be a nice touch, I think!

Also, I'm unable to check off items on the to-do list as completed for some reason. You might want to look into that to see what's going on! πŸ˜‰

Keep coding (and happy coding, too)! 😁

1

Oleh Tovkaniukβ€’ 505

@OlehTovkaniuk

Posted

@ApplePieGiraffe Good points, thanks!

You can check off if you press at a todo's name. But if it confuses a user then it is a bad design and should be reviewed.

I believe that i should add an event listener for that visual checkbox element too.

1
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@OlehTovkaniuk

Oh, I see. Yes, I think it would be a good idea to allow users to mark items as completed by clicking on the checkbox as well as the name of each todo. Otherwise, I tried clicking on the names of the todos, and it works as expected! πŸ‘

1
Oleh Tovkaniukβ€’ 505

@OlehTovkaniuk

Posted

@ApplePieGiraffe Thanks a lot, my friend. Could you pls also have a look at my JavaScript code structure. Could you give me few advices how to make it better?

1
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@OlehTovkaniuk

I'm not super good at JS or anythingβ€”but you're JS looks fine to me. It's nice that you've separated your code into lots of functions (which helps keep your code DRY and therefore easier to maintain and stuff) and the comments make it a lot easier to understand what's going on at a glance. πŸ‘

I don't know if you've already seen this, but a good example of a to-do list made in vanilla JS is this awesome video from Dev Ed. If you like, you can take a look at that and perhaps learn something new! πŸ˜‰

1
Oleh Tovkaniukβ€’ 505

@OlehTovkaniuk

Posted

@ApplePieGiraffe you won't believe it but I actually seen this video, moreover my function deleteCheck is from this video and this is a way of solving two features - delete and check of a todo at once. It is a super intelligent idea, isn't it

1
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@OlehTovkaniuk

Haha, I actually followed the entire tutorial from start to finish as a sideproject! πŸ˜† You're rightβ€”Dev Ed is really smart and his videos are always so informative and funny! πŸ˜„

1
Arafat Arnobβ€’ 245

@Arnob-007

Posted

Hey Oleh Tovkaniuk, your solution seems nearly perfect to me! Drag & Drop animations are really great.

As for js, form validation can be pretty useful. Like not accepting empty To-Dos. Otherwise everything is pretty awesome.

Wish me good luck with sortablejs haha. Happy coding man < 3

1

Oleh Tovkaniukβ€’ 505

@OlehTovkaniuk

Posted

@Arnob-007 Hah, thanks man :3

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