Everyone loves receiving a personalized greeting card! Whether itβs for a birthday, a congratulations message, or just to show appreciation, a custom card makes the moment special.
In this tutorial, we’ll build a Custom Greeting Card Maker using pure HTML, CSS, and JavaScript. Plus, users can download their greeting card as an image with just a click! π
π― Features of Our Greeting Card Maker
β
Custom Message β Users can enter a recipientβs name.
β
Multiple Themes β Choose from Birthday, Congratulations, Love, and Friendship.
β
Instant Card Preview β Displays a greeting card dynamically.
β
Download as Image β Save the card as an image (PNG).
β
No Libraries Required β Only uses html2canvas for image conversion.
π Code Breakdown
1οΈβ£ HTML: Setting Up the Greeting Card Form
Our HTML contains:
- A text input to enter the recipientβs name.
- A dropdown menu to select a theme.
- A button to generate the card.
- A hidden greeting card section that appears when a card is created.
- A download button to save the greeting card as an image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Greeting Card Maker</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>π Custom Greeting Card Maker</h1>
<label for="name">Enter Recipient's Name:</label>
<input type="text" id="name" placeholder="Type a name..." required />
<label for="theme">Select Theme:</label>
<select id="theme">
<option value="birthday">π Birthday</option>
<option value="congratulations">π Congratulations</option>
<option value="love">β€οΈ Love</option>
<option value="friendship">π€ Friendship</option>
</select>
<button id="generateCard">Generate Card</button>
<div id="card" class="card">
<h2 id="cardTitle"></h2>
<p id="cardMessage"></p>
</div>
<button id="downloadCard">Download Card</button>
</div>
<script src="script.js"></script>
</body>
</html>
2οΈβ£ CSS: Making It Look Beautiful
Weβll style the form with a simple and elegant design:
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
margin: 20px;
}
.container {
max-width: 400px;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
input, select, button {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #ff4081;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #d81b60;
}
.card {
display: none;
background: #fff;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.card h2 {
font-size: 24px;
margin: 10px 0;
}
.card p {
font-size: 18px;
}
3οΈβ£ JavaScript: Making the Card Generator Work
Now, let’s generate a greeting card dynamically based on user input!
document.getElementById("generateCard").addEventListener("click", function () {
let name = document.getElementById("name").value.trim();
let theme = document.getElementById("theme").value;
if (name === "") {
alert("Please enter a name.");
return;
}
let cardTitle = document.getElementById("cardTitle");
let cardMessage = document.getElementById("cardMessage");
let card = document.getElementById("card");
let themeMessages = {
birthday: `π Happy Birthday, ${name}! π Wishing you a fantastic day!`,
congratulations: `π Congratulations, ${name}! π Keep shining and achieving great things!`,
love: `β€οΈ Dear ${name}, you are truly special! Sending love your way! π`,
friendship: `π€ Hey ${name}! You're an amazing friend! π Stay awesome!`,
};
cardTitle.innerText = `π ${
theme.charAt(0).toUpperCase() + theme.slice(1)
} Greeting`;
cardMessage.innerText = themeMessages[theme];
card.style.display = "block";
});
π οΈ How It Works:
βοΈ Uses html2canvas β Converts the greeting card into an image.
βοΈ Creates a Download Link β Generates a PNG file and prompts download.
π― Final Thoughts
This Custom Greeting Card Maker is a fun and practical project that can be used for:
- Personalized Greetings π
- Special Occasions π
- Gifting Digital Cards π
Itβs a beginner-friendly JavaScript project that teaches DOM manipulation, event handling, and image generation.
π‘ Try it out and make someoneβs day special! π
