Random Greeting Card Generator

Introduction

In this project, you will learn how to create a holiday greeting card that displays random greetings when the "Write" button is clicked. This project will help you understand how to work with JavaScript functions, event listeners, and DOM manipulation.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to set up the project environment
• How to implement a function to randomly select a greeting from a pre-defined array
• How to implement a function to display the selected greeting in the greeting card
• How to add an event listener to the "Write" button to trigger the greeting display

🏆 Achievements

After completing this project, you will be able to:

• Use JavaScript functions to generate random content
• Manipulate the DOM to update the content of an HTML element
• Add event listeners to trigger specific actions
• Work with a provided project structure and follow step-by-step instructions

Skills Graph

Set Up the Project Structure

In this step, you will set up the project files and structure. Follow the steps below to complete this step:

Open the project folder. The directory structure is as follows:

├── index.css
├── index.html
└── index.js

Where:

• index.css is the style file for this challenge.
• index.js is the JavaScript file that needs to be completed for this challenge.
• index.html is the greeting card page.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Implement the writeGreeting() Function

In this step, you will implement the writeGreeting() function to randomly select a greeting from the provided greetings array.

1. Open the index.js file.
2. Locate the writeGreeting() function and replace the // TODO comment with the following code:

return greetings[Math.floor((Math.random() * 10) % greetings.length)];

This code generates a random index within the greetings array and returns the corresponding greeting.

Implement the show() Function

In this step, you will implement the show() function to display the greeting in the greetingDisplay element.

1. Open the index.js file.
2. Locate the show() function and replace the // TODO comment with the following code:

greetingDisplay.innerHTML = writeGreeting();

This code calls the writeGreeting() function to get a random greeting and then sets the innerHTML of the greetingDisplay element to display the greeting.

3. Save the index.js file.
4. Refresh the "Web 8080" view in the VM to see the greeting card in action. Click the "Write" button to display a random greeting.

Congratulations! You have completed the Holiday Greeting Card project.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.