My Day modal

As usual, this is shot in browser and all done with HTML, CSS, JS and SVG.

This showcases part of a modal where users document how their day was in terms of fitness and nutrition (part of a big health & fitness platform we're working with).

All fields are optional, except for the simple three-way rating system. We love this pattern and it converts really well in our experience. Rating can be done with a single click, yet remains easy to modifiy later without having to trigger some sort of edit mode.

Thanks to Facebook's awesome execution of Reactions, I feel like people are more familiar with the pattern than ever.

PS: I used CSS filters to render the face SVGs in black and white. I just remove the property on the :checked input.