Close Menu
    JavaScript

    How to create Valentine’s Day Card using HTML CSS & JavaScript

    Coding StellaBy Updated:No Comments6 Mins Read

    Let’s create a Valentine’s Day Interactive Card using HTML, CSS, and JavaScript with playful and engaging features that bring the experience to life. This card will present a series of fun questions, with cute animations, and a playful “No” button that reacts to the user’s interactions.

    Features:

    • Multiple Questions:
      • “Will you be my Valentine?”
      • “Would you like to go on a date with me?”
      • “Can I have a hug?”
    • Playful “No” Button:
      • The “No” button dodges the mouse cursor when hovered over.
      • After 5 dodge attempts, it shows a sad response.
      • The heart icon changes to a broken heart when rejected.
      • Option to try again after rejection.
    • Progressive Interaction:
      • Each “Yes” answer leads to the next question.
      • Final acceptance triggers a celebration with floating hearts.
      • Cute emojis added to each question to add some fun and playfulness.
    • New Animations and Effects:
      • Smooth transitions between questions for an engaging user experience.
      • Random movement of the “No” button to make it even more playful.
      • Heart animation changes based on the response to the questions.

    HTML :

    This code creates an interactive Valentine’s Day card with questions and buttons. The user answers “Yes” or “No” to progress through the questions, and the card shows playful reactions based on the responses, ending with a happy message or an option to try again if rejected.

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Valentine's Day Card | @coding.stella</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<html lang="en">
<head>
    <meta name="author" content="MohamedDine">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Valentine's Day Card</title>
</head>
<body>
    <div class="card">
        <div class="heart-container">
            <svg viewBox="0 0 100 100" width="100" height="100">
                <path class="heart" d="M50 88.9L16.7 55.6C7.2 46.1 7.2 30.9 16.7 21.4s24.7-9.5 34.2 0L50 20.5l-0.9 0.9c9.5-9.5 24.7-9.5 34.2 0s9.5 24.7 0 34.2L50 88.9z"/>
                <path class="broken-heart" d="M50 88.9L16.7 55.6C7.2 46.1 7.2 30.9 16.7 21.4s24.7-9.5 34.2 0L50 20.5l-0.9 0.9c9.5-9.5 24.7-9.5 34.2 0s9.5 24.7 0 34.2L50 88.9z"/>
                <circle class="sparkle" cx="25" cy="25" r="2"/>
                <circle class="sparkle" cx="75" cy="25" r="2"/>
                <circle class="sparkle" cx="50" cy="15" r="2"/>
            </svg>
        </div>

        <div class="question active" id="q1">
            <h1 class="message">Will you be my Valentine? 💝</h1>
            <div class="btn-container">
                <button class="btn" onclick="nextQuestion(true, 1)">Yes!</button>
                <div class="no-btn-container">
                    <button class="btn no" onclick="handleNo()" onmouseover="dodgeNo()">No</button>
                </div>
            </div>
        </div>

        <div class="question" id="q2">
            <h1 class="message">Would you like to go on a date with me? 🌹</h1>
            <div class="btn-container">
                <button class="btn" onclick="nextQuestion(true, 2)">Of course!</button>
                <div class="no-btn-container">
                    <button class="btn no" onclick="handleNo()" onmouseover="dodgeNo()">No way</button>
                </div>
            </div>
        </div>

        <div class="question" id="q3">
            <h1 class="message">Can I have a hug? 🤗</h1>
            <div class="btn-container">
                <button class="btn" onclick="nextQuestion(true, 3)">Come here!</button>
                <div class="no-btn-container">
                    <button class="btn no" onclick="handleNo()" onmouseover="dodgeNo()">Nope</button>
                </div>
            </div>
        </div>

        <div class="question" id="final">
            <h1 class="message">You've made me the happiest person ever! ❤️</h1>
        </div>
        <div class="question" id="rejected">
            <h1 class="message">😢 But... but... please?</h1>
            <div class="btn-container">
                <button class="btn" onclick="resetQuestions()">Ok, let me try again</button>
            </div>
        </div>
        <div class="floating-hearts"></div>
    </div>
</body>
</html>

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

</body>
</html>

    CSS :

    This CSS styles a Valentine’s Day card with heart animations, interactive buttons, and smooth hover effects. It includes fade-in messages, pulse animations for hearts, and floating hearts. The card has a modern design with rounded corners, shadows, and playful effects on the “Yes” and “No” buttons.

    * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); */
    background-color: #252432;
    font-family: 'Arial', sans-serif;
}

