E-Greeting Card

:information_source: Project Overview Difficulty Level: Intermediate
Estimated Time: 2-3 hours
Skills Practiced:

• DOM Manipulation
• Event Handling
• CSS Classes with JavaScript
• Audio Control
• Interactive Animations

Download your material

What you'll do: Open the project and familiarize yourself with the interface

• Open the StackBlitz template: E-Greeting Card
• Other alternative: you can download the source code template from Stackblitz Download Project button if you want to use IDE.

WARNING: Before You Start

DO NOT DELETE the existing files in the template:

• Package files
• Any other files you didn't create

ONLY EDIT the necessary files.

Project Overview

Let's create an E-greeting card to send your best wishes to your family and friends, or anyone you care for! :tada:

The idea is that your E-greeting card will flip open or close when you click on it, creating a delightful interactive experience.

Project Roadmap

graph LR
    A[Phase 1: Setup] --> B[Phase 2: Customize HTML]
    B --> C[Phase 3: JavaScript Logic]
    C --> D[Phase 4: Add Audio]
    D --> E[Phase 5: Test & Submit]
    
    style A fill:#e8f5e9
    style B fill:#e3f2fd
    style C fill:#fff3e0
    style D fill:#fce4ec
    style E fill:#f3e5f5

Phase One: Setup Instructions

Follow the instructions carefully to get your project environment ready:

:bulb: Tip[Getting Started Right] Before you start coding, take a moment to explore the provided files:

• index.html - Contains the card structure
• style.css - Pre-styled card design
• script.js - Where you'll add your JavaScript magic

You are given index.html and style.css files for this project. You can replace some texts of the index.html below:

Phase 2: Customize Your Card

Let's personalize your greeting card to make it special!

:warning: Common Pitfall Make sure to only replace the ? symbols and highlighted text. Don't accidentally delete the HTML tags or class names - they're needed for the card to work properly!

Who is this card for? Replace the ? with the name of the person you want to give the card to.

<h3>To: ?</h3>

What is your message? Replace the content that is highlighted in yellow with the message you want to write in the card.

<p class="card-text p-1 mt-3 flex-fill">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore magnam voluptatem autem vitae error ad eum soluta officiis illo doloribus natus cupiditate in, commodi consectetur optio, at
cumque perspiciatis laborum.<br />
 On this special day, I would like to wish you: </p>

What's the special occasion? Replace the ? with the celebration name such as Happy Birthday, Merry Christmas or Happy Deepavali:

<p class="card-title"><b>?</b></p>

This card is from you. Replace the ? with your name:

<p class="card-text align-self-end">From: ?</p>

:bulb: Tip [Make It Your Own] You may use the images provided to you. However, you are encouraged to choose and change the image and style of your E-greeting Card. Personal touches make the best gifts!

:dart: Milestone Checkpoint 1

Before moving to JavaScript, ensure you have:

• Replaced all the ? placeholders with actual content
• Written a meaningful message
• Tested that your HTML displays correctly
• (Optional) Added your own images or styling

Phase 3: JavaScript Implementation

Now comes the exciting part - making your card interactive! Let's add the flip functionality step by step.

:warning: Common JavaScript Pitfalls

1. Typo Alert: Make sure your class names match exactly (.card not .Card)
2. Script Loading: Ensure your script.js is linked at the bottom of your HTML body
3. Variable Names: JavaScript is case-sensitive - isOpen is different from isopen

Step One: Select Your Elements

In the script.js file, declare 2 variables called card and front, then query select the .card element and .front element using DOM.

// Select the card and front elements from the DOM
const card = document.querySelector(".card");
const front = document.querySelector(".front");

Step 2: Track Card State

Declare a variable called isOpen and set the value to false.

// Keep track of whether the card is open or closed
let isOpen = false;

:bulb: Tip [Understanding State] The isOpen variable acts as a "memory" for your card. It remembers whether the card is currently open (true) or closed (false). This is called state management in programming!

Step 3: Add Click Interaction

To make the card flip when clicked, you need to attach addEventListener to the .card element.

card.addEventListener('click', function() {
    if (isOpen) {
        // Card is open, so close it
        front.classList.remove("open");
        isOpen = false;
    } else {
        // Card is closed, so open it
        front.classList.add("open");
        isOpen = true;
    }
});

If you have done it correctly, it should look something like this:

:dart: Milestone Checkpoint 2

Test your card interaction:

• Click the card - it should flip open
• Click again - it should flip closed
• Check browser console for any errors (F12 -> Console)
• The animation should be smooth

Debugging Tips :mag:

If your card isn't flipping, try these troubleshooting steps:

1. Check Console Errors

   • Open Developer Tools (F12)
   • Look for red error messages
   • Common error: "Cannot read property of null" means querySelector didn't find your element

