Search⌘ K
AI Features
Home
Courses
Learn JavaScript in the Age of AI

User Input and Formatting

Understand how to make JavaScript programs interactive by accepting user input with prompt and converting text input to numbers for calculations. Learn to format outputs to produce clean, professional receipts, progressing from coder-only apps to usable point-of-sale systems.

We'll cover the following...

The project

We’ll go back to the POS system one last time. In the previous lesson, we entered prices, quantities, and names directly into the JavaScript code. That worked fine while we were coding, but it’s not how real systems usually work.

But here’s the problem: the cashier isn’t a coder. They don’t want to dig into code, find variables, and change values. They just want to type in the customer’s details and prices while the customer waits.

You’ve been hired to create a smarter version of this point-of-sale system, one where the cashier simply enters the quantities and prices at the command line when the app is running, and the program automatically calculates and prints the receipt. The cashier will not need to look at the code. This is what the receipt looks like:

The programming concept

The new concept for today is user input.

So far, we’ve only displayed information using console.log(). But what if we want the user, like our cashier, to type something in? That’s where user input comes in. JavaScript gives us a built-in function called prompt(). It shows a small dialog box where the user can enter information.

A key thing to remember:

  • prompt() always returns the user’s answer as a string (text).

  • If we want to use it for math, we need to convert it to a number with Number(), parseInt(), or parseFloat().

We’ll also learn formatting so the receipt looks neat and professional. Numbers can be formatted with .toFixed(2) to show two decimal places, the standard price.

Input and formatting let us go from a “coder-only” program to one that feels like a real cashier’s tool.

The significance of the concept in the project

In our earlier POS example, values were written directly in the code, as shown below. This meant that if the milk price changed, the cashier would have to open and change the file. In a real store, that’s unrealistic and error-prone.

Javascript (babel-node)
let milkQuantity = 1;
let milkPrice = 4;

With prompt(), the program can instead ask:

  • “Enter quantity of milk.”

  • “Enter price of milk.”

The cashier types the answers, and JavaScript does the calculations. With .toFixed(2), the final receipt will also look professional, just like a real printed slip.

Concept at a glance:

  • prompt("...") → asks the user for input (always returns a string).

  • Number(...) → converts input text into a number.

  • .toFixed(2) → formats a number to show 2 decimal places.

  • You can still use console.log() to print the results neatly.

Learn to code for the concept

Let’s start with just the milk example. Instead of writing numbers directly, we’ll ask the cashier to enter them:

// Ask the cashier for input
let milkQuantity = Number(prompt("Enter quantity of milk:"));
let milkPrice = Number(prompt("Enter price of milk:"));

let totalMilk = milkQuantity * milkPrice;

console.log("Milk (" + milkQuantity + "): " + totalMilk.toFixed(2));

Here’s what’s happening:

  1. prompt() asks the cashier for numbers.

  2. Number(...) converts the input from text to a number.

  3. Multiplication gives the subtotal for milk.

  4. .toFixed(2) ensures the output looks like real money (e.g., 4.00).

Try it! Run the code and enter different values for milk quantity and price. See how the program updates automatically, without you touching the code itself.

Learn to code with AI

So far, our cashier has entered details through prompt() dialogs, and the totals appear in the console. That works, but in a real store, it would be better to have a simple form on a webpage where the cashier (or even the customer) can type values and see the total instantly.

Here’s the new project goal:

  • A web page with two input fields: price and quantity.

  • A button labeled “Calculate Total.”

  • When the button is clicked, the page shows the subtotal neatly formatted with two decimal places.

Generate code with AI

You already know how to talk to your AI buddy. Give it a clear prompt about what you want to build, and let it generate the full HTML + JavaScript for you.

AI Powered
Saved
5 Attempts Remaining
Reset

Here’s an example of what you can ask the AI assistant:

Test code with AI

Once the AI has generated the code, copy-paste it into the following editor, run it, and then ask the AI Mentor for feedback. If needed, refine the code and test again.

If you’re stuck, click the “Show Solution” button.

Food for thought:

  • What happens if you leave one of the inputs blank?

  • What happens if you type text instead of numbers?

  • Notice how Number() helps make sure the input is treated as a number, not a string.

Practice makes perfect

Now that your calculator takes input from a form instead of the console, let’s extend it! Imagine the customer has a discount coupon for 20% off. Update your program so the receipt shows:

  • Subtotal (price × quantity)

  • Discount (20% off)

  • Final total after discount

This will bring your POS system closer to how real-world checkout counters handle promotions.

Problem

This is what needs to be generated now:

Price: 5  
Quantity: 4  
Subtotal: $20  
Discount (20%): -$4  
Total after discount: $16

Code its solution

Complete this code and test it with AI Mentor.

Add the discount feature so the program matches the sample output exactly.

If you’re stuck, click the “Show Solution” button.

So far, you’ve learned how to print output, take user input, and perform basic math to build a simple POS app. In the next chapter, you’ll apply the same skills to a different kind of app.