Magic Eight Ball

Click on the small magic eight ball to get your question answered!

HTML

<div class="eight-ball">
  <p id="answer">Click me!</p>
</div>

CSS

body {
  color: white;
  text-align: center;
  font-family: sans-serif;
  padding-top: 80px;
}

.eight-ball {
  width: 200px;
  height: 200px;
  margin: auto;
  border-radius: 50%;
  background: radial-gradient(circle, #777, #000);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.6s ease;
}

.eight-ball.spin {
  transform: rotate(360deg);
}

#answer {
  font-size: 20px;
  transition: opacity 0.3s;
}

Javascript

const answers = [
  "Absolutely!",
  "Nope!",
  "Maybe...",
  "Try again.",
  "It is certain.",
  "Unclear 🤔",
  "Ask tomorrow!"
];

const ball = document.querySelector('.eight-ball');
const answerText = document.getElementById('answer');

ball.addEventListener('click', () => {
  // Add spin animation
  ball.classList.add('spin');
  answerText.style.opacity = 0;

  setTimeout(() => {
    const random = Math.floor(Math.random() * answers.length);
    answerText.textContent = answers[random];
    answerText.style.opacity = 1;

    ball.classList.remove('spin');
  }, 600);
});