Timer

React JS

App

import "./index.css";

function App() {
  return (
    <div className="App">
      <Timer />
    </div>
  );
}

export default App;

Timer

const Timer = () => {
  const [minutes, setMinutes] = useState("");
  const [timeLeft, setTimeLeft] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    let timerInterval;

    if (isRunning && timeLeft > 0) {
      timerInterval = setInterval(() => {
        setTimeLeft((prevTime) => prevTime - 1);
      }, 1000);
    } else if (timeLeft === 0 && isRunning) {
      setIsRunning(false);
    }

    return () => clearInterval(timerInterval);
  }, [isRunning, timeLeft]);

  const startTimer = () => {
    const minutesValue = parseInt(minutes);
    if (isNaN(minutesValue) || minutesValue <= 0) {
      alert("Please enter a valid positive number of minutes.");
      return;
    }

    if (isRunning) {
      setIsRunning(false);
      setTimeLeft(0);
    }

    setTimeLeft(minutesValue * 60);
    setIsRunning(true);
  };

  const stopTimer = () => {
    setIsRunning(false);
    setTimeLeft(0);
  };

  const formatTime = (time) => {
    const minutes = Math.floor(time / 60);
    const seconds = time % 60;
    return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
  };

  return (
    <div id="app">
      {!isRunning ? (
        <div id="timer-input">
          <label htmlFor="minutes">Set Timer (minutes):</label>
          <input
            type="number"
            id="minutes"
            value={minutes}
            onChange={(e) => setMinutes(e.target.value)}
            min="1"
            placeholder="Enter minutes"
          />
          <button onClick={startTimer}>Start</button>
        </div>
      ) : (
        <div id="timer-display">
          <div id="time-left">{formatTime(timeLeft)}</div>
          <button onClick={stopTimer}>Stop</button>
        </div>
      )}
    </div>
  );
};

CSS Timer

React TS

App

import "./index.css";

function App() {
  return (
    <div className="App">
      <Timer />
    </div>
  );
}

export default App;

Timer

import React, { useState, useEffect } from "react";
import "./styles.css"; // Подключаем существующий CSS файл

const Timer: React.FC = () => {
  const [minutes, setMinutes] = useState<string>("");
  const [timeLeft, setTimeLeft] = useState<number>(0);
  const [isRunning, setIsRunning] = useState<boolean>(false);

  useEffect(() => {
    let timerInterval: NodeJS.Timeout;

    if (isRunning && timeLeft > 0) {
      timerInterval = setInterval(() => {
        setTimeLeft((prevTime) => prevTime - 1);
      }, 1000);
    } else if (timeLeft === 0 && isRunning) {
      setIsRunning(false);
    }

    return () => clearInterval(timerInterval);
  }, [isRunning, timeLeft]);

  const startTimer = () => {
    const minutesValue = parseInt(minutes);
    if (isNaN(minutesValue) || minutesValue <= 0) {
      alert("Please enter a valid positive number of minutes.");
      return;
    }

    if (isRunning) {
      setIsRunning(false);
      setTimeLeft(0);
    }

    setTimeLeft(minutesValue * 60);
    setIsRunning(true);
  };

  const stopTimer = () => {
    setIsRunning(false);
    setTimeLeft(0);
  };

  const formatTime = (time: number) => {
    const minutes = Math.floor(time / 60);
    const seconds = time % 60;
    return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
  };

  return (
    <div id="app">
      {!isRunning ? (
        <div id="timer-input">
          <label htmlFor="minutes">Set Timer (minutes):</label>
          <input
            type="number"
            id="minutes"
            value={minutes}
            onChange={(e) => setMinutes(e.target.value)}
            min="1"
            placeholder="Enter minutes"
          />
          <button onClick={startTimer}>Start</button>
        </div>
      ) : (
        <div id="timer-display">
          <div id="time-left">{formatTime(timeLeft)}</div>
          <button onClick={stopTimer}>Stop</button>
        </div>
      )}
    </div>
  );
};

export default Timer;

CSS Timer

React JS + Tailwind

App

import "./index.css";

function App() {
  return (
    <div className="App">
      <Timer />
    </div>
  );
}

export default App;

Timer

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

