Output formatting basics in Javascript - Mini Project: Build & Apply

Output formatting basics

📖 Scenario: You are creating a simple program to display product prices in a friendly way for a small shop.

🎯 Goal: Learn how to format output text using template literals to show product names and prices clearly.

📋 What You'll Learn

Create a dictionary (object) with product names and prices

Create a variable for currency symbol

Use a for...in loop to format each product's output

Print the formatted output lines

💡 Why This Matters

🌍 Real World

Formatting output is important for making data easy to read in reports, invoices, or user interfaces.

💼 Career

Many jobs require displaying data clearly, especially in web development and software that shows prices or lists.

1

Create the products object

Create an object called products with these exact entries: "apple": 0.5, "banana": 0.3, "cherry": 0.2

Javascript

// Create the products object with prices
// Your code here

Need a hint?

Use curly braces {} to create an object with keys and values.

2

Add a currency symbol variable

Create a variable called currency and set it to the string "$"

Javascript

const products = {"apple": 0.5, "banana": 0.3, "cherry": 0.2};
// Create the currency variable
// Your code here

Need a hint?

Use const to create a variable that does not change.

3

Format the output lines

Use a for...in loop with variable product to go through products. Inside the loop, create a variable called line that uses a template literal to format the text as "Product: [product], Price: [currency][price]"

Javascript

const products = {"apple": 0.5, "banana": 0.3, "cherry": 0.2};
const currency = "$";
// Use for...in loop to create formatted lines
// Your code here

Need a hint?

Use backticks ` to create a template literal and insert variables with ${}.

4

Print the formatted output

Inside the for...in loop, add a console.log(line) statement to print each formatted line

Javascript

const products = {"apple": 0.5, "banana": 0.3, "cherry": 0.2};
const currency = "$";
for (const product in products) {
    const line = `Product: ${product}, Price: ${currency}${products[product]}`;
    // Print the line
    // Your code here
}

Need a hint?

Use console.log() to show output in the console.