Vue 2: Filters
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
-
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'.
- Assign the filter to an HTML element with the ID
- What to do: Create a Vue filter named
-
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'.
- Assign the filter to an HTML element with the ID
- What to do: Create a Vue filter named
-
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).
- Assign the filter to an HTML element with the ID
- What to do: Create a Vue filter named
-
Chain Multiple Filters
- What to do: Chain the
uppercase
and a newsuffix
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!'.
- Assign the filters to an HTML element with the ID
- What to do: Chain the
-
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)'.
- Assign the filter to an HTML element with the ID
- What to do: Create a local filter named
Happy Coding!