.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
margin-top: 20px;
}
button:hover {
background-color: #45a049;
}
#factDisplay {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
document.getElementById('generateFactButton').addEventListener('click', function() {
const randomIndex = Math.floor(Math.random() * crocodileFacts.length);
const randomFact = crocodileFacts[randomIndex];
document.getElementById('factDisplay').textContent = randomFact;
});
</script>