Advent-Of-Vue / aov-gift-label

Advent Of Vue 2022

If you didn't get here from an email, read this section! Skip it otherwise.

Advent Of Vue is a series of 24 Vue coding challenges that are sent out every day from December 1 to December 24 via a dedicated newsletter. If you'd like to receive more of these puzzles in the future, go ahead and sign up!

Problem description

It's time to gift presents! And every present needs a label. So let's create our own gift label!

• Make the static TO and FROM fields dynamic so we can enter custom names.
• Below the label, add two input fields with two-way binding for the TO and FROM fields.
• When entering data into the input fields, the TO and FROM fields should dynamically update.
• Hint: you can look at the ./src/App.spec.js file to see a specification of the desired outcome.
• Hint: you can run the tests with npm run test to see if your solution matches the specification.

Example of a solution in action

https://aov-gift-label.netlify.app/

Author

This challenge was created by Markus Oberlehner.

If you like how, in this example, you can check your implementation with an existing test, you might be interested in my book/newsletter about how to write good tests for Vue applications.

Credits

Based on a Stackblitz project by tony19