Built-In Functions and console.log()
Learn JavaScript’s built-in functions along with the console.log() function by building your first digital receipt.
You’ve probably gone shopping more times than you can count. You walk into the store, choose what you need, bring everything to the counter, and watch as the cashier scans each item. The prices appear on the screen, and finally, the receipt prints. That receipt isn’t random; it’s produced by a program that tells the system exactly what to show and in what order. This type of program is known as a point-of-sale (POS) system.
In this lesson, we’ll build a simple receipt system. We won’t add calculations or data storage yet—just print the receipt text exactly as it should appear on the screen.
The receipt looks as follows:
You have been hired to create this POS system! But here’s the twist: for now, we’ll create this receipt exactly as shown. Our only tool will be JavaScript’s built-in console.log() function.
The programming concept
Today’s programming concept concerns JavaScript’s built-in function, console.log(), and how to use it with strings and numbers to build a receipt. We already know console.log() prints text.
Let’s print “Hello, World!”. Click the “Run” button.
console.log("Hello, World!");
You’ll see that the quotes themselves aren’t printed. In JavaScript, anything inside single or double quotes is recognized as text, known as a string.
You can also print numbers:
console.log(42);
Notice how numbers do not need to be surrounded by double quote marks.
You can log more lines on the console:
console.log("=== My Store ===");console.log("Apples x2 - $4.00");console.log("Bananas x3 - $3.00");console.log("Total: $7.00");
Does each console.log print on its own line, or all on one?
JavaScript also has a cleaner way: template literals with backticks (`) and placeholders ${}.
For now, we’ll just use plain text and numbers:
console.log(`Total bill: ${12}`);
This prints the receipt exactly as shown, with line breaks included — all inside a single console.log().
Note: In real programs, instead of writing
12directly, we usually compute totals using variables. We’ll cover variables in the next lesson.
The significance of the concept in the project
If you look closely at our receipt, it’s just lines of text and numbers. Without console.log(), nothing would appear on the screen. For this first version of our point-of-sale app, each line of the receipt will be produced by a separate console.log() statement.
Concept at a glance:
console.log()is a built-in function. It tells JavaScript to show something on screen.The thing you want to show must go inside parentheses, like this:
console.log(...).If it’s text, you must put it in quotes:
"Hello!".Template literals (backticks + ${ }) are the modern way to combine text with numbers:
console.log(`Total bill: ${12}`);.
=== MART RECEIPT ===Cashier Name: AlexItems Purchased:Milk (1): 4Bread (1): 2Eggs (12): 0.5 x 12 = 6Total bill: 4 + 2 + 6 = 12
Learn to code for the concept
Knowing everything about printing on the console, let’s start to code for the POS project. Let’s start by printing the first two lines of our receipt:
console.log("=== MART RECEIPT ===");console.log("Cashier Name: Alex");
Now, extend this by adding the rest of the lines for “Milk,” “Bread,” “Eggs,” and the “Total.” Each line can be a separate console.log().
Once that works, try replacing the last line with a template literal so the total is inserted dynamically:
console.log("=== MART RECEIPT ===");console.log("Cashier Name: Alex");console.log("Items Purchased: ")console.log(`Milk (${1}): ${4} `)// Complete the rest of the code, use AI Mentor if stuck
Run the program and you’ll see your very first digital receipt printed on the screen.
If you’re stuck, click the “Show Solution” button.
Learn to code with AI
So far, our receipt appears in the console. That’s good for testing, but a real POS system needs to show the receipt on a web page where a customer or cashier can see it clearly.
Here’s the project goal:
A single web page needs to be created.
On that web page, the entire receipt is to be displayed with proper line breaks and formatting.
Generate code with AI
You already know by now how to talk to your AI buddy. Give it some details of what you want to build, and let’s see how it guides you.
Hint: Give it the entire JavaScript code we’ve generated for printing on the console. Ask it to turn it into a web app. Talk to your AI copilot below by entering your prompt:
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 code widget, run it, ask the AI Mentor for feedback, and improve the code if necessary.
If you’re stuck, click the “Show Solution” button.
Once it works, try asking your AI copilot for improvements:
Can we add today’s date to the receipt automatically?
Can we add a line of dashes
----------------below the header to make it look more like a real receipt?
These small tweaks show how JavaScript and the DOM can enhance your receipt with dynamic details and simple styling.
Practice makes perfect
So far, your receipt appears on the web page inside a <pre> block. That’s great, but in the real world, receipts often include a “thank you” message at the end.
The previous code is already given to you. Can you find out yourself how you can minimally change the code so that the POS receipt says the following at the very end:
Thank you for shopping with us!
Problem
This is what needs to be generated now:
=== MART RECEIPT ===Cashier Name: AlexItems Purchased:Milk (1): 4Bread (1): 2Eggs (12): 6Total bill: 12Thank you for shopping with us!
Code its solution
Complete the following code. Use AI Mentor when you feel stuck:
If you’re stuck, click the “Show Solution” button.
Perfect! Now your console-based program has transformed into a web-based receipt app, and you’ve added your very first customization.