decide-o-matic-3000 / script.js
audriusblockis's picture
create a simple looking landing page that will help you to decide about life decisions if you cant decide. It should work something like 8 ball.
4c4ca30 verified
Raw
History Blame Contribute Delete
1.07 kB
document.addEventListener('DOMContentLoaded', () => {
const decideBtn = document.getElementById('decide-btn');
const answerText = document.getElementById('answer-text');
const answerContainer = document.getElementById('answer-container');
decideBtn.addEventListener('click', () => {
// Get random answer
const randomIndex = Math.floor(Math.random() * answers.length);
const answer = answers[randomIndex];
// Reset animation class
answerText.classList.remove('fade-in');
answerText.classList.add('hidden');
// Force reflow to restart animation
void answerText.offsetWidth;
// Display answer with animation
answerText.textContent = answer;
answerText.classList.remove('hidden');
answerText.classList.add('fade-in');
// Shake the button for fun
decideBtn.classList.add('animate-pulse');
setTimeout(() => {
decideBtn.classList.remove('animate-pulse');
}, 500);
});
});