File size: 3,880 Bytes
5b1edc9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | document.addEventListener('DOMContentLoaded', function() {
const funkyButton = document.getElementById('funky-button');
const surpriseContainer = document.getElementById('surprise-container');
const surpriseImage = document.getElementById('surprise-image');
const surpriseText = document.getElementById('surprise-text');
const buttonText = document.getElementById('button-text');
const confettiContainer = document.getElementById('confetti-container');
const counter = document.getElementById('counter');
const countDisplay = document.getElementById('count');
let count = 0;
const surprises = [
{
image: 'http://static.photos/nature/640x360/1',
text: 'Nature calls! 🌿',
color: 'bg-green-100'
},
{
image: 'http://static.photos/food/640x360/2',
text: 'Hungry yet? 🍕',
color: 'bg-yellow-100'
},
{
image: 'http://static.photos/travel/640x360/3',
text: 'Let\'s go on an adventure! ✈️',
color: 'bg-blue-100'
},
{
image: 'http://static.photos/technology/640x360/4',
text: 'Beep boop! 🤖',
color: 'bg-purple-100'
},
{
image: 'http://static.photos/abstract/640x360/5',
text: 'Trippy visuals! 🌈',
color: 'bg-pink-100'
}
];
function createConfetti() {
const colors = ['bg-green-500', 'bg-yellow-500', 'bg-red-500', 'bg-blue-500', 'bg-purple-500'];
for (let i = 0; i < 50; i++) {
const confetti = document.createElement('div');
confetti.classList.add('confetti', colors[Math.floor(Math.random() * colors.length)]);
confetti.style.left = `${Math.random() * 100}%`;
confetti.style.animationDelay = `${Math.random() * 0.5}s`;
confetti.style.width = `${Math.random() * 10 + 5}px`;
confetti.style.height = `${Math.random() * 10 + 5}px`;
confettiContainer.appendChild(confetti);
setTimeout(() => {
confetti.remove();
}, 3000);
}
}
function triggerSurprise() {
count++;
countDisplay.textContent = count;
counter.classList.remove('hidden');
// Random surprise
const randomSurprise = surprises[Math.floor(Math.random() * surprises.length)];
// Button animation
funkyButton.classList.add('animate-spin');
buttonText.textContent = 'Woohoo!';
// Show surprise after a delay
setTimeout(() => {
surpriseContainer.classList.remove('hidden');
surpriseImage.src = randomSurprise.image;
surpriseText.textContent = randomSurprise.text;
surpriseText.classList.remove('hidden');
surpriseContainer.classList.add(randomSurprise.color);
// Reset button
setTimeout(() => {
funkyButton.classList.remove('animate-spin');
buttonText.textContent = 'Again?';
funkyButton.classList.remove('bg-green-500', 'bg-green-600');
funkyButton.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
}, 1000);
}, 500);
createConfetti();
}
funkyButton.addEventListener('click', triggerSurprise);
// Easter egg for multiple clicks
let clickCount = 0;
const easterEggThreshold = 5;
funkyButton.addEventListener('click', () => {
clickCount++;
if (clickCount === easterEggThreshold) {
document.body.classList.add('bg-green-100');
setTimeout(() => {
document.body.classList.remove('bg-green-100');
}, 1000);
}
});
}); |