React Todoアプリ作成

src/App.jsx

@@ -1,5 +1,62 @@
 import "./styles.css";
+import React, { useState } from "react";
+import { InputTodo } from "./components/InputTodo";
+import { IncompleteTodos } from "./components/IncompleteTodos";
+import { CompleteTodos } from "./components/CompleteTodos";
 
 export const App = () => {
-  return <div></div>;
+  const [todoText, setTodoText] = useState("");
+
+  const [incompleteTodos, setIncompleteTodos] = useState([]);
+
+  const [completeTodos, setCompleteTodos] = useState([]);
+
+  const onChangeTodoText = (event) => setTodoText(event.target.value);
+
+  const onClickAdd = () => {
+    if (todoText === "") return;
+    const newTodos = [...incompleteTodos, todoText];
+    setIncompleteTodos(newTodos);
+    setTodoText("");
+  };
+
+  const onClickDelete = (index) => {
+    const newTodos = [...incompleteTodos];
+    newTodos.splice(index, 1);
+    setIncompleteTodos(newTodos);
+  };
+
+  const onClickComplete = (index) => {
+    const newIncompleteTodos = [...incompleteTodos];
+    newIncompleteTodos.splice(index, 1);
+    setIncompleteTodos(newIncompleteTodos);
+
+    const newCompleteTodos = [...completeTodos, incompleteTodos[index]];
+    setCompleteTodos(newCompleteTodos);
+  };
+
+  const onClickBack = (index) => {
+    const newCompleteTodos = [...completeTodos];
+    newCompleteTodos.splice(index, 1);
+    setCompleteTodos(newCompleteTodos);
+
+    const newIncompleteTodos = [...incompleteTodos, completeTodos[index]];
+    setIncompleteTodos(newIncompleteTodos);
+  };
+
+  return (
+    <>
+      <InputTodo
+        todoText={todoText}
+        onChange={onChangeTodoText}
+        onClick={onClickAdd}
+      />
+      <IncompleteTodos
+        todos={incompleteTodos}
+        onClickComplete={onClickComplete}
+        onClickDelete={onClickDelete}
+      />
+      <CompleteTodos todos={completeTodos} onClickBack={onClickBack} />
+    </>
+  );
 };

src/components/CompleteTodos.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+export const CompleteTodos = (props) => {
+  const { todos, onClickBack } = props;
+
+  return (
+    <div className="complete-area">
+      <p className="title">完了のTODO</p>
+      <ul>
+        {todos.map((todo, index) => {
+          return (
+            <div key={todo} className="list-row">
+              <li>{todo}</li>
+              <button onClick={() => onClickBack(index)}>戻す</button>
+            </div>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};

src/components/IncompleteTodos.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export const IncompleteTodos = (props) => {
+  const { todos, onClickComplete, onClickDelete } = props;
+
+  return (
+    <div className="incomplete-area">
+      <p className="title">未完了のTODO</p>
+      <ul>
+        {todos.map((todo, index) => {
+          return (
+            <div key={todo} className="list-row">
+              <li>{todo}</li>
+              <button onClick={() => onClickComplete(index)}>完了</button>
+              <button onClick={() => onClickDelete(index)}>削除</button>
+            </div>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};

src/components/InputTodo.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const InputTodo = (props) => {
+  const { todoText, onChange, onClick } = props;
+
+  return (
+    <div className="input-area">
+      <input placeholder="TODOを入力" value={todoText} onChange={onChange} />
+      <button onClick={onClick}>追加</button>
+    </div>
+  );
+};

src/styles.css

@@ -0,0 +1,66 @@
+body {
+  font-family: sans-serif;
+}
+
+input {
+  border-radius: 16px;
+  border: none;
+  padding: 6px 16px;
+  outline: none;
+}
+
+button {
+  border-radius: 16px;
+  border: none;
+  padding: 4px 16px;
+}
+
+button:hover {
+  background-color: #ff7fff;
+  color: #fff;
+  cursor: pointer;
+}
+
+li {
+  margin-right: 8px;
+}
+
+.input-area {
+  background-color: #c1ffff;
+  width: 400px;
+  height: 30px;
+  border-radius: 8px;
+  padding: 8px;
+  margin: 8px;
+}
+
+.incomplete-area {
+  background-color: #c6ffe2;
+  width: 400px;
+  min-height: 200px;
+  padding: 8px;
+  margin: 8px;
+  border-radius: 8px;
+}
+
+.complete-area {
+  background-color: #ffffe0;
+  width: 400px;
+  min-height: 200px;
+  padding: 8px;
+  margin: 8px;
+  border-radius: 8px;
+}
+
+.title {
+  text-align: center;
+  margin-top: 0;
+  font-weight: bold;
+  color: #666;
+}
+
+.list-row {
+  display: flex;
+  align-items: center;
+  padding-bottom: 4px;
+}