Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boyfriend Proposal</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
    <div class="decorations">
        <img src="flowers.png" alt="flowers" class="flowers">
        <img src="hearts.png" alt="hearts" class="hearts">
    </div>
    <h1 class="question">Will you be my <span class="fancy-text">Boyfriend</span>?</h1>
    <div id="buttons">
        <button id="yes-btn" onclick="showCat()">Yes</button>
        <button id="no-btn" onclick="handleNo()">No</button>
    </div>
    <div id="cat" class="hidden">
        <img src="upset_cat.png" alt="upset cat" class="cat-img">
    </div>
    <div id="message"></div>
</div>
<script src="script.js"></script>
</body>
</html>
let yesBtnSize = 18; // initial font size
let messageIndex = 0;
const messages = ["Why :(", "Don't you like me?", "I'll give you another chance", "No again?", "Fine, you leave me no choice"];

function handleNo() {
    if (messageIndex < messages.length) {
        document.getElementById('message').textContent = messages[messageIndex];
        messageIndex++;
    }
    increaseYesSize();
    if (yesBtnSize >= 40) {
        // If "Yes" button gets too big, hide "No" button
        document.getElementById('no-btn').style.display = 'none';
    }
}

function showCat() {
    // Show happy cat with hearts
    document.getElementById('cat').classList.remove('hidden');
    // Show message
    document.body.innerHTML += '<div class="message">Yay, Ilysm Gwapo</div>';
}

function increaseYesSize() {
    yesBtnSize += 2; // increase font size by 2px
    document.getElementById('yes-btn').style.fontSize = `${yesBtnSize}px`;

    if (yesBtnSize >= 40) {
        // If "Yes" button gets too big, hide "No" button
        document.getElementById('no-btn').style.display = 'none';
    }
}
Editor is loading...