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 | 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); | |
| }); | |
| }); |