Vue 2: Filters

Easy
1
40.0% Acceptance

Welcome to the JavaScript Date Formatting Lab! This lab focuses on date and text manipulation in JavaScript. You will use JavaScript to manipulate HTML elements and display various formats for text and dates.

Concepts Covered

String Manipulation

You'll get hands-on experience with changing the case of text. This is useful for a myriad of applications including user interfaces that need to adapt the display text according to the context.

Currency Formatting

Learn how to convert numbers to currency format, a common task in e-commerce applications or dashboards that handle financial data.

Date Formatting

You will work with JavaScript's Date object to format date strings differently. Being able to manipulate and display dates is a key skill for any developer working on applications that include scheduling, timelines, or any other date-related features.

Function Chaining

Explore the concept of chaining multiple JavaScript functions. Function chaining allows you to perform multiple operations in a single line, making your code more concise and easier to read.

Locale Formatting

Delve into the intricacies of locale-specific formatting. Understanding how to adapt your text and numbers to fit various locales is crucial for making your applications globally adaptable.

Starting Point

The project you'll be working on has some HTML elements pre-defined with specific IDs. You will target these elements with JavaScript to manipulate their text content.

Challenge Instructions

  1. Create a Basic Uppercase Filter

    • What to do: Create a Vue filter named uppercase that transforms a string to uppercase.
    • How to do it: Use the filters option in your Vue component.
    • Constraints:
      • Assign the filter to an HTML element with the ID uppercase-test.
      • The original text should be 'hello', and the filtered text should display as 'HELLO'.

  2. Implement a Currency Formatting Filter

    • What to do: Create a Vue filter named currencyFormat that transforms a number into currency format.
    • How to do it: Use the filters option in your Vue component.
    • Constraints:
      • Assign the filter to an HTML element with the ID currency-test.
      • The original number should be 100, and the filtered text should display as '$100.00'.

  3. Create a Date Formatting Filter

    • What to do: Create a Vue filter named formatDate that transforms a date string into a human-readable format.
    • How to do it: Use the filters option in your Vue component.
    • Constraints:
      • Assign the filter to an HTML element with the ID date-test.
      • The original date string should be '2023-09-05T12:34:56', and the filtered text should display as '9/5/2023' (assuming a US locale).

  4. Chain Multiple Filters

    • What to do: Chain the uppercase and a new suffix filter to add a '!'.
    • How to do it: Apply both filters to a single data point in your template.
    • Constraints:
      • Assign the filters to an HTML element with the ID chain-test.
      • The original text should be 'good', and the filtered text should display as 'GOOD!'.

  5. Implement a Local Filter

    • What to do: Create a local filter named localFilter that appends the string ' (local)' to any given input.
    • How to do it: Define this filter within a single Vue component.
    • Constraints:
      • Assign the filter to an HTML element with the ID local-test.
      • The original text should be 'this is local', and the filtered text should display as 'this is local (local)'.

Happy Coding!