Countdown Timer to specific date in ReactJs

Question

I am new in React so I need a help.

So my timer works. But I need a countdown from current date until a certain date (in my situation till 15.07.2022 at 18:00) so I need days, hours, minutes and second till this event. For now I only manually added the numbers. How to implement that, maybe to use Date()? Here is my code:

const Timer = () => {
const [minutes, setMinutes] = useState(30);
const [seconds, setSeconds] = useState(60);
useEffect(() => {
  let myInterval = setInterval(() => {
    if (seconds > 0) {
      setSeconds(seconds - 1);
    }
    if (seconds === 0) {
      if (minutes === 0) {
        clearInterval(myInterval);
      } else {
        setMinutes(minutes - 1);
        setSeconds(59);
      }
    }
  }, 1000);
  return () => {
    clearInterval(myInterval);
  };
});

return (
  <Box
  >
    <Box
    >
      <Box display="flex" flexDirection={'column'} alignItems={'center'}>
        <Typography
          variant={'h3'}
        >
          13
        </Typography>
        <Typography
        >
          Days
        </Typography>
      </Box>
      <Box display="flex" flexDirection={'column'} alignItems={'center'}>
        <Typography
          variant={'h3'}
        >
          09
        </Typography>
        <Typography
        >
          Hours
        </Typography>
      </Box>
      <Box display="flex" flexDirection={'column'} alignItems={'center'}>
        <Typography
          variant={'h3'}
        >
          {minutes}
        </Typography>
        <Typography
        >
          Minute
        </Typography>
      </Box>
      <Box display="flex" flexDirection={'column'} alignItems={'center'}>
        <Typography
          variant={'h3'}
        >
          {seconds}
        </Typography>
        <Typography
        >
          Seconds
        </Typography>
      </Box>
    </Box>
  </Box>

);

};

Thank you all :) I really appreciated your help :)

IceMan · Accepted Answer · 2022-04-12 11:20:20Z

2

You could create a date object and read the values you need from it.

const date = new Date();

console.log("date is: ", date);

const dateObject = {
    year: date.getFullYear(),
    month: date.toLocaleString("en-US", { month: "long" }),
    day: date.getDate(),
    hours: date.getHours(),
    minutes: date.getMinutes(),
    seconds: date.getSeconds(),
}

console.log("print month value: ", dateObject.month);
console.log("print all object values: ", dateObject);

answered Apr 12, 2022 at 11:20

IceMan

364 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jrswgtr · Accepted Answer · 2022-04-12 11:51:22Z

I solve it

const [expiryTime, setExpiryTime] = useState("15 jul 2022 18:00:00");
const [countdownTime, setCountdownTime] = useState({
  countdownDays: "",
  countdownHours: "",
  countdownlMinutes: "",
  countdownSeconds: "",
});

const countdownTimer = () => {
  const timeInterval = setInterval(() => {
    const countdownDateTime = new Date(expiryTime).getTime();
    const currentTime = new Date().getTime();
    const remainingDayTime = countdownDateTime - currentTime;
    const totalDays = Math.floor(remainingDayTime / (1000 * 60 * 60 * 24));
    const totalHours = Math.floor(
      (remainingDayTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    const totalMinutes = Math.floor(
      (remainingDayTime % (1000 * 60 * 60)) / (1000 * 60)
    );
    const totalSeconds = Math.floor(
      (remainingDayTime % (1000 * 60)) / 1000
    );

    const runningCountdownTime = {
      countdownDays: totalDays,
      countdownHours: totalHours,
      countdownMinutes: totalMinutes,
      countdownSeconds: totalSeconds,
    };

    setCountdownTime(runningCountdownTime);

    if (remainingDayTime < 0) {
      clearInterval(timeInterval);
      setExpiryTime(false);
    }
  }, 1000);
};

useEffect(() => {
  countdownTimer();
});

Collectives™ on Stack Overflow

Countdown Timer to specific date in ReactJs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related