Microsoft CopilotとReactを使って年日時で表示するカウントダウンアプリを作ってみた。

import React, { useState, useEffect } from "react";
import { CurrentTime } from "./CurrentTime";
import { Countdown } from "./Countdown";

export const Timer = () => {
  const [time, setTime] = useState(new Date());
  const [inputDateTime, setInputDateTime] = useState("");
  const [difference, setDifference] = useState(null);
  const [showDifference, setShowDifference] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
      if (showDifference && inputDateTime) {
        const targetTime = new Date(inputDateTime);
        const diff = Math.max(targetTime.getTime() - new Date().getTime(), 0);
        setDifference(diff);
        if (
          targetTime.getFullYear() === new Date().getFullYear() &&
          targetTime.getMonth() === new Date().getMonth() &&
          targetTime.getDate() === new Date().getDate() &&
          targetTime.getHours() === new Date().getHours() &&
          targetTime.getMinutes() === new Date().getMinutes() &&
          targetTime.getSeconds() === new Date().getSeconds()
        ) {
          setTimeout(alertAndReset, 1000);
        }
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [showDifference, inputDateTime]);

  const handleDateTimeChange = (event) => {
    setInputDateTime(event.target.value);
  };

  const isValidDate = (dateString) => {
    const date = new Date(dateString);
    const [year, month, day] = dateString.split("T")[0].split("-");
    return (
      date.getFullYear() === parseInt(year) &&
      date.getMonth() + 1 === parseInt(month) &&
      date.getDate() === parseInt(day)
    );
  };

  const calculateDifference = () => {
    if (inputDateTime && isValidDate(inputDateTime)) {
      const targetTime = new Date(inputDateTime);
      const now = new Date();
      if (targetTime <= now) {
        alertAndResetFuture();
      } else {
        const diff = Math.max(targetTime.getTime() - now.getTime(), 0);
        setDifference(diff);
        setShowDifference(true);
      }
    } else {
      alert("正しい日時を指定してください。");
    }
  };

  const alertAndReset = () => {
    alert("指定した日時になりました。");
    resetTimer();
  };

  const alertAndResetFuture = () => {
    alert("未来の日時を指定してください。");
    resetTimer();
  };

  const resetTimer = () => {
    setInputDateTime("");
    setDifference(null);
    setShowDifference(false);
  };

  return (
    <div className="compWrap">
      <div className="setWrap">
        <CurrentTime time={time} />
        <Countdown
          inputDateTime={inputDateTime}
          handleDateTimeChange={handleDateTimeChange}
          calculateDifference={calculateDifference}
          resetTimer={resetTimer}
          showDifference={showDifference}
          difference={difference}
        />
      </div>
    </div>
  );
};

import React from "react";

export const CurrentTime = ({ time }) => {
  return (
    <div>
      <h1>カウントダウン</h1>
      <p>現在時刻</p>
      <p id="inputDate" className="inputElement">{`${time.getFullYear()}年${
        time.getMonth() + 1
      }月${time.getDate()}日 ${time.toLocaleTimeString()}`}</p>
    </div>
  );
};

import React from "react";

export const DateTimeInput = ({ inputDateTime, handleDateTimeChange }) => {
  return (
    <>
      <p>日時設定</p>
      <input
        id="setDate"
        className="inputElement"
        type="datetime-local"
        step="1"
        value={inputDateTime}
        onChange={handleDateTimeChange}
      />
    </>
  );
};

import React from "react";

export const CalculateButton = ({ calculateDifference }) => {
  return (
    <p className="setBtn" onClick={calculateDifference}>
      差を計算
    </p>
  );
};

import React from "react";

export const ResetButton = ({ resetTimer }) => {
  return (
    <p className="clearBtn" onClick={resetTimer}>
      リセット
    </p>
  );
};

import React from "react";
import { DateTimeInput } from "./DateTimeInput";
import { CalculateButton } from "./CalculateButton";
import { ResetButton } from "./ResetButton";

export const Countdown = ({
  inputDateTime,
  handleDateTimeChange,
  calculateDifference,
  resetTimer,
  showDifference,
  difference,
}) => {
  const formatTimeDifference = (diff) => {
    if (diff === 0) {
      return "0年0日0時間0分0秒";
    }
    const years = Math.floor(diff / (1000 * 60 * 60 * 24 * 365));
    const days = Math.floor(
      (diff % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24)
    );
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000 + 1); // 1秒追加
    return `${years}年${days}日${hours}時間${minutes}分${seconds}秒`;
  };

  return (
    <div>
      <DateTimeInput
        inputDateTime={inputDateTime}
        handleDateTimeChange={handleDateTimeChange}
      />
      <div className="btnsWrap">
        <CalculateButton calculateDifference={calculateDifference} />
        <ResetButton resetTimer={resetTimer} />
      </div>
      {showDifference && difference !== null && (
        <p>
          指定日時まで
          <br />
          <span className="inputElement">
            {formatTimeDifference(difference)}
          </span>
        </p>
      )}
    </div>
  );
};