Vue 2: Currency Formatting
Overview
In this lab, you'll be building a simple Vue application that focuses on using filters to format currency. You'll learn how to:
- Create and manipulate input fields
- Reflect input changes in real-time
- Use filters to format data
Constraints
- Make sure to implement Vue's data-binding to update the UI in real-time.
- Focus on utilizing Vue's filter feature to format currency.
- To validate the challenges, codedamn will run automated tests on your code. Follow the challenge descriptions closely to pass these tests.
Challenges
- Create Input for Currency: Set up an input field to accept currency amounts.
- Create Display for Raw Input: Show what is typed in the input field.
- Create Display for Formatted Currency: Display the currency in a specific format.
- Mirror Input to 'result-raw' Display: The raw input and the display should be in sync.
- Restrict Input to Numbers Only: Only numbers should be accepted in the input field.
- Format and Display Currency: Display the entered amount in a specified currency format.
Challenges Information
Challenge 1: Create an Input Field
Create an input field and give it an id
of currency
. This input field will be used to accept currency values.
Challenge 2: Create a Display Element for Raw Input
Create a paragraph (<p>
) element and give it an id
of result-raw
. This paragraph will display the raw value of what is entered into the currency
input field.
Challenge 3: Create a Display Element for Formatted Currency
Create another paragraph (<p>
) element and give it an id
of result
. This paragraph will display the currency in a specific format.
Challenge 4: Mirror Raw Input
Ensure that the text in the result-raw
paragraph precisely mirrors the value entered in the currency
input field. Use Vue's data-binding features to accomplish this. Your setup should update the text as soon as the user types into the input field.
Challenge 5: Numerical Input Only
Modify the currency
input field so that it only accepts numerical values. If a user types any non-numerical characters, they should not appear in result-raw
. For example, if the user types abc123
, result-raw
should only display 123
.
Challenge 6: Display Formatted Currency
The paragraph with id
result
should display the amount from the currency
input field in a specific format: ₹<currency amount> (INR). For instance, if a user types 100
into the currency
field, the result
paragraph should display ₹100 (INR)
.