2. Verify Script Loading

   html

   {/* Make sure this is at the bottom of your body tag */}
   <script src="script.js"></script>
   

3. Test Your Selectors

   javascript

   // Add these console.log statements temporarily to debug
   console.log("Card element:", card);
   console.log("Front element:", front);
   

4. Check CSS Class

   • Ensure the CSS file has an .open class defined
   • The class should have transform or animation properties

Phase 4: Adding Audio

Let's add a magical touch to your greeting card - music that plays when it opens! :emoji:

The song will play when the card is opened, and pause when the card is closed.

:bulb: Tip [Audio Enhancement] Adding audio makes your card more engaging and memorable. Choose a song that matches the occasion - cheerful for birthdays, peaceful for thank you cards, or festive for holidays!

Step One: Add Audio Element to HTML

Set the id of <audio> element to song. Then insert a <source> element inside the <audio> element and set the src to your mp3 file link:

index.html

{/* Place this before the closing </body> tag, before your script tag */}
<audio id="song">
  <source src="xxx" type="audio/mp3">
</audio>

The song URL is provided in the assets folder. Just click on the song.mp3 file to copy the URL. Place the song URL inside the src attribute. Feel free to add your own song if you like.

Note: Audio asset management instructions for accessing song files

Step 2: Control Audio with JavaScript

In your script.js file, add audio control:

// Add this after your existing variables
const song = document.querySelector("#song");

// Update your click event listener
card.addEventListener('click', function() {
    if (isOpen) {
        // Card is open, so close it
        front.classList.remove("open");
        song.pause(); // Pause the music
        isOpen = false;
    } else {
        // Card is closed, so open it
        front.classList.add("open");
        song.play(); // Play the music
        isOpen = true;
    }
});

:warning: Audio Autoplay Restrictions Modern browsers may block autoplay. Your audio will only play after the user's first interaction (clicking the card). This is normal browser behavior to prevent unwanted noise!

:dart: Milestone Checkpoint 3

Audio functionality check:

• Audio element is properly added to HTML
• Song file path is correct
• Music plays when card opens
• Music pauses when card closes
• No console errors related to audio

Audio Debugging Tips

If your audio isn't working:

1. Check File Path

   javascript

   console.log("Audio element:", song);
   console.log("Audio source:", song.src);
   

2. Handle Play Promise

   javascript

   // More robust audio playing
   song.play().catch(error => {
       console.log("Audio play failed:", error);
   });
   

3. Test Audio Format

   • Ensure your audio file is in a supported format (mp3, wav, ogg)
   • Try a different audio file to isolate the issue

Tips:

Check this link to learn more about .play() method and .pause() method:

• https://www.w3schools.com/Jsref/met_audio_play.asp
• https://www.w3schools.com/Jsref/met_audio_pause.asp

Phase 5: Final Testing & Submission

Almost there! Let's make sure everything works perfectly before you submit. :tada:

:dart: Final Milestone Checkpoint

Complete this final checklist:

• Card flips smoothly when clicked
• All placeholder text has been replaced with your content
• Audio plays when card opens and pauses when closed
• No JavaScript errors in the console
• Card looks good and personal message is heartfelt
• Tested in different browsers (Chrome, Firefox, Safari)

:bulb: Tip [Testing Like a Pro] Open your project in an incognito/private browser window to test it fresh, just like your recipient will see it!

Extension Challenges :rocket:

Ready to go beyond? Try these advanced features to make your card extra special:

Challenge One: Add Confetti Animation

// Add a confetti effect when the card opens
if (!isOpen) {
    // Trigger confetti animation
    createConfetti();
}

Challenge 2: Multiple Pages

Create a multi-page card that flips through different messages:

• Add "Next" and "Previous" buttons
• Create an array of messages
• Navigate between them with JavaScript

Challenge 3: Personalization Options

Add controls to let users:

• Change the background color
• Select different fonts
• Choose from multiple songs
• Add their own images via URL

Challenge 4: Save Feature

Implement localStorage to save card preferences:

// Save user's customizations
localStorage.setItem('cardMessage', userMessage);
localStorage.setItem('cardTheme', selectedTheme);

Challenge 5: Animation Varieties

Experiment with different card animations:

• Slide animations
• Fade effects
• 3D rotations
• Particle effects

:warning: Challenge Tips Start with the basic project first! Only attempt challenges after your main card is working perfectly. Each challenge builds on the core concepts you've learned.

Project Submission

When you have completed your "E-Greeting Card" project, submit it using the link below:

Submit Your Project Here

Make sure to test your webpage before submitting to ensure all required elements are working properly!

:bulb: Tip [Submission Success Tips]

1. Test your project one final time
2. Make sure your StackBlitz project is saved
3. Copy the correct project URL
4. Double-check all features work before submitting
5. Be proud of what you've created! :star2: