Counter

HTML Class + id

document.addEventListener("DOMContentLoaded", () => {
  const countElement = document.getElementById("count");
  const incrementButton = document.getElementById("increment");
  const decrementButton = document.getElementById("decrement");

  let count = 1;

  const updateCount = () => {
    countElement.textContent = count;
  };

  incrementButton.addEventListener("click", () => {
    count++;
    updateCount();
  });

  decrementButton.addEventListener("click", () => {
    count--;
    updateCount();
  });

  updateCount();
});

HTML CounterCSS CounterTS Counter

Multiple Counters

document.addEventListener("DOMContentLoaded", () => {
  const countersContainer = document.getElementById("counters");
  const generateButton = document.querySelector(".generate-button");
  const counterInput = document.querySelector(".counter-input");

  const createCounter = () => {
    const counter = document.createElement("div");
    counter.className = "counter";

    const decrementButton = document.createElement("button");
    decrementButton.className = "decrement";
    decrementButton.textContent = "-";

    const countElement = document.createElement("span");
    countElement.className = "count";
    countElement.textContent = "1";

    const incrementButton = document.createElement("button");
    incrementButton.className = "increment";
    incrementButton.textContent = "+";

    counter.appendChild(decrementButton);
    counter.appendChild(countElement);
    counter.appendChild(incrementButton);

    let count = 1;

    const updateCount = () => {
      countElement.textContent = count;
    };

    incrementButton.addEventListener("click", () => {
      count++;
      updateCount();
    });

    decrementButton.addEventListener("click", () => {
      count--;
      updateCount();
    });

    return counter;
  };

  const generateCounters = () => {
    countersContainer.innerHTML = "";
    const numberOfCounters = parseInt(counterInput.value, 10);

    for (let i = 0; i < numberOfCounters; i++) {
      const counter = createCounter();
      countersContainer.appendChild(counter);
    }
  };

  generateButton.addEventListener("click", generateCounters);
});

CSS Counter