User Input & Basic Interaction

What We'll Learn Today

• How to get data from users
• How to display messages
• How to make decisions with if/else
• Build your first interactive program

Why User Input?

Websites become truly useful when they respond to people!

• Games ask for your name or choices
• Calculators need your numbers
• Quizzes check your answers

How Can We Get Input?

• prompt() - asks the user for text
• HTML forms (coming soon!)
• Other ways: buttons, clicks, etc.

Today: We'll use prompt()

Using prompt()

let name = prompt("What is your name?");

Shows a box asking the user for input. Stores the answer in a variable.

Using alert()

alert("Hello, " + name + "!");

Shows a message box to the user.

Making Decisions: if/else

if (age >= 18) {
  alert("You are an adult!");
} else {
  alert("You are a minor!");
}

Decide what happens based on user input.

Project: Age Calculator (Step 1)

let birthYear = prompt("What year were you born?");

Ask the user for their birth year.

Project: Age Calculator (Step 2)

let currentYear = new Date().getFullYear();
let age = currentYear - birthYear;

Calculate the user's age.

Project: Age Calculator (Step 3)

alert("You are " + age + " years old.");

Show the result to the user!

Project: Simple Quiz

let answer = prompt("What is 2 + 2?");
if (answer == 4) {
  alert("Correct!");
} else {
  alert("Try again!");
}

Respond to the user's answer.

Activity: Try It Yourself!

Write a program that asks for your favorite color and responds with a message.

let color = prompt("What's your favorite color?");
alert("Nice choice! " + color);

Common Mistakes

• Forgetting to use let for variables
• Not converting input to numbers (prompt returns text!)
• Misspelling variable names
• Using = instead of == in comparisons

Challenge: Make Your Own Interactive Page

Ideas:

• Ask for the user's name and greet them
• Make a mini quiz with two questions
• Calculate something based on user input

Show your code to a friend!

Summary & Homework

• Use prompt() to get input
• Use alert() to show messages
• Build a simple interactive program