Build and Send Interactive Greeting Cards
What You'll Build?
A magical interactive greeting card! Click a button and watch messages appear, colours change, and surprises happen.
Perfect for birthdays, holidays, or just making someone smile!
Before You Start Building - Choose Your Workspace:
Option A: Online (Easiest - No Installation!)
Using CodePen (Recommended for Beginners)
Go to codepen.io
Click "Start Coding" (no account needed!)
You'll see 3 boxes: HTML, CSS, and JS
You'll use all 3 boxes: HTML, CSS, and JS
Your website appears at the bottom as you type!
OR
Using Replit
Go to replit.com
Click "Start building"
Choose "HTML, CSS, JS" template
Click "Create Repl"
Your files will be on the left, website preview on the right
Option B: On Your Computer (Using VS Code)
Step 1: Download VS Code
Go to code.visualstudio.com
Click the big download button (it knows your computer type!)
Open the downloaded file and install (keep clicking "Next")
Open VS Code when done
Step 2: Install Live Server Extension
Click the squares icon on the left sidebar (Extensions)
Type "Live Server" in the search box
Find "Live Server" by Ritwick Dey
Click the green "Install" button
Wait for it to finish
Step 3: Create Your Project Folder
Create a new folder on your Desktop called "greeting-card"
In VS Code, click "File" β "Open Folder"
Select your "greeting-card" folder
Step 4: Create Your Files
Click the "New File" icon (looks like a page with a +)
Name it index.html and press Enter
Create another file called style.css
Create another file called script.js
Step 5: See Your Website Live
Right-click on index.html
Select "Open with Live Server"
Your browser will open and show your website!
Every time you save, the website updates automatically! β¨
Let's Build! (Step-by-Step)
STEP 1: Create the Card Structure (HTML)
In index.html, type:
<!DOCTYPE html>
<html>
<head>
<title>My Greeting Card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<h1>π Click the Button! π</h1>
<br>
<button id="surpriseBtn">Surprise Me!</button>
<br>
<p id="message" class="hidden">Happy Birthday! π</p>
<br>
<p id="quote" class="hidden">"You are awesome!" β¨</p>
</div>
<script src="script.js"></script>
</body>
</html>
What does this Code Snippet Mean?
<div class="card"> - A container (like a box) for your card
<button id="surpriseBtn"> - Clickable button with ID name
class="hidden" - Hides the message at first (we'll show it with JavaScript!)
<script src="script.js"> - Connects to JavaScript file
SAVE: Press Ctrl + S (Windows) or Cmd + S (Mac). Your card appears but messages are hidden!
STEP 2: Style the Card (CSS)
In style.css, add:
body {
background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.card {
background-color: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
text-align: center;
max-width: 400px;
}
h1 {
color: #667eea;
font-size: 32px;
margin-bottom: 30px;
}
button {
background-color: #ff6b6b;
color: white;
border: none;
padding: 15px 30px;
font-size: 20px;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background-color: #ee5a52;
transform: scale(1.1);
}
#message {
font-size: 36px;
color: #4ecdc4;
margin-top: 20px;
animation: fadeIn 1s;
}
#quote {
font-size: 24px;
color: #95a5a6;
font-style: italic;
margin-top: 15px;
animation: fadeIn 1.5s;
}
.hidden {
display: none;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
What does this CSS Code Snippet Mean?
linear-gradient - Purple gradient background!
border-radius: 20px - Rounded corners
box-shadow - Makes card float
transition - Smooth button grow effect
@keyframes fadeIn - Animation when text appears!
SAVE: Press Ctrl + S (Windows) or Cmd + S (Mac).
STEP 3: Add the Magic (JavaScript!)
In script.js, type:
// Get the button and messages
const button = document.getElementById('surpriseBtn');
const message = document.getElementById('message');
const quote = document.getElementById('quote');
// What happens when you click the button
button.addEventListener('click', function() {
// Show the hidden messages
message.classList.remove('hidden');
quote.classList.remove('hidden');
// Change the button text
button.textContent = 'π YAY! π';
// Change the card background color
document.querySelector('.card').style.backgroundColor = '#fffacd';
});
What does this JS Code Snippet Mean?
const - Creates a variable (a storage box for information)
document.getElementById - Finds the element with that ID
Now button represents our button!
addEventListener - Waits for a click
function() { } - The code inside runs when clicked!
message.classList.remove(βhiddenβ) - Removes the "hidden" class, making the message appear!
SAVE: Press Ctrl + S (Windows) or Cmd + S (Mac).
Your Interactive Greeting Card Project is now Ready!
PART 7: Show off your work!
For Online Editors:
CodePen: Click "Save" and share the URL
Replit: Click "Share" and copy the link
For VS Code:
Take a video and share it!
Or learn to publish on GitHub Pages
Troubleshooting
-> Button doesn't do anything!
Check the <script> tag is BEFORE </body>
Make sure script.js is spelt exactly right
-> Message doesn't appear!
Check the ID names match exactly (surpriseBtn, message, quote)
Make sure you have classList.remove('hidden')
-> I don't see my changes!
Did you save? (Ctrl+S or Cmd+S)
Try refreshing your browser (F5 or Cmd+R)