.card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 90%;
    position: relative;
    overflow: hidden;
}

.heart-container {
    margin: 2rem 0;
    position: relative;
}

.heart {
    fill: #ff4b6e;
    transform-origin: center;
    animation: pulse 1.5s ease-in-out infinite;
}

.message {
    font-size: 1.5rem;
    color: #333;
    margin: 1rem 0;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 1s ease-out forwards;
}

.btn-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 1rem 0;
}

.btn {
    background: #ff4b6e;
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.3s, background 0.3s;
}

.btn:hover {
    background: #ff3356;
    transform: scale(1.05);
}

.btn.no {
    background: #666;
}

.btn.no:hover {
    background: #555;
}

.floating-hearts {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.question {
    display: none;
}

.question.active {
    display: block;
}

.no-btn-container {
    position: relative;
}

.no-btn-container .btn.no {
    position: relative;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-100vh) rotate(360deg); }
}

@keyframes dodge {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(0); }
}

.sparkle {
    fill: #ffd700;
    animation: sparkle 1s ease-in-out infinite;
}

@keyframes sparkle {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.broken-heart {
    display: none;
    fill: #666;
}

    JavaScript:

    This JavaScript controls the interactive Valentine’s Day card, progressing through questions when “Yes” is clicked and showing a celebration with floating hearts at the end. If “No” is clicked, it dodges up to five times before showing a rejection message with a broken heart. The resetQuestions function restarts the interaction.

    let noButtonDodgeCount = 0;  // Track dodge count
const maxDodges = 5;  // Max dodges allowed

// Move to the next question or show the final message
function nextQuestion(accepted, questionNumber) {
    if (accepted) {
        document.querySelector(`#q${questionNumber}`).classList.remove('active');
        if (questionNumber < 3) {
            document.querySelector(`#q${questionNumber + 1}`).classList.add('active');
        } else {
            document.querySelector('#final').classList.add('active');
            celebrateAcceptance();
        }
    }
}

// Handle the "No" button click
function handleNo() {
    if (noButtonDodgeCount >= maxDodges) {
        document.querySelectorAll('.question').forEach(q => q.classList.remove('active'));
        document.querySelector('#rejected').classList.add('active');
        document.querySelector('.heart').style.display = 'none';
        document.querySelector('.broken-heart').style.display = 'block';
    }
}

// Dodge effect for "No" button
function dodgeNo() {
    if (noButtonDodgeCount < maxDodges) {
        const btn = document.querySelector('.btn.no');
        btn.style.transform = `translate(${Math.random() * 200 - 100}px, ${Math.random() * 100 - 50}px)`;
        noButtonDodgeCount++;
    }
}

// Reset the questions and restart
function resetQuestions() {
    document.querySelectorAll('.question').forEach(q => q.classList.remove('active'));
    document.querySelector('#q1').classList.add('active');
    document.querySelector('.heart').style.display = 'block';
    document.querySelector('.broken-heart').style.display = 'none';
    noButtonDodgeCount = 0;
    const noBtn = document.querySelector('.btn.no');
    noBtn.style.transform = 'none';
}

// Celebrate with floating hearts
function celebrateAcceptance() {
    const container = document.querySelector('.floating-hearts');
    for (let i = 0; i < 15; i++) {
        createHeart(container);
    }
}

// Create a floating heart
function createHeart(container) {
    const heart = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    heart.setAttribute('viewBox', '0 0 100 100');
    heart.style.width = '30px';
    heart.style.height = '30px';
    heart.style.position = 'absolute';
    heart.style.left = `${Math.random() * 100}%`; 
    heart.style.animation = `float ${3 + Math.random() * 3}s linear infinite`;

    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute('d', 'M50 88.9L16.7 55.6C7.2 46.1 7.2 30.9 16.7 21.4s24.7-9.5 34.2 0L50 20.5l-0.9 0.9c9.5-9.5 24.7-9.5 34.2 0s9.5 24.7 0 34.2L50 88.9z');
    path.style.fill = `hsl(${Math.random() * 60 + 330}, 100%, 65%)`;

    heart.appendChild(path);
    container.appendChild(heart);

    setTimeout(() => {
        container.removeChild(heart);
    }, 6000);
}

    In conclusion, creating this Valentine’s Day Interactive Card using HTML, CSS, and JavaScript brings an exciting and fun experience with dynamic interactions. The playful “No” button dodging the cursor, progressive interactions leading to a celebration, and heart animations make this project both engaging and enjoyable.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply