Design!

[redahaq]

There are so many things I love about the design of your app.

The background image is really great and I like how you've used opacity for the main content.

I'm spending a disproportionate amount of time just toggling the buttons ;) I adore that you've managed to style completed todos with a white transparent overlay, as well as strikethrough! So much excellent! The colour change is also a great visual indicator.

This overlay works fantastically for the green tick button, but is slightly misleading for the red delete button as it could send some mixed messages to users about it still being clickable, when compared with the fully opaque version of the same button for the uncompleted todos.

I appreciate where you were going with it.. I think it's probably something you'd considered and given more time would be able to fix.

Another thing to consider is the consistency of your fonts; you currently have 3 different typefaces going on. It would help to use the same or similar fonts throughout your app. You can try using a snazzy site called Fontpair for some inspiration of fonts that work well together :) https://fontpair.co/

[bethanyios]

Agree with these comments - I really like the strikethrough/opacity change and the green button to indicate completion.

Also agree with the font suggestion Reda has made. I think it would make your project look really professional if they were the same typeface because the rest of your design looks really good - love the container transparency.

[redahaq]

Another thing that could help made your code a little more DRY...

You've used the DOM to establish inline styling for your mark and del buttons.. but as you've already set a classname a few lines above, you could use that classname to style the buttons in the CSS instead. Neato!

[freemvmt]

Nice style toggling on marking complete!**

We found this a tough one to execute (ngl it isn't working yet) so congrats on getting it all going nicely.

Much simpler to inject the styles directly into the HTML of the elements themselves than setting classes on them and styling those. Only negative is that if you want to apply styles to same elements from elsewhere by the same method you would overwrite the inline assignment.

This comment is only slightly different from what Reda said but I'll leave it here anyway...

Btw I think the ul element with class 'todo-block' is superfluous and could happily be destroyed?