<!DOCTYPE html>
<html>
<head>
<title>JavaScript Interactive Demo</title>
<style>
/* Custom CSS for the button and message */
.container {
text-align: center;
padding: 50px;
}
.output {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h1>JavaScript Interactive Demo</h1>
<p>Click the button to change the background color:</p>
<!-- Button to Trigger JavaScript Function -->
<button id="changeColorBtn">Change Color</button>
<!-- Message Display -->
<p class="output"></p>
</div>
<script>
// JavaScript to change the background color and display a message
const changeColorBtn = document.getElementById('changeColorBtn');
const output = document.querySelector('.output');
const colors = [
"#0074d9","#ff4136","#2ecc40","#ff851b",
"#7fdbff","#f012be","#01ff70","#85144b",
"#3d9970","#b10dc9","#39cccc","#ffdc00",
"#ff5714","#8e44ad","#d35400","#3498db",
"#ff6d00","#2c3e50","#e74c3c","#1abc9c",
"#f39c12","#9b59b6","#e67e22","#34495e",
"#e74c3c","#2ecc71","#e6ee22","#3498db",
"#d35400","#1abc9c","#f39c12","#9b59b6",
];
changeColorBtn.addEventListener('click', () => {
// Generate a random color from the array
const randomColor = colors[Math.floor(Math.random() * colors.length)];
// Change the background color
document.body.style.backgroundColor = randomColor;
// Display a message
output.textContent = `Background color changed to ${randomColor}.`;
});
</script>
</body>
</html>