annfelicity Goto Github PK

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: whitesmoke;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    .gif {
        height: 100%;
        width: 100%;
    }

    h2 {
        text-align: center;
        font-size: 1.5em;
        color: #e94d58;
        margin: 15px 0;
    }

    .btn-group {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    button {
        position: absolute;
        width: 150px;
        height: inherit;
        color: white;
        font-size: 1.2em;
        border-radius: 30px;
        outline: none;
        cursor: pointer;
        box-shadow: 0 2px 4px gray;
        border: 2px solid #e94d58;
        font-size: 1.2em;
    }

    button:nth-child(1) {
        margin-left: -200px;
        background: #e94d58;
    }

    button:nth-child(2) {
        margin-right: -200px;
        background: white;
        color: #e94d58;
    }
</style>

    yesBtn.addEventListener("click", () => {
      question.innerHTML = "Yay, I love you";
      gif.src = "https://media.giphy.com/media/UMon0fuimoAN9ueUNP/giphy.gif";
    });

    noBtn.addEventListener("mouseover", () => {
      const noBtnRect = noBtn.getBoundingClientRect();
      const maxX = window.innerWidth - noBtnRect.width;
      const maxY = window.innerHeight - noBtnRect.height;

      const randomX = Math.floor(Math.random() * maxX);
      const randomY = Math.floor(Math.random() * maxY);

      noBtn.style.left = randomX + "px";
      noBtn.style.top = randomY + "px";
    });
</script>