DATE?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /**NO NEED TO EXPLAIN JUST COPY PASTE IT MATE WUT THE F!*/
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .wrapper{
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            text-align: center;
            background-color:rgb(24, 24, 26);
            height: 100vh;
            font-size: 22px;
            color: white;
        }
        img{
            padding: 22px;
        }
        button{
            border-radius: 12px;
            padding: 12px 22px;
            margin: 12px;
            border: none;
            color: rgb(31, 31, 31);
            user-select: none;
            cursor: pointer;
            transition: 110ms;
            font-weight: bold;
        }
        .vanish { /**DISAPPEAR*/
            opacity: 0;
            transition: 900ms;
            user-select: none;

        }
        #yes{
            background-color: rgb(7, 235, 7);
        }
        #no {
            background-color: rgb(255, 47, 47);
        }
        .images {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hidden { /**HIDDEN CLASS*/
            opacity: 0;
            transition: 200ms;
        }

        .para {
            color: rgb(199, 76, 199);
            font-size: 32px;
        }
    </style>

</head>
<body>
    <div class="wrapper">
        <p style="padding: 22px;" id = "hide">Can I take you out on a date?</p>
        <div class="images">
            <img src="https://c.tenor.com/zGm5acSjHCIAAAAM/cat-begging.gif" id="img"><br>
            <img src="" id="img2"><br>
        </div>
        <button id="yes" onclick="yes()" class="btn">YES</button>
        <button id="no" class = "btn">NO</button>
        <p class="hidden para" id="hiddenP">See you soon! &lt3</p>
    </div>


    <script>
        //NO
        var no = document.getElementById('no'); //no button reference.
        no.addEventListener("mouseover", function (){ //eventlistener when mouse OVER the something
            var rand = Math.floor(Math.random() * (500 - 100) + 1); //generates whole num from 100 - 500
            var rand2 = Math.floor(Math.random() * (-250 - 100) + 1); //Same here but from -250 to 100
            no.style.transform = "translate(" + rand + "px," + rand2 + "px)"; //manipulate
        });
        //YES
        function yes(){
            alert('Yay <3');
            var image = document.getElementById('img'); //Image 1
            var img2 = document.getElementById('img2'); //Image 2 (optional)
            var hiddenP = document.getElementById('hiddenP') //Hidden -> Show
            var hide = document.getElementById('hide'); //Must Hide
            image.src = "YOUR IMAGE LINK";
            img2.src = "YOUR IMAGE LINK";

            const buttons = document.querySelectorAll('.btn'); //All class with .btn className
            for(const btn of buttons){ //select all
                btn.classList.add('vanish'); //Add class name 'vanish' (seen in CSS)
            }
            hiddenP.classList.remove('hidden'); //Remove class 
            hide.classList.add('vanish'); //Add class vanish
        }
    </script>
</body>
</html>
Editor is loading...