Do you love me?

by tospichai

HTML

<link href="https://fonts.googleapis.com/css2?family=Mali&display=swap" rel="stylesheet">
<div class="container">
  <img id="mainImg" src="https://media1.tenor.com/m/M-fqw4L0HWEAAAAC/bubu-bored-phone.gif">
  <h1 id="question">เธอว่าเราอ้วนไหม?</h1>
  <button id="yesBtn">ไม่ค้าบ</button>
  <button id="noBtn">อ้วน!</button>
</div>

CSS

* {
  font-family: 'Mali', sans-serif;
}

body {
  cursor: url('https://cdn.custom-cursor.com/db/10116/32/mochi-mochi-peach-cat-and-bubble-tea-cursor.png') 64 64, auto;
  margin: 0;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: sans-serif;
}

.container {
  text-align: center;
  position: relative;
  width: 500px;
  height: 500px;
}

.container img {
  width: 300px;
  height: 300px;
  border-radius: 20px;
  object-fit: cover;
}

h1 {
  font-size: 2.8em;
  margin: 20px 0;
}

button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 1.3em;
  border: none;
  color: white;
  background: #ff69b4;
  border-radius: 10px;
  box-shadow: 0 0 15px #ff69b4;
  cursor: pointer;
  transition: 0.2s;
  position: absolute;

}

#yesBtn {
  left: 20%;
  bottom: 20px;
  cursor: url('https://cdn.custom-cursor.com/db/10115/32/mochi-mochi-peach-cat-and-bubble-tea-pointer.png') 64 64, auto;
}

#noBtn {
  cursor: url('https://cdn.custom-cursor.com/db/10116/32/mochi-mochi-peach-cat-and-bubble-tea-cursor.png') 64 64, auto;
  right: 20%;
  bottom: 20px;
}

JavaScript

const noBtn = document.getElementById('noBtn');
const yesBtn = document.getElementById('yesBtn');
const img = document.getElementById('mainImg');
const question = document.getElementById('question');
const container = document.querySelector('.container');

noBtn.addEventListener('mouseover', () => {
  const maxX = 250;
  const maxY = 150;
  const randX = (Math.random() - 0.5) * maxX;
  const randY = (Math.random() - 0.5) * maxY;
  noBtn.style.transform = `translate(${randX}px, ${randY}px)`;
});

yesBtn.addEventListener('click', () => {
  img.src = "https://media.tenor.com/mW3l4xgvwzMAAAAi/bubu-dudu-sseeyall.gif";
  question.innerText = "ตัวเองน่ารักที่สุดเลย 😍";
  yesBtn.style.display = 'none';
  noBtn.style.display = 'none';
});