Template filters in Flask - Mini Project: Build & Apply

Using Template Filters in Flask

📖 Scenario: You are building a simple Flask web app that shows a list of product prices. You want to display the prices formatted as currency in the HTML page.

🎯 Goal: Create a Flask app with a custom template filter called currency that formats numbers as prices with a dollar sign and two decimals. Use this filter in the HTML template to show the product prices nicely.

📋 What You'll Learn

Create a Flask app with a dictionary called products containing product names and prices.

Add a custom template filter named currency that formats a number as a string with a dollar sign and two decimal places.

Use the currency filter in the Jinja2 template to display each product's price.

Render the template with the products dictionary passed in.

💡 Why This Matters

🌍 Real World

Formatting prices nicely on web pages is common in online stores and dashboards.

💼 Career

Knowing how to create and use custom template filters in Flask helps build clean, reusable UI components.

1

Create the products dictionary

Create a dictionary called products with these exact entries: 'Apple': 0.5, 'Banana': 0.3, 'Cherry': 0.2.

Flask

# Create the products dictionary
# Your code here

Need a hint?

Use curly braces to create a dictionary with the exact keys and values.

2

Add the currency template filter

Create a Flask app instance called app. Then add a template filter named currency using the @app.template_filter('currency') decorator. The filter function should take a number and return a string formatted as a dollar sign followed by the number with two decimals (e.g., '$0.50').

Flask

products = {'Apple': 0.5, 'Banana': 0.3, 'Cherry': 0.2}

# Create Flask app and add currency filter
# Your code here

Need a hint?

Use @app.template_filter('currency') above your function to register the filter.

3

Create the HTML template using the currency filter

Create a Jinja2 template string called template that loops over products.items() with variables name and price. Inside the loop, display the product name and the price filtered with |currency. Use an unordered list <ul> and list items <li>.

Flask

from flask import Flask

products = {'Apple': 0.5, 'Banana': 0.3, 'Cherry': 0.2}

app = Flask(__name__)

@app.template_filter('currency')
def currency_filter(value):
    return f"${value:.2f}"

# Create a template string with a for loop using products.items()
# Your code here

Need a hint?

Use Jinja2 syntax with {% for %} and {{ }} to loop and display values.

4

Render the template with products in a route

Add a route @app.route('/') with a function index() that returns app.jinja_env.from_string(template).render(products=products) to render the template with the products dictionary.

Flask

from flask import Flask

products = {'Apple': 0.5, 'Banana': 0.3, 'Cherry': 0.2}

app = Flask(__name__)

@app.template_filter('currency')
def currency_filter(value):
    return f"${value:.2f}"

template = '''

{% for name, price in products.items() %}
  {{ name }}: {{ price|currency }}
{% endfor %}

'''

# Add a route '/' that renders the template with products
# Your code here

Need a hint?

Use @app.route('/') to create the home page and render the template string with products.