Will You Be My Valentine?

Category: Fun Web App

Date: 2026

Technology: HTML, CSS, JavaScript

Project Overview

A fun and interactive Valentine's Day web application with dynamic button behavior. This project demonstrates creative JavaScript interactions where the "No" button has playful animations and changing positions to make the user smile while asking a special question.

Key Features:

Interactive buttons
Dynamic button movement
Fun animations
Cute GIF integration
Two separate pages
Responsive design

View Project →

📄 index.html - Valentine Page

How HTML Works:

The HTML creates a container with a heartfelt question, two buttons (Yes/No), and a cute GIF. The structure is simple and semantic, focusing on the user interaction.

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Will You Be My Valentine?</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Will you be my Valentine?</h1>
        <div class="buttons">
            <button class="yes-button" onclick="handleYesClick()">Yes</button>
            <button class="no-button" onclick="handleNoClick()">No</button>
        </div>
        <div class="gif_container">
            <img src="https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExbW5lenZyZHI5OXM2eW95b3pmMG40cWVrMDhtNjVuM3A4dGNxa2g2dSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/VM1fcpu2bKs1e2Kdbj/giphy.gif" alt="Cute GIF">
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
            

🎨 styles.css - Romantic Styling

How CSS Works:

CSS creates a romantic atmosphere with gradients, soft colors, and smooth animations. Uses flexbox for centering and positioning buttons. Hover effects and transitions make the interface feel interactive.

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

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

                    .container {
                    text-align: center;
                    background: rgba(255, 255, 255, 0.95);
                    padding: 40px;
                    border-radius: 20px;
                    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
                    }

                    h1 {
                    font-size: 2.5rem;
                    color: #ff1493;
                    margin-bottom: 30px;
                    letter-spacing: 2px;
                    }

                    .buttons {
                    display: flex;
                    gap: 20px;
                    justify-content: center;
                    margin: 30px 0;
                    }

                    .yes-button, .no-button {
                    padding: 12px 30px;
                    font-size: 1.1rem;
                    border: none;
                    border-radius: 25px;
                    cursor: pointer;
                    transition: 0.3s all;
                    font-weight: 600;
                    }

                    .yes-button {
                    background: #ff1493;
                    color: white;
                    }

                    .yes-button:hover {
                    background: #ff69b4;
                    transform: scale(1.1);
                    }

                    .no-button {
                    background: #ddd;
                    color: #333;
                    position: relative;
                    }

                    .no-button:hover {
                    transform: translate(20px, -20px);
                    background: #ff1493;
                    color: white;
                    }

                    .gif_container {
                    margin-top: 30px;
                    }

                    .gif_container img {
                    max-width: 300px;
                    border-radius: 15px;
                    animation: float 3s ease-in-out infinite;
                    }

                    @keyframes float {
                    0%, 100% { transform: translateY(0px); }
                    50% { transform: translateY(-10px); }
                    }
            

⚙️ script.js - Interactive Logic

How JavaScript Works:

JavaScript handles button interactions. When "Yes" is clicked, it navigates to the success page. The "No" button uses playful logic to create a fun experience where it moves away or changes behavior.

                function handleYesClick() {
                    // Navigate to yes page
                    window.location.href = 'yes_page.html';
                    }

                    function handleNoClick() {
                    const noBtn = document.querySelector('.no-button');
                    const container = document.querySelector('.container');

                    // Get random position
                    const randomX = Math.random() * 100 - 50;
                    const randomY = Math.random() * 100 - 50;

                    // Make button move away playfully
                    noBtn.style.transform = `translate(${randomX}px, ${randomY}px) scale(0.8)`;

                    // Optionally change text
                    const messages = ['No?', 'Really?', 'Think again!', 'Are you sure?'];
                    noBtn.textContent = messages[Math.floor(Math.random() * messages.length)];
                    }

                    // Alternative approach: Make button get smaller each time
                    let noClickCount = 0;

                    function handleNoClick() {
                    noClickCount++;
                    const noBtn = document.querySelector('.no-button');

                    if (noClickCount < 5) { const scale=1 - (noClickCount * 0.15);
                        noBtn.style.transform=`scale(${scale})`; } else { // After multiple clicks, change behavior
                        handleYesClick(); } }
            

How Everything Works Together

1. HTML Structure: Simple layout with a question, two buttons, and a cute animated GIF. Onclick handlers connect buttons to JavaScript functions.

2. CSS Styling: Romantic pink gradient background, rounded buttons, and smooth animations create a delightful user experience. The "No" button has a hover effect that makes it move away.

3. JavaScript Interaction: Yes button directly navigates to success page. No button has playful behavior - it moves away, changes text, or shrinks each time it's clicked.

4. User Experience: The playful nature of the "No" button's evasive behavior makes the user smile while encouraging them to click "Yes" - a fun way to ask a special question!

← Back to Home