Prompt/Alert

Make sure you attempt the activity on your own before checking out the solution.

Instructions

In this activity we will collect some information from the user using prompt and confirm dialogues, and alert the information back at the user.

Update the script tag in the following code using prompt to collect the following information from the user:

Their name
Their email address
A password (should be fake)

Store each value inside of a variable. Once each value has been collected, use an alert dialog to display all of the information back to the user.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>

    <script>
    const greeting = prompt('enter your name');
    alert('Hello ' + greeting);
    </script>
</body>
</html>

Challenge

Use the confirm dialog to ask the user if they would like their login credentials to be remembered and alert the response back to the user.

Solution

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Prompt & Alert</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <script>
        const userName = prompt('What is your name?');
        const userEmail = prompt('What is your email?');
        const userPass = prompt('Enter a password.');

        // CHALLENGE
        const userConfirm = confirm('Would you like your login credentials to be remembered?');

        alert(`Username: ${userName}`);
        alert(`Email: ${userEmail}`);
        alert(`Password: ${userPass}`);

        // CHALLENGE
        alert(`Remember Login Credentials? ${userConfirm}`);

    </script>
</body>
</html>

Prompt/Alert - Activity