Counter

tsc script.ts

HTML Class + id

npm install -g typescript

tsc script.ts

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

  if (!countElement || !incrementButton || !decrementButton) {
    console.error("Some elements are missing");
    return;
  }

  let count: number = 1;

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

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

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

  updateCount();
});

HTML CounterCSS counterJS Counter

Multiple Counters

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

  const createCounter = (): HTMLElement => {
    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.toString();
    };

    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);
});

HTML CounterCSS counterJS Counter