Heart.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Heart Evolution</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            overflow: hidden; /* Prevent scrolling */
            background-color: #f0f8ff;
            display: flex; /* Flexbox for centering */
            flex-direction: column;
            justify-content: center; /* Center vertically */
            align-items: center; /* Center horizontally */
            height: 100vh; /* Full viewport height */
        }

        h1, #stage-text {
            color: #333;
            text-align: center;
            margin: 10px 0;
        }

        .heart {
            font-size: 100px;
            cursor: pointer;
            transition: transform 0.2s ease-in-out;
        }

        .heart:hover {
            transform: scale(1.1);
        }

        .emoji {
            font-size: 50px;
            cursor: grab;
            position: absolute;
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }

        .emoji:active {
            cursor: grabbing;
        }

        .hidden {
            opacity: 0;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <h1>Interactive Heart Evolution</h1>
   <div id="heart" class="heart">❤️</div>
   <p id="stage-text" style="text-align: center;">don't use hammer!</p>
     
    <div id="emoji-container"></div>

    <script>
        const heart = document.getElementById("heart");
        const stageText = document.getElementById("stage-text");
        const emojiContainer = document.getElementById("emoji-container");

        // Emojis with their IDs and initial visibility
        const emojis = [
            { id: "hammer", emoji: "🔨", visible: true },
            { id: "bandage", emoji: "🩹", visible: false },
            { id: "clock", emoji: "⏰", visible: false },
            { id: "glitter", emoji: "✨", visible: false },
            { id: "ribbon", emoji: "🎀", visible: false },
        ];

        // Function to randomly position emojis
        function randomizeEmojiPosition(emojiElement) {
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;

            // Generate random positions, leaving some margin for visibility
            const randomX = Math.random() * (windowWidth - 100);
            const randomY = Math.random() * (windowHeight - 100);

            emojiElement.style.left = `${randomX}px`;
            emojiElement.style.top = `${randomY}px`;
        }

        // Create emoji elements and add to the container
        emojis.forEach(({ id, emoji, visible }) => {
            const emojiElement = document.createElement("div");
            emojiElement.id = id;
            emojiElement.className = `emoji ${visible ? "" : "hidden"}`;
            emojiElement.innerText = emoji;
            emojiElement.draggable = true;

            // Randomize its initial position
            randomizeEmojiPosition(emojiElement);

            // Add drag event handlers
            emojiElement.ondragstart = (event) => {
                event.dataTransfer.setData("text", id);
            };

            // Append to the container
            emojiContainer.appendChild(emojiElement);
        });

        // Allow the heart to accept drop events
        heart.ondragover = (event) => event.preventDefault();

        // Handle dropping emojis on the heart
        heart.ondrop = (event) => {
            event.preventDefault();
            const draggedId = event.dataTransfer.getData("text");
            const emojiElement = document.getElementById(draggedId);

            if (draggedId === "hammer" && heart.innerText === "❤️") {
                heart.innerText = "💔"; // Break the heart
                emojiElement.classList.add("hidden"); // Remove hammer
                document.getElementById("bandage").classList.remove("hidden");
                stageText.innerText = "Oh no! you broke the heart. Use the bandage to fix it.";
            } else if (draggedId === "bandage" && heart.innerText === "💔") {
                heart.innerText = "❤️‍🩹"; // Bandage the heart
                emojiElement.classList.add("hidden"); // Remove bandage
                document.getElementById("clock").classList.remove("hidden");
                stageText.innerText = "The heart need to heal! Give it time.";
            } else if (draggedId === "clock" && heart.innerText === "❤️‍🩹") {
                heart.innerText = "❤️"; // Clock resets the heart to normal
                emojiElement.classList.add("hidden"); // Remove clock
                document.getElementById("glitter").classList.remove("hidden");
                document.getElementById("ribbon").classList.remove("hidden");
                stageText.innerText = "The heart is healthy now, Add some sparkle or a ribbon to it.";
            } else if (draggedId === "glitter" && heart.innerText === "❤️") {
                heart.innerText = "💖"; // Glitter heart
                emojiElement.classList.add("hidden"); // Remove glitter
                stageText.innerText = "Wow! The heart is sparkling now.";
            } else if (draggedId === "ribbon" && heart.innerText === "❤️") {
                heart.innerText = "💝"; // Ribbon heart
                emojiElement.classList.add("hidden"); // Remove ribbon
                stageText.innerText = "Beautiful! The heart is wrapped with love.";
            }
        };

        // Update positions of emojis on window resize
        window.onresize = () => {
            document.querySelectorAll(".emoji").forEach(randomizeEmojiPosition);
        };
    </script>
</body>
</html>
HTMLify

Share this file:

Comments
