Creating a Personalized Greeting Card with HTML CSS and JavaScript

Last Updated : 23 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we are going to learn how to create a Personalized Greeting Card with HTML, CSS, and JavaScript.

Output Preview:

Screenshot-2023-12-26-134229

Prerequisites

Approach:

  • Create a JavaScript function called customizeCard.
  • Utilize the prompt function to gather user input for a new greeting and a new message.
  • Validate user input by checking if both the new greeting and new message are not null.
  • Use document.getElementById to select HTML elements with the IDs 'greeting' and 'message'.
  • Update the text content of these elements with the user-provided values, effectively customizing the card based on the entered information.
HTML 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="styles.css">
	<title>Personalized Greeting Card</title>
</head>
<body>
	<div class="card">
		<h1 id="greeting">Happy Birthday!</h1>
		<div id="message">
			Wishing you a fantastic day filled 
			with joy and celebration.
		</div>
		<button onclick="customizeCard()">
			Customize
		</button>
	</div>

	<script src="script.js"></script>
</body>

</html>
CSS 
body {
    font-family: 'Arial', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

.card {
    text-align: center;
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 10px;
    max-width: 400px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

button {
    margin-top: 10px;
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
}
JavaScript 
function customizeCard() {
	let newGreeting = prompt("Enter a new greeting:");
	let newMessage = prompt("Enter a new message:");

	if (newGreeting !== null && newMessage !== null) {
		document.getElementById('greeting')
			.textContent = newGreeting;
		document.getElementById('message')
			.textContent = newMessage;
	}
}

Output:


Next Article
Creating a Personalized Greeting Card with HTML CSS and JavaScript

A
aditiyadav20102001
Improve
Article Tags :

Similar Reads