Vue 2: Currency Formatting

Medium
0.0% Acceptance

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

  1. Make sure to implement Vue's data-binding to update the UI in real-time.
  2. Focus on utilizing Vue's filter feature to format currency.
  3. 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).