let startTime, endTime, clicks = 0, cps = 0;
let intervalId, timeoutId;

document.getElementById('start-button').addEventListener('click', startTest);

function startTest() {
  document.getElementById('start-button').classList.add('active');
  document.getElementById('start-button').innerHTML = '0';
  startTime = new Date().getTime();
  intervalId = setInterval(updateCounter, 1000);
  timeoutId = setTimeout(endTest, 15000);
  document.addEventListener('click', countClick);
}

function countClick() {
  clicks++;
  document.getElementById('start-button').innerHTML = clicks;
}

function updateCounter() {
  cps = Math.round((clicks / ((new Date().getTime() - startTime) / 1000)) * 100) / 100;
  document.getElementById('cps-display').innerHTML = `Clicks Per Second: ${cps}`;
  document.getElementById('timer').innerHTML = `Time remaining: ${Math.ceil((15000 - (new Date().getTime() - startTime)) / 1000)} seconds`;
}

function endTest() {
  clearInterval(intervalId);
  clearTimeout(timeoutId);
  document.removeEventListener('click', countClick);
  document.getElementById('cps-display').innerHTML = `Your Clicks Per Second: ${cps}`;
  document.getElementById('timer').innerHTML = '';
  document.getElementById('start-button').innerHTML = 'Start';
  document.getElementById('start-button').classList.remove('active');
}