課題1完了報告

見出し

課題１完了

講義を終えて実践課題が完成しました。
講義動画を何度も見直し、記事も読んだりし、時間はかかりながらもできた時には達成感がありました。
正直このコードであっているのはまだ不安はあります、笑
動くからこれでいいのかな、？という感じ

実際のコード🔻

import React, { useState } from "react";

// const records = [
//   { title: "勉強の記録1", time: 1 },
//   { title: "勉強の記録2", time: 3 },
//   { title: "勉強の記録3", time: 5 },
// ];

function App() {
  const [records, setRecords] = useState<{ title: string; time: number }[]>([]);
  const [studyContent, setStudyContent] = useState("");
  const [studyTime, setStudyTime] = useState(0);
  const [error, setError] = useState("");

  const handleContentChange = (e) => {
    setStudyContent(e.target.value);
  };

  const handleTimeChange = (e) => {
    setStudyTime(parseFloat(e.target.value));
  };

  const handleAdd = () => {
    if (!studyContent || studyTime <= 0) {
      setError("入力されている項目がありません");
      return;
    } // 空入力のガード

    setRecords([...records, { title: studyContent, time: studyTime }]);
    setStudyContent("");
    setStudyTime(0);
    setError("");
  };

  const totalStudyTime = records.reduce(
    (total, record) => total + record.time,
    0
  );

  return (
    <div>
      <h1>学習記録一覧</h1>
      <div>
        <labal>学習内容：</labal>
        <input
          type="text"
          step="0.1"
          value={studyContent}
          onChange={handleContentChange}
        />
      </div>
      <div>
        <lable>学習時間：</lable>
        <input type="number" value={studyTime} onChange={handleTimeChange} />
      </div>

      <button onClick={handleAdd}>登録</button>
      {error && <p style={{ color: "red" }}>{error}</p>}

      <p>入力されている学習内容：{studyContent}</p>
      <p>入力されている学習時間: {isNaN(studyTime) ? 0 : studyTime} 時間</p>

      <ul>
        {records.map((record, index) => (
          <li key={index}>
            {record.title}:{record.time}時間
          </li>
        ))}
      </ul>
      <labal>合計学習時間</labal>
      <p>{totalStudyTime}/1000 (h)</p>
    </div>
  );
}

export default App;

やっぱりやりながら学ぶのが一番早い
手を動かしてとは指導してくださっている方に言われていたのですが本当にその通りだと実感しました。

すぐ鬼門だという課題2に取り組みたいと思います！