document.addEventListener("DOMContentLoaded", function() { // --- YOUR FACTS --- const facts = [ "A group of flamingos is called a 'flamboyance'.", "Octopuses have three hearts.", "Cows have best friends and get stressed when separated.", "The fingerprints of a koala are so indistinguishable from humans that they have on occasion been confused at a crime scene.", "Sloths can hold their breath longer than dolphins can (up to 40 minutes).", "Wombat poop is cube-shaped.", "A shrimp's heart is located in its head.", "Elephants are the only animal that can't jump.", "A rhinoceros' horn is made of hair.", "It takes a sloth two weeks to digest its food." ]; const button = document.getElementById('fact-btn'); // If we found the button, set everything up if (button) { // 1. Create the container for the text automatically (using Javascript) const factBox = document.createElement('div'); // 2. Style it to look like Windows XP text factBox.style.marginTop = "15px"; factBox.style.padding = "10px"; factBox.style.backgroundColor = "#FFFFFF"; factBox.style.border = "2px solid #7F9DB9"; // XP Blue Border factBox.style.fontFamily = "Tahoma, Arial, sans-serif"; factBox.style.color = "#000000"; factBox.style.fontSize = "14px"; factBox.style.display = "none"; // Hide it until clicked // 3. Insert it into the page right after the button button.parentNode.insertBefore(factBox, button.nextSibling); // 4. The Click Logic button.addEventListener('click', function(e) { e.preventDefault(); // Pick random fact const randomIndex = Math.floor(Math.random() * facts.length); // Show the box and put text inside factBox.style.display = "block"; factBox.innerText = facts[randomIndex]; }); } else { console.log("Error: Button with ID 'fact-btn' not found."); } });
