Activity 1.8: Numeric Input

Activity 1.8

Numeric Input

Key Concepts

Type Casting

parseInt() and parseFloat()

The Problem

prompt() always returns a string — even if the user types a number.

let score1 = prompt("Enter the score for game 1:");
let score2 = prompt("Enter the score for game 2:");
let totalScore = score1 + score2;

console.log(totalScore); // "4564" -- joined as text, not added!

+ is used for both adding numbers and joining text, so when both sides are strings, JavaScript joins them instead of adding.

The Fix: Type Casting

parseInt() andparseFloat() convert a string into an actual number — a whole number, or one with decimals.

let score1 = parseFloat(prompt("Enter the score for game 1:"));
let score2 = parseFloat(prompt("Enter the score for game 2:"));
let totalScore = score1 + score2;

console.log(totalScore); // 109 -- correctly added

A Word of Caution

If the user types something that isn't a number,parseInt()/parseFloat() won't crash your program — they'll silently returnNaN ("Not a Number"), and any math done with it becomes NaN too.

Today's Objectives

Converting prompt() input into numbers
Choosing between parseInt() and parseFloat()
Doing math on converted input

Key Terms

Type Casting: Converting a value from one type to another, like a string to a number.
parseInt(): Converts a string into a whole number.
parseFloat(): Converts a string into a number that can have decimals.
NaN: "Not a Number" — the result of trying to convert something that isn't a valid number.

'F' → Fullscreen

Build

Create a new JavaScript file named 1-8-numeric-input.js.

Task 1: Age to Months Calculator

Ask the user's age, converting it with parseInt().
Print their age in months.

1
console.log("--- Demo 1 - Age to Months Calculator ---");
2

3
let age = parseInt(prompt("Enter your age:"));
4
console.log(`You are ${age} years old. That's ${age * 12} months old!`);
5

6
alert("Press enter to continue...");

Task 2: Square Area Calculator

Ask for the length of a square's side, converting it with parseFloat().
Print the square's area.

1
console.log("--- Demo 1 - Age to Months Calculator ---");
2

3
let age = parseInt(prompt("Enter your age:"));
4
console.log(`You are ${age} years old. That's ${age * 12} months old!`);
5

6
alert("Press enter to continue...");
7

8
console.log("--- Demo 2 - Square Area Calculator ---");
9

10
let length = parseFloat(prompt("Enter the length of the square:"));
11
let area = length * length;
12
console.log(`The area of the square is ${area}`);
13

14
alert("Press enter to continue...");

Task 3: Score Calculator

Ask for three game scores, converting each with parseFloat().
Print their total.

1
console.log("--- Demo 1 - Age to Months Calculator ---");
2

3
let age = parseInt(prompt("Enter your age:"));
4
console.log(`You are ${age} years old. That's ${age * 12} months old!`);
5

6
alert("Press enter to continue...");
7

8
console.log("--- Demo 2 - Square Area Calculator ---");
9

10
let length = parseFloat(prompt("Enter the length of the square:"));
11
let area = length * length;
12
console.log(`The area of the square is ${area}`);
13

14
alert("Press enter to continue...");
15

16
console.log("--- Demo 3 - Score Calculator ---");
17

18
let score1 = parseFloat(prompt("Enter the score for game 1:"));
19
let score2 = parseFloat(prompt("Enter the score for game 2:"));
20
let score3 = parseFloat(prompt("Enter the score for game 3:"));
21
let totalScore = score1 + score2 + score3;
22
console.log(`Your total score for the three games is ${totalScore}!`);
23

24
alert("Press enter to continue...");

Task 4: Shopping Cart Subtotal

Ask for the prices of two items, converting each with parseFloat().
Print their subtotal.

1
console.log("--- Demo 1 - Age to Months Calculator ---");
2

3
let age = parseInt(prompt("Enter your age:"));
4
console.log(`You are ${age} years old. That's ${age * 12} months old!`);
5

6
alert("Press enter to continue...");
7

8
console.log("--- Demo 2 - Square Area Calculator ---");
9

