Why this matters
Jordan (made up) runs Brightway Office Cleaning. Every enquiry starts with "How much for our office?", then an email asking for the size, then a price a day later, by which time half the leads have asked someone else.
The price rule is simple: 12 cents a square foot, never less than $150. A few lines of JavaScript can put that rule on the website, so a visitor types their size and sees a price at once. In this module you build it in JSFiddle, a free code playground in your browser, typing every line yourself.
What you’ll build
A small quote form: a heading, a Square feet box, a Get my quote button and a result line, plus the JavaScript behind it.
With the sample rule: 2,000 square feet gives Estimate: $240.00, and 800 square feet gives the $150.00 minimum.
What you need
- Nothing to start the practiceThe practice is built from real JSFiddle screens and runs in this page.
- A browser, to do it for realJSFiddle is free and needs no account for this.
- Later: your websiteWhoever edits your site can paste the same HTML and JavaScript into a page (most site builders have an HTML or code block).
Concepts
3 ideas you’ll use in the practice.
HTML is the page, JavaScript is what it does
The HTML panel lists what is on the page: a heading (h3), a number box (input), a button and an empty paragraph (p). The JavaScript panel says what happens when someone clicks.
The id on each element (sqft, go, result) is how JavaScript finds it: document.querySelector('#sqft') returns the box with id="sqft".
Constants and a function
const RATE = 0.12 and const MINIMUM = 150 put the business rule at the top, in one place. When prices change, you change one number.
function quote(sqft) { return Math.max(sqft * RATE, MINIMUM); } is a small recipe: give it a size, it gives back a price. Math.max picks the bigger of two numbers, which is exactly a minimum charge.
Run the code when the button is clicked
button.onclick = () => { ... }; means "when this button is clicked, do this". Inside, Number(box.value) turns what was typed into a number, and toFixed(2) shows two decimals, like money.
Practice
Do every step yourself in a practice copy of the real tool. It checks your work, and “Do it for me” finishes any step you get stuck on.
Do it for real
Now repeat it in your own account. Tick each step as you go.
Quick check
3 questions to check you’ve got it.
1. Why does 800 square feet cost $150.00 and not $96.00?
- RATE is 0.12
- Math.max picks the bigger of the price and the minimum
- toFixed rounds it up
Show the answer
Math.max picks the bigger of the price and the minimum. 800 x 0.12 = 96, and Math.max(96, 150) is 150: the minimum charge.
2. How does the JavaScript find the Square feet box?
- By its label text
- By its id, with document.querySelector('#sqft')
- By its position on the page
Show the answer
By its id, with document.querySelector('#sqft'). Each element has an id in the HTML, and querySelector finds it by that id.
3. Prices go up to 14 cents a square foot. What do you change?
- The quote function
- const RATE = 0.14
- The button
Show the answer
const RATE = 0.14. The rate lives in one constant at the top, so one edit updates every quote.
JavaScript: Turn Invoice Dates into Due-Date Reminders
Next, the same JavaScript works with dates: turn invoice dates into due dates and flag the overdue ones.
Start module 2 →