Back

Activity 1.6 Console Input

divider

Introduction

Activity 1.6

Console Input

Topics

  • Console Input Behavior
  • The prompt() Function

Console Input

Console input is a process where a computer program receives data from a user through a text-based interface, such as the terminal window.

Console Input

Terminal window
Enter your name:

Console Input

Terminal window
Enter your name: Anthony Mortimer

Console Input

Terminal window
Enter your name: Anthony Mortimer [Enter]
Hello Anthony Mortimer!

Console Input

The user is provided with a prompt, such as a question or command. They can then type their response (input) into the terminal.

To submit input, press the enter key.

The prompt() Function

The prompt() function is a built-in method that displays a message to the user and waits for them to type a line of text, which it then returns as a string.

Terminal window
let name = prompt("Enter your name:");
console.log(`Hello ${name}!`);

The prompt() Function

The prompt() function is a built-in method that displays a message to the user and waits for them to type a line of text, which it then returns as a string. 

let name = prompt("Enter your name:");
console.log(`Hello ${name}!`);
Terminal window
Enter your name: Anthony Mortimer [Enter]
Hello Anthony Mortimer!

The prompt() Function

The prompt() function is a built-in method that displays a message to the user and waits for them to type a line of text, which it then returns as a string.

Prompt Input

Demo Write a Simple Prompt prompt()

Don't just watch the program run, type your input into the application! 

let food = prompt("What is your favorite food?");
console.log("I love " + food);

'F' → Fullscreen

Objectives

  • icon Prompting a user for input and saving it to a variable.
  • icon Using variables that contain user input.
divider

Activity Tasks

  • icon Create a new project named 1-6-input.js.
  • icon Complete each task individually.

Task 1: Simple To-Do List

1-6-input.js
console.log("--- Demo 1 - Simple To-Do List ---");
console.log("Let's add a few tasks to your list.");


let task1 = prompt("Task 1:");
let task2 = prompt("Task 2:");
let task3 = prompt("Task 3:");


console.log("\nYour To-Do List:");
console.log("1." + task1);
console.log("2." + task2);
console.log("3." + task3);
prompt("Press enter to continue..."); // Pause before the next demo app
//

Task 2: User Profile

1-6-input.js
console.log("--- Demo 1 - Simple To-Do List ---");
console.log("Let's add a few tasks to your list.");


let task1 = prompt("Task 1:");
let task2 = prompt("Task 2:");
let task3 = prompt("Task 3:");


console.log("\nYour To-Do List:");
console.log("1." + task1);
console.log("2." + task2);
console.log("3." + task3);
prompt("Press enter to continue..."); // Pause before the next demo app


// -----------------------------------------------------------------------------


console.log("\n--- Demo 2 - User Profile Setup ---");
console.log("WELCOME! LET'S SET UP YOUR PROFILE...");


let username = prompt("Enter your username:");
let subject = prompt("What's your favorite subject in school?");


// List of options
console.log("Choose your preferred after-school activity:");
console.log("- Sports");
console.log("- Music");
console.log("- Gaming");
console.log("- Volunteering");
let activity = prompt("->"); // This is just an arrow prompt.


console.log("\n- Creating your profile -");
console.log(`NAME: ${username}`);
console.log(`FAVORITE SUBJECT: ${subject}`);
console.log(`AFTER-SCHOOL ACTIVITY: ${activity}`);
prompt("Press enter to continue...");
//
/section>

Task 3: Simple Survey

1-6-input.js
console.log("--- Demo 1 - Simple To-Do List ---");
console.log("Let's add a few tasks to your list.");


let task1 = prompt("Task 1:");
let task2 = prompt("Task 2:");
let task3 = prompt("Task 3:");


console.log("\nYour To-Do List:");
console.log("1." + task1);
console.log("2." + task2);
console.log("3." + task3);
prompt("Press enter to continue..."); // Pause before the next demo app


// -----------------------------------------------------------------------------


console.log("\n--- Demo 2 - User Profile Setup ---");
console.log("WELCOME! LET'S SET UP YOUR PROFILE...");


let username = prompt("Enter your username:");
let subject = prompt("What's your favorite subject in school?");


// List of options
console.log("Choose your preferred after-school activity:");
console.log("- Sports");
console.log("- Music");
console.log("- Gaming");
console.log("- Volunteering");
let activity = prompt("->"); // This is just an arrow prompt.


console.log("\n- Creating your profile -");
console.log(`NAME: ${username}`);
console.log(`FAVORITE SUBJECT: ${subject}`);
console.log(`AFTER-SCHOOL ACTIVITY: ${activity}`);
prompt("Press enter to continue...");


// -----------------------------------------------------------------------------


console.log("\n--- Demo 3 - Simple Survey ---");
console.log("We'd love to get your feedback!");