10
let length = parseFloat(prompt("Enter the length of the square:"));
11
let area = length * length;
12
console.log(`The area of the square is ${area}`);
13

14
alert("Press enter to continue...");
15

16
console.log("--- Demo 3 - Score Calculator ---");
17

18
let score1 = parseFloat(prompt("Enter the score for game 1:"));
19
let score2 = parseFloat(prompt("Enter the score for game 2:"));
20
let score3 = parseFloat(prompt("Enter the score for game 3:"));
21
let totalScore = score1 + score2 + score3;
22
console.log(`Your total score for the three games is ${totalScore}!`);
23

24
alert("Press enter to continue...");
25

26
console.log("--- Demo 4 - Shopping Cart Subtotal ---");
27

28
let item1Price = parseFloat(prompt("Enter the price of the first item:"));
29
let item2Price = parseFloat(prompt("Enter the price of the second item:"));
30
let subtotal = item1Price + item2Price;
31
console.log(`The subtotal for your two items is $${subtotal}.`);
32

33
alert("Press enter to continue...");

Task 5: Hours to Minutes Converter

Ask for a number of hours, converting it with parseFloat().
Print the equivalent number of minutes.

1
console.log("--- Demo 1 - Age to Months Calculator ---");
2

3
let age = parseInt(prompt("Enter your age:"));
4
console.log(`You are ${age} years old. That's ${age * 12} months old!`);
5

6
alert("Press enter to continue...");
7

8
console.log("--- Demo 2 - Square Area Calculator ---");
9

10
let length = parseFloat(prompt("Enter the length of the square:"));
11
let area = length * length;
12
console.log(`The area of the square is ${area}`);
13

14
alert("Press enter to continue...");
15

16
console.log("--- Demo 3 - Score Calculator ---");
17

18
let score1 = parseFloat(prompt("Enter the score for game 1:"));
19
let score2 = parseFloat(prompt("Enter the score for game 2:"));
20
let score3 = parseFloat(prompt("Enter the score for game 3:"));
21
let totalScore = score1 + score2 + score3;
22
console.log(`Your total score for the three games is ${totalScore}!`);
23

24
alert("Press enter to continue...");
25

26
console.log("--- Demo 4 - Shopping Cart Subtotal ---");
27

28
let item1Price = parseFloat(prompt("Enter the price of the first item:"));
29
let item2Price = parseFloat(prompt("Enter the price of the second item:"));
30
let subtotal = item1Price + item2Price;
31
console.log(`The subtotal for your two items is $${subtotal}.`);
32

33
alert("Press enter to continue...");
34

35
console.log("--- Demo 5 - Hours to Minutes Converter ---");
36

37
let hours = parseFloat(prompt("Enter a number of hours:"));
38
let minutes = hours * 60;
39
console.log(`${hours} hours is equal to ${minutes} minutes.`);

Checkpoint

Verify your program works correctly.

--- Demo 1 - Age to Months Calculator ---
Enter your age: 35
You are 35 years old. That's 420 months old!
Press enter to continue... [Enter]

--- Demo 2 - Square Area Calculator ---
Enter the length of the square: 11.5
The area of the square is 132.25
Press enter to continue... [Enter]

--- Demo 3 - Score Calculator ---
Enter the score for game 1: 45
Enter the score for game 2: 64
Enter the score for game 3: 99
Your total score for the three games is 208!
Press enter to continue... [Enter]

--- Demo 4 - Shopping Cart Subtotal ---
Enter the price of the first item: 12.50
Enter the price of the second item: 10
The subtotal for your two items is $22.5.
Press enter to continue... [Enter]

--- Demo 5 - Hours to Minutes Converter ---
Enter a number of hours: 12
12 hours is equal to 720 minutes.

Reflection

Answer the following questions before submitting your work.

Why does prompt() always give back a string, even if the user types a number?
What's the difference between parseInt() and parseFloat()? When would you use one over the other?
What do you think parseFloat("banana") would return? What might happen if you tried to do math with that result?

Submit

Submit the required files to the appropriate dropbox.