Start learning free

LESSON 117 OF 161 · FRONTEND: ACCESSIBLE, FAST, CORRECT

Money and Dates in JavaScript

Practice

JavaScript stores numbers in binary, where 0.1 has no exact form. So 0.1 + 0.2 gives 0.30000000000000004, and a shop that adds dollar prices can show a total like that. The fix is to keep money in cents: whole numbers add up exactly. You turn cents into dollars only at the very end, to show them.

To show a number the way people read it, use Intl.NumberFormat. You make a formatter once, with a language and options, and call its format:

const pct = new Intl.NumberFormat("en-US", { style: "percent" });
pct.format(0.25);   // "25%"

With the style "currency" and the currency "USD", it writes the dollar sign and always two decimals. Dates work the same way with Intl.DateTimeFormat: new Date(…) reads ISO text like "2026-05-28T14:05:00Z", and the formatter writes it for people. Give it timeZone: "UTC", or the day depends on the visitor's clock.

The order is in src/order.js, with prices in cents. Your page must show:

> open the page
  screen:
    main
      heading 1: Order 1001
      text: Placed on May 28, 2026
      list
        item: Mug × 1 $12.00
        item: Paper bag × 1 $0.10
        item: Gift wrap × 1 $0.20
      text: Total: $12.30

Your task: in src/App.jsx, make a US dollar formatter and show each line's price and the order's total with it, adding up in cents. Then make a long, UTC date formatter and show the day the order was placed.


Assignment
Follow the Coding Tutorial to show the order's prices, total and date with Intl.NumberFormat and Intl.DateTimeFormat.


Hint
Multiply and add in cents; divide by 100 only inside money.format(…). The date options are dateStyle and timeZone.


STEP 1 OF 6
    Ctrl + Enter to check

    Format Money Dates in JavaScript

    Keep going with JavaScript1,600+ step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free