body {
    transition: background-color 0.5s ease;
    margin: 0;
    height: 100vh;
}

function changeBackground() {
  const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  document.body.style.backgroundColor = randomColor;
}
document.body.addEventListener('click', changeBackground);

.particle {
    position: absolute;
    background-color: #3498db;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: explode 1s linear;}
@keyframes explode { to { transform: scale(2); opacity: 0; }}

document.addEventListener("mousedown", (e) => e.preventDefault());
document.addEventListener("click", (e) => {
  const p = document.createElement("div");
  Object.assign(p.style, { left: `${e.clientX}px`, top: `${e.clientY}px` });
  p.className = "particle";
  document.body.appendChild(p);
  setTimeout(() => p.remove(), 1000); });

<div id="counter">0</div>

body {text-align: center; font-family: 'Segoe UI';}
#counter {
    font-size: 2.5em;
    cursor: pointer;
    padding: 10px 30px;
    border: 2px solid #3498db;
    border-radius: 10px;
    transition: background-color 0.3s;
    user-select: none;
    display: inline-block;
    color: #3498db;
}
#counter:hover {background-color: #3498db;color: #fff;}

let count = 0;
const counterElement = document.getElementById('counter');
counterElement.addEventListener('click', function() {
    count++;
    counterElement.textContent = count;
});