Learn JavaScript with a Fun Task: Create a Personalized Greeting!

by

Learning JavaScript is exciting when you can immediately use it to do cool things. In this post, we’ll do a simple task to help you get started with JavaScript. Let’s go!

Task: Making a Personalized Greeting

Your job is to make a webpage where people can type their name and get a special greeting just for them.

Steps to Complete the Task:

Setting Up the Webpage:

First, make a webpage with a place for people to type their name and a spot to show the greeting

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Greeting Page</title>
</head>
<body>
    <h1>Welcome!</h1>
    <form id="nameForm">
        <label for="nameInput">Enter your name:</label>
        <input type="text" id="nameInput">
        <button type="submit">Submit</button>
    </form>
    <div id="greetingMessage"></div>

   <script>
        // JavaScript code goes here
    </script>
</body>
</html>

2.Adding JavaScript Magic:

Next, add JavaScript to make the greeting happen when someone types their name and clicks the button.

document.getElementById('nameForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevents the form from doing its default action

    const nameInput = document.getElementById('nameInput');
    const name = nameInput.value;

    const greetingMessage = document.getElementById('greetingMessage');
    greetingMessage.textContent = "Hello, " + name + "! Welcome to our website.";
});

Explanation

  • document.getElementById('nameForm').addEventListener('submit', function(event) { ... }):
    • This code adds an event listener to the form element with the ID ‘nameForm’. It listens for the ‘submit’ event, which occurs when the form is submitted.
    • The function inside the addEventListener method is executed when the form is submitted.
  • event.preventDefault();:
    • This line prevents the default action of the form, which is to submit and reload the page. By calling event.preventDefault(), we ensure that the form submission is handled by our JavaScript code instead of the browser’s default behavior.
  • const nameInput = document.getElementById('nameInput'); and const name = nameInput.value;:
    • These lines retrieve the value entered in the input field with the ID ‘nameInput’ and store it in a variable named ‘name’. We split it into two steps for clarity.
  • const greetingMessage = document.getElementById('greetingMessage'); and greetingMessage.textContent = "Hello, " + name + "! Welcome to our website.";:
    • These lines select the HTML element with the ID ‘greetingMessage’, which is the placeholder where we want to display the greeting message.
    • We set the textContent property of the greetingMessage element to the constructed greeting message. Here, we concatenate the string “Hello, ” with the value of the ‘name’ variable and “Welcome to our website.” using the ‘+’ operator.

Great job! You’ve just made a webpage that greets people by their name. This shows how JavaScript can make websites more interactive. Keep practicing and having fun with JavaScript!

Leave a Comment