const Timer = () => {
  const [minutes, setMinutes] = useState("");
  const [timeLeft, setTimeLeft] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    let timerInterval;

    if (isRunning && timeLeft > 0) {
      timerInterval = setInterval(() => {
        setTimeLeft((prevTime) => prevTime - 1);
      }, 1000);
    } else if (timeLeft === 0 && isRunning) {
      setIsRunning(false);
    }

    return () => clearInterval(timerInterval);
  }, [isRunning, timeLeft]);

  const startTimer = () => {
    const minutesValue = parseInt(minutes);
    if (isNaN(minutesValue) || minutesValue <= 0) {
      alert("Please enter a valid positive number of minutes.");
      return;
    }

    if (isRunning) {
      setIsRunning(false);
      setTimeLeft(0);
    }

    setTimeLeft(minutesValue * 60);
    setIsRunning(true);
  };

  const stopTimer = () => {
    setIsRunning(false);
    setTimeLeft(0);
  };

  const formatTime = (time) => {
    const minutes = Math.floor(time / 60);
    const seconds = time % 60;
    return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
  };

  return (
    <div className="h-screen flex flex-col justify-center items-center bg-gray-900 text-white">
      {!isRunning ? (
        <div className="flex flex-col items-center gap-4">
          <label htmlFor="minutes" className="text-lg">
            Set Timer (minutes):
          </label>
          <input
            type="number"
            id="minutes"
            value={minutes}
            onChange={(e) => setMinutes(e.target.value)}
            min="1"
            placeholder="Enter minutes"
            className="text-black p-2 text-lg rounded"
          />
          <button
            onClick={startTimer}
            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
          >
            Start
          </button>
        </div>
      ) : (
        <div className="flex flex-col items-center gap-4">
          <div id="time-left" className="text-4xl font-bold">
            {formatTime(timeLeft)}
          </div>
          <button
            onClick={stopTimer}
            className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
          >
            Stop
          </button>
        </div>
      )}
    </div>
  );
};

export default Timer;

React TS + Tailwind

App

import "./index.css";

function App() {
  return (
    <div className="App">
      <Timer />
    </div>
  );
}

export default App;

Timer

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

const Timer: React.FC = () => {
  const [minutes, setMinutes] = useState<string>("");
  const [timeLeft, setTimeLeft] = useState<number>(0);
  const [isRunning, setIsRunning] = useState<boolean>(false);

  useEffect(() => {
    let timerInterval: NodeJS.Timeout;

    if (isRunning && timeLeft > 0) {
      timerInterval = setInterval(() => {
        setTimeLeft((prevTime) => prevTime - 1);
      }, 1000);
    } else if (timeLeft === 0 && isRunning) {
      setIsRunning(false);
    }

    return () => clearInterval(timerInterval);
  }, [isRunning, timeLeft]);

  const startTimer = () => {
    const minutesValue = parseInt(minutes);
    if (isNaN(minutesValue) || minutesValue <= 0) {
      alert("Please enter a valid positive number of minutes.");
      return;
    }

    if (isRunning) {
      setIsRunning(false);
      setTimeLeft(0);
    }

    setTimeLeft(minutesValue * 60);
    setIsRunning(true);
  };

  const stopTimer = () => {
    setIsRunning(false);
    setTimeLeft(0);
  };

  const formatTime = (time: number): string => {
    const minutes = Math.floor(time / 60);
    const seconds = time % 60;
    return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
  };

  return (
    <div className="h-screen flex flex-col justify-center items-center bg-gray-900 text-white">
      {!isRunning ? (
        <div className="flex flex-col items-center gap-4">
          <label htmlFor="minutes" className="text-lg">
            Set Timer (minutes):
          </label>
          <input
            type="number"
            id="minutes"
            value={minutes}
            onChange={(e) => setMinutes(e.target.value)}
            min="1"
            placeholder="Enter minutes"
            className="text-black p-2 text-lg rounded"
          />
          <button
            onClick={startTimer}
            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
          >
            Start
          </button>
        </div>
      ) : (
        <div className="flex flex-col items-center gap-4">
          <div id="time-left" className="text-4xl font-bold">
            {formatTime(timeLeft)}
          </div>
          <button
            onClick={stopTimer}
            className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
          >
            Stop
          </button>
        </div>
      )}
    </div>
  );
};

export default Timer;