The tip calculator above is the result of a frontendmentor.io challenge. I found it incredibly helpful to have access to a Figma file and image assets. It made the process of web development much faster.

There were many things that I learned from this exercise. In no particular order, they included:

• getting more comfortable with using template refs to invoke an input element’s focus method. It can be tricky at first, but I believe that the UX wins are significant.

• I chose to make the custom tip % interface a modal because I did not realize the design called for the custom element to be an input element. I’m getting more comfortable with rolling my own modals or bringing in modal code, though I could use many more reps.

• Bringing in the custom Google Font “Space Mono” was easy to do in the unocss config file. I’m glad that Anthony Fu has made it easy to do everything (apparently!) that you can do in Tailwind/WindiCSS/Tachyons/etc. possible with UnoCSS, from bringing in fonts to creating custom class shortcuts.

• The design was responsive, so I got to practice making responsive grids and flexboxes. There is a special satisfaction seeing one’s design responding beautifully at all breakpoints.

• Because the design is reactive–that is, there is no “submit” button–it was an interesting challenge to validate the inputs. I tried using vee-validate, but vee-validate seems to depend on a submit mechanism in order to perform correctly. I ended up using watchers to perform input validation. I think it worked out well UX-wise as well. The custom tip input does have a submit button, so I was able to implement vee-validate validation for that input–give it a whirl! The feedback messages were simple to hook up, create, and display. I can see why vee-validate is a top option for Vue 3 form validation.

Summary

I am really enjoying this workflow: receiving the “handoff” from frontendmentor.io’s “designers” and implementing the desired functionality. Because I have such a strong interest in UX, I find it enjoyable to periodically and regularly click around–to really use the thing–as I develop. I’m finding that this practice, rather than being a waste of time, saves time as it uncovers bugs soon after they arise, allowing me to quash them more quickly and move on with a more stable foundation.

Next up: a responsive landing page for a bank. Stay tuned! DannyDevs out.