Basic input concepts (prompt overview) in Javascript - Mini Project: Build & Apply

Basic Input Concepts with prompt() in JavaScript

📖 Scenario: You are creating a simple webpage that asks the user for their favorite fruit and then shows a message with their answer.

🎯 Goal: Build a small program that uses prompt() to get user input and then displays it using alert().

📋 What You'll Learn

Use prompt() to ask the user for their favorite fruit

Store the input in a variable called favoriteFruit

Create a message string that says "Your favorite fruit is: " followed by the input

Use alert() to show the message

💡 Why This Matters

🌍 Real World

Getting input from users is common in web pages for surveys, forms, or interactive tools.

💼 Career

Understanding how to collect and use user input is a basic skill for web developers and software engineers.

1

Create a variable to store user input

Write a line of code that uses prompt() to ask the user "What is your favorite fruit?" and store the answer in a variable called favoriteFruit.

Javascript

/* Your code here */

Hint

Use const favoriteFruit = prompt("What is your favorite fruit?"); to get the input.

2

Create a message string with the input

Add a line of code that creates a variable called message and sets it to the string "Your favorite fruit is: " followed by the value of favoriteFruit using a template literal.

Javascript

const favoriteFruit = prompt("What is your favorite fruit?");
/* Your code here */

Hint

Use a template literal like `Your favorite fruit is: ${favoriteFruit}` to create the message.

3

Show the message using alert()

Write a line of code that uses alert() to display the message variable.

Javascript

const favoriteFruit = prompt("What is your favorite fruit?");
const message = `Your favorite fruit is: ${favoriteFruit}`;
/* Your code here */

Hint

Use alert(message); to show the message to the user.

4

Run the program and see the output

Run the program and enter "Apple" when prompted. The alert should show the message "Your favorite fruit is: Apple". Write a line of code that calls alert(message) to display the message.

Javascript

const favoriteFruit = prompt("What is your favorite fruit?");
const message = `Your favorite fruit is: ${favoriteFruit}`;
alert(message);
/* Your code here */

Hint

When you run the code and type "Apple" in the prompt, the alert should show "Your favorite fruit is: Apple".

Practice

1. What does the prompt() function do in JavaScript?

easy

A. It displays a message in the console.

B. It pauses the program without any input.

C. It creates a new HTML element.

D. It asks the user to enter some input as text.

Solution

1. Step 1: Understand the purpose of prompt()

   The prompt() function shows a dialog box that asks the user to type something.

2. Step 2: Identify the type of input it collects

   The input collected is always text (a string), even if the user types numbers.

3. Final Answer:

   It asks the user to enter some input as text. -> Option D

4. Quick Check:

   prompt() = asks user input [OK]

Hint: Remember prompt() always asks user for text input [OK]

Common Mistakes:

• Thinking prompt() shows output instead of input
• Assuming prompt() returns numbers automatically
• Confusing prompt() with console.log()

2. Which of the following is the correct syntax to ask the user for their name using prompt()?

easy

A. let name = prompt('Enter your name');

B. prompt = 'Enter your name';

C. let name = input('Enter your name');

D. console.prompt('Enter your name');

Solution

1. Step 1: Check the correct function name and usage

   The function to get input is prompt(), not input() or console.prompt().

2. Step 2: Assign the result to a variable

   We store the user's input in a variable using let name = prompt('Enter your name');.

3. Final Answer:

   let name = prompt('Enter your name'); -> Option A

4. Quick Check:

   Correct prompt syntax = let name = prompt('Enter your name'); [OK]

Hint: Use let variable = prompt('message') to get input [OK]

Common Mistakes:

• Using input() instead of prompt()
• Trying to assign prompt as a string
• Using console.prompt() which doesn't exist

3. What will be the output of this code if the user enters 25 in the prompt?

let age = prompt('Enter your age');
console.log(typeof age);

medium

A. "string"

B. "number"

C. "undefined"

D. "object"

Solution

1. Step 1: Understand the type returned by prompt()

   The prompt() function always returns a string, even if the user types a number.

2. Step 2: Check the output of typeof age

   Since age holds a string, typeof age will be "string".

3. Final Answer:

   "string" -> Option A

4. Quick Check:

   prompt() returns string type [OK]

Hint: prompt() always returns string type, not number [OK]

Common Mistakes:

• Assuming prompt returns a number automatically
• Confusing typeof output with input value
• Expecting undefined or object type

4. Identify the error in this code snippet:

let number = prompt('Enter a number');
let result = number + 10;
console.log(result);

medium

A. The prompt() function is missing parentheses.

B. The input from prompt() is a string, so adding 10 concatenates instead of sums.

C. The variable 'number' is not declared.

D. console.log() cannot print variables.

Solution

1. Step 1: Check the type of input from prompt()

   The prompt() returns a string, so number is a string.

2. Step 2: Understand the effect of adding a number to a string

   Adding 10 to a string causes string concatenation, not numeric addition.

3. Final Answer:

   The input from prompt() is a string, so adding 10 concatenates instead of sums. -> Option B

4. Quick Check:

   String + number = concatenation [OK]

Hint: Convert prompt input to number before adding [OK]

Common Mistakes:

• Thinking prompt input is a number by default
• Ignoring type conversion before arithmetic
• Believing console.log can't print variables

5. How can you correctly get a number from the user using prompt() and add 10 to it? Choose the correct code.

hard

A. let num = prompt('Enter number') + 10;

B. let num = parseInt(prompt); num + 10;

C. let num = Number(prompt('Enter number')) + 10;

D. let num = prompt('Enter number'); num = num + 10;

Solution

1. Step 1: Convert prompt input to a number

   Use Number() or parseInt() to convert the string input to a number.

2. Step 2: Add 10 to the converted number

   After conversion, adding 10 performs numeric addition correctly.

3. Final Answer:

   let num = Number(prompt('Enter number')) + 10; -> Option C

4. Quick Check:

   Convert input to number before adding [OK]

Hint: Wrap prompt() with Number() to convert input [OK]

Common Mistakes:

• Adding number directly to prompt() string
• Forgetting to call prompt() as a function
• Using parseInt without parentheses