Counter

React JS

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(1);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div className="counter-container">
      <h1>Counter App</h1>
      <div className="counter-controls">
        <button onClick={decrement}>-</button>
        <span>{count}</span>
        <button onClick={increment}>+</button>
      </div>
    </div>
  );
};

export default App;

React TS

import React, { useState } from "react";

const App: React.FC = () => {
  const [count, setCount] = useState<number>(1);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div className="counter-container">
      <h1>Counter App</h1>
      <div className="counter-controls">
        <button onClick={decrement}>-</button>
        <span>{count}</span>
        <button onClick={increment}>+</button>
      </div>
    </div>
  );
};

export default App;

CSS Counter

React JS + Tailwind

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(1);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <h1 className="text-2xl mb-4">Counter App</h1>
      <div className="flex items-center space-x-4">
        <button
          className="bg-red-500 text-white px-4 py-2 rounded"
          onClick={decrement}
        >
          -
        </button>
        <span className="text-xl">{count}</span>
        <button
          className="bg-green-500 text-white px-4 py-2 rounded"
          onClick={increment}
        >
          +
        </button>
      </div>
    </div>
  );
};

export default App;

React TS + Tailwind

import React, { useState } from "react";

const App: React.FC = () => {
  const [count, setCount] = useState<number>(1);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <h1 className="text-2xl mb-4">Counter App</h1>
      <div className="flex items-center space-x-4">
        <button
          className="bg-red-500 text-white px-4 py-2 rounded"
          onClick={decrement}
        >
          -
        </button>
        <span className="text-xl">{count}</span>
        <button
          className="bg-green-500 text-white px-4 py-2 rounded"
          onClick={increment}
        >
          +
        </button>
      </div>
    </div>
  );
};

export default App;

Tailwind init

React JS Multiple Counters

import React, { useState } from "react";
import "./index.css";

const App = () => {
  const [counters, setCounters] = useState([]);

  const generateCounters = () => {
    const numberOfCounters = parseInt(
      document.querySelector(".counter-input").value,
      10,
    );
    setCounters(Array(numberOfCounters).fill(1));
  };

  const increment = (index) => {
    const newCounters = [...counters];
    newCounters[index]++;
    setCounters(newCounters);
  };

  const decrement = (index) => {
    const newCounters = [...counters];
    newCounters[index]--;
    setCounters(newCounters);
  };

  return (
    <div className="counters-container">
      <h1>Multiple Counters</h1>
      <input
        type="number"
        className="counter-input"
        placeholder="Enter number of counters"
        min="1"
      />
      <button className="generate-button" onClick={generateCounters}>
        Generate Counters
      </button>
      <div id="counters">
        {counters.map((count, index) => (
          <div className="counter" key={index}>
            <button onClick={() => decrement(index)}>-</button>
            <span>{count}</span>
            <button onClick={() => increment(index)}>+</button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;

React TS Multiple Counters

import React, { useState, ChangeEvent } from "react";
import "./index.css";

const App: React.FC = () => {
  const [counters, setCounters] = useState<number[]>([]);
  const [inputValue, setInputValue] = useState<string>("");

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };

  const generateCounters = () => {
    const numberOfCounters = parseInt(inputValue, 10);
    if (!isNaN(numberOfCounters)) {
      setCounters(Array(numberOfCounters).fill(1));
    }
  };

  const increment = (index: number) => {
    const newCounters = [...counters];
    newCounters[index]++;
    setCounters(newCounters);
  };

  const decrement = (index: number) => {
    const newCounters = [...counters];
    newCounters[index]--;
    setCounters(newCounters);
  };

  return (
    <div className="counters-container">
      <h1>Multiple Counters</h1>
      <input
        type="number"
        className="counter-input"
        placeholder="Enter number of counters"
        value={inputValue}
        onChange={handleInputChange}
        min="1"
      />
      <button className="generate-button" onClick={generateCounters}>
        Generate Counters
      </button>
      <div id="counters">
        {counters.map((count, index) => (
          <div className="counter" key={index}>
            <button onClick={() => decrement(index)}>-</button>
            <span>{count}</span>
            <button onClick={() => increment(index)}>+</button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;

CSS counter

React JS Multiple Counters + Tailwind

import React, { useState } from "react";

const App = () => {
  const [counters, setCounters] = useState([]);
  const [inputValue, setInputValue] = useState("");

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const generateCounters = () => {
    const numberOfCounters = parseInt(inputValue, 10);
    if (!isNaN(numberOfCounters)) {
      setCounters(Array(numberOfCounters).fill(1));
    }
  };

  const increment = (index) => {
    const newCounters = [...counters];
    newCounters[index]++;
    setCounters(newCounters);
  };

  const decrement = (index) => {
    const newCounters = [...counters];
    newCounters[index]--;
    setCounters(newCounters);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <div className="bg-white p-8 rounded-lg shadow-md w-80">
        <h1 className="text-xl font-bold mb-4">Multiple Counters</h1>
        <input
          type="number"
          className="w-full p-2 mb-4 border rounded"
          placeholder="Enter number of counters"
          value={inputValue}
          onChange={handleInputChange}
          min="1"
        />
        <button
          className="w-full p-2 bg-blue-500 text-white rounded mb-4 hover:bg-blue-600"
          onClick={generateCounters}
        >
          Generate Counters
        </button>
        <div id="counters" className="flex flex-col items-center space-y-4">
          {counters.map((count, index) => (
            <div className="flex items-center space-x-4" key={index}>
              <button
                className="w-10 h-10 bg-blue-500 text-white rounded hover:bg-blue-600"
                onClick={() => decrement(index)}
              >
                -
              </button>
              <span className="text-lg">{count}</span>
              <button
                className="w-10 h-10 bg-blue-500 text-white rounded hover:bg-blue-600"
                onClick={() => increment(index)}
              >
                +
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default App;

React TS Multiple Counters + Tailwind

import React, { useState, ChangeEvent } from "react";

const App: React.FC = () => {
  const [counters, setCounters] = useState<number[]>([]);
  const [inputValue, setInputValue] = useState<string>("");

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };

  const generateCounters = () => {
    const numberOfCounters = parseInt(inputValue, 10);
    if (!isNaN(numberOfCounters)) {
      setCounters(Array(numberOfCounters).fill(1));
    }
  };

  const increment = (index: number) => {
    const newCounters = [...counters];
    newCounters[index]++;
    setCounters(newCounters);
  };

  const decrement = (index: number) => {
    const newCounters = [...counters];
    newCounters[index]--;
    setCounters(newCounters);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <div className="bg-white p-8 rounded-lg shadow-md w-80">
        <h1 className="text-xl font-bold mb-4">Multiple Counters</h1>
        <input
          type="number"
          className="w-full p-2 mb-4 border rounded"
          placeholder="Enter number of counters"
          value={inputValue}
          onChange={handleInputChange}
          min="1"
        />
        <button
          className="w-full p-2 bg-blue-500 text-white rounded mb-4 hover:bg-blue-600"
          onClick={generateCounters}
        >
          Generate Counters
        </button>
        <div id="counters" className="flex flex-col items-center space-y-4">
          {counters.map((count, index) => (
            <div className="flex items-center space-x-4" key={index}>
              <button
                className="w-10 h-10 bg-blue-500 text-white rounded hover:bg-blue-600"
                onClick={() => decrement(index)}
              >
                -
              </button>
              <span className="text-lg">{count}</span>
              <button
                className="w-10 h-10 bg-blue-500 text-white rounded hover:bg-blue-600"
                onClick={() => increment(index)}
              >
                +
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default App;