HTML

<div class="box" id="myBox"> Click Me! </div>

CSS

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .box { padding: 20px; background: tomato; color: white; font-family: sans-serif; font-weight: bold; cursor: pointer; border-radius: 8px; transition: transform 0.2s; } .box:active { transform: scale(0.9); }

JavaScript

const box = document.getElementById('myBox'); box.addEventListener('click', () => { const colors = ['tomato', 'dodgerblue', 'mediumseagreen', 'gold']; const randomColor = colors[Math.floor(Math.random() * colors.length)]; box.style.backgroundColor = randomColor; });