Submitted over 3 years ago

Solution with Vue.js, Vuex and Sass

Yinon Hever• 835

@yinonhever

Preview site View code

This is a solution for...

Todo app

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

I used Vuex to manage the state of the list items and the dark/light theme. The list in its updated order is also saved into the local storage, so it remains the same after refreshing the browser.

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hey, Yinon Hever! 👋

Nice job on this challenge! Everything looks great and works well! 👏

I especially like the way the hero background image transitions in between light/dark themes! 🤩

Kudos for adding local storage functionality, too! 👍

Perhaps just consider taking a look at your solution report and making your solution a little more accessible. 😉

Keep coding (and happy coding, too)! 😁

Yinon Hever• 835

@yinonhever

Posted over 3 years ago

@ApplePieGiraffe Hey, thanks for the feedback. I'll add an aria-label and a submit button later on, though it should be noted that the original design doesn't include a submit button. But I suppose I could add one myself.

Guy Ezra• 615

@ezraguy

Posted over 3 years ago

Hey @yinonhever, Great Job! the challenge looks great and I especially love the smooth transitions. I have only 2 suggestions. 1.In mobile mode (600px width breakpoint) maybe make the text a little bit bigger because it's a little bit hard to read. 2.When choosing a different mode of filtering (active, completed) maybe change the "All" option color to white so its clear to the user which filter he is viewing right now. Awesome job!

Yinon Hever• 835

@yinonhever

Posted over 3 years ago

@ezraguy Thanks for the feedback. When it comes to the font size and colors, I was actually just sticking to the design files to make it pixel perfect. In a real world app it indeed could be better to increase the mobile font size a bit and alter the All filter color.

Please log in to post a comment

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