let favoriteColor = prompt("What is your favorite color?");
let favoriteFood = prompt("What is your favorite food?");
let travelDestination = prompt("Where is a place you would like to travel?");


console.log("\n- Survey Results -");
console.log("Favorite Color: " + favoriteColor);
console.log("Favorite Food: " + favoriteFood);
console.log("Travel Destination: " + travelDestination);
prompt("Press enter to continue...");
//

Task 4: Fantasy Story Builder

1-6-input.js
console.log("--- Demo 1 - Simple To-Do List ---");
console.log("Let's add a few tasks to your list.");


let task1 = prompt("Task 1:");
let task2 = prompt("Task 2:");
let task3 = prompt("Task 3:");


console.log("\nYour To-Do List:");
console.log("1." + task1);
console.log("2." + task2);
console.log("3." + task3);
prompt("Press enter to continue..."); // Pause before the next demo app


// -----------------------------------------------------------------------------


console.log("\n--- Demo 2 - User Profile Setup ---");
console.log("WELCOME! LET'S SET UP YOUR PROFILE...");


let username = prompt("Enter your username:");
let subject = prompt("What's your favorite subject in school?");


// List of options
console.log("Choose your preferred after-school activity:");
console.log("- Sports");
console.log("- Music");
console.log("- Gaming");
console.log("- Volunteering");
let activity = prompt("->"); // This is just an arrow prompt.


console.log("\n- Creating your profile -");
console.log(`NAME: ${username}`);
console.log(`FAVORITE SUBJECT: ${subject}`);
console.log(`AFTER-SCHOOL ACTIVITY: ${activity}`);
prompt("Press enter to continue...");


// -----------------------------------------------------------------------------


console.log("\n--- Demo 3 - Simple Survey ---");
console.log("We'd love to get your feedback!");


let favoriteColor = prompt("What is your favorite color?");
let favoriteFood = prompt("What is your favorite food?");
let travelDestination = prompt("Where is a place you would like to travel?");


console.log("\n- Survey Results -");
console.log("Favorite Color: " + favoriteColor);
console.log("Favorite Food: " + favoriteFood);
console.log("Travel Destination: " + travelDestination);
prompt("Press enter to continue...");


// -----------------------------------------------------------------------------


console.log("\n--- Demo 4 - Fantasy Story Builder ---");
console.log("Let's create a fantasy story!");


let mainCharacter = prompt("Name your main character:");
let magicalCreature = prompt("Name a magical creature:");
let aMagicalPlace = prompt("Name a magical place:");


console.log("\n- Your Story -");
console.log("Once upon a time, there was a hero named " + mainCharacter + ".");
console.log(mainCharacter + " traveled to the " + aMagicalPlace + " to seek the legendary " + magicalCreature + ".");
console.log("Their quest was just beginning...");
//
divider

Sample Output

Your program output should something similar to the sample output below.

Sample Output
--- Demo 1 - Simple To-Do List ---
Let's add a few tasks to your list.
Task 1: Do Homework
Task 2: Cook Dinner
Task 3: Clean Bedroom


Your To-Do List:
1.Do Homework
2.Cook Dinner
3.Clean Bedroom
Press enter to continue...


--- Demo 2 - User Profile Setup ---
WELCOME! LET'S SET UP YOUR PROFILE...
Enter your username: amortimer
What's your favorite subject in school? Computer Science
Choose your preferred after-school activity:
- Sports
- Music
- Gaming
- Volunteering
-> Gaming


- Creating your profile -
NAME: amortimer
FAVORITE SUBJECT: Computer Science
AFTER-SCHOOL ACTIVITY: Gaming
Press enter to continue...


--- Demo 3 - Simple Survey ---
We'd love to get your feedback!
What is your favorite color? purple
What is your favorite food? Pizza Hut Pepperoni Pizza
Where is a place you would like to travel? Great Britain


- Survey Results -
Favorite Color: purple
Favorite Food: Pizza Hut Pepperoni Pizza
Travel Destination: Great Britain
Press enter to continue...


--- Demo 4 - Fantasy Story Builder ---
Let's create a fantasy story!
Name your main character: Fart Knight
Name a magical creature: Logan Paul
Name a magical place: Cleveland, Ohio


- Your Story -
Once upon a time, there was a hero named Fart Knight.
Fart Knight traveled to the Cleveland, Ohio to seek the legendary Logan Paul.
Their quest was just beginning...
divider

Reflection Questions

You may write your reflection answers as comments at the bottom of your code.

  1. How did the prompt() function allow you to make your programs interactive?
  2. Why is it important to store user input in a variable before you can use it?
divider

Submission

Submit your activity and reflection answers to the appropriate dropbox.

Activity Complete