basic todo list complete

src/components/ToDoCards.jsx

@@ -1,6 +1,27 @@
-function TodoCards() {
+import TodoCard from "./TodoCard"
+
+function TodoCards( { tasks, setTasks } ) {
+
  return (<>
-
+ <div className="item-container">
+ <ul style={{padding: "0rem"}}>
+ {tasks.map((task, index) => (
+ <div key={index} style={{
+ background: task.completed ? "green" : "#f5f5f5",
+ color: task.completed && "#f5f5f5",
+ margin: "1rem",
+ padding: ".5rem",
+ listStyle: "none",
+ border: "1px solid",
+ borderRadius: "5px",
+ display: "flex",
+ justifyContent: "space-between"
+ }}>
+ <TodoCard task={task} index={index} tasks={tasks} setTasks={setTasks} />
+ </div>
+ ))}
+ </ul>
+ </div>
  </>)
 }
 

src/components/TodoCard.jsx

@@ -1,6 +1,28 @@
-function TodoCard() {
+import { FaCheck, FaTrash } from "react-icons/fa"
+
+
+function TodoCard( { task, index, tasks, setTasks } ) {
+
+ const doneTask = (item) => {
+ const updatedTasks = [...tasks]
+ updatedTasks[item].completed = true
+ setTasks(updatedTasks)
+ }
+
+ const deleteTask = (item) => {
+ const updatedTasks = [...tasks]
+ updatedTasks.splice(item, 1)
+ setTasks(updatedTasks)
+ }
+
  return (<>
-
+
+ <li>{task.name}</li>
+ <div className="buttons">
+ <button onClick={() => doneTask(index)}><FaCheck /></button>
+ <button onClick={() => deleteTask(index)}><FaTrash/></button>
+ </div>
+
  </>)
 }
 

src/components/TodoList.jsx

@@ -1,9 +1,10 @@
+import TodoCards from "./TodoCards"
 import { useState } from "react";
 
 function TodoList( { resetMenu } ) {
 
- const [newTask, setNewTask] = useState({name: "", completed: false})
  const [tasks, setTasks] = useState([])
+ const [newTask, setNewTask] = useState({name: "", completed: false})
 
  const addTask = (e) => {
  e.preventDefault()
@@ -16,43 +17,19 @@ function TodoList( { resetMenu } ) {
  e.target.parentElement.reset()
  }
 
- const doneTask = (taskIndex) => {
- const updatedTasks = [...tasks];
- updatedTasks[taskIndex].completed = true; 
- setTasks(updatedTasks);
- console.log(tasks)
- };
-
-
- const deleteTask = (taskToDelete) => {
- const updatedTasks = [...tasks]
- updatedTasks.splice(taskToDelete, 1)
- setTasks(updatedTasks)
- }
-
  return (<>
  <header>
  <h1 className="header-title">Todo List</h1>
  </header>
 
  <div className="input-container" style={{margin: "5rem 0 2rem"}}>
- <form action="" className="input-form">
- <input type="text" className="task-input" onChange={(e) => setNewTask({...newTask, name: e.target.value})} placeholder="Punch in new task..." />
- <button className="task-submit" onClick={addTask}>Submit Task</button>
+ <form action="">
+ <input type="text" onChange={(e) => setNewTask({name: e.target.value})} placeholder="Write task here..." />
+ <button onClick={addTask}>Submit</button>
  </form>
  </div>
 
- <div className="task-container">
- <ul>
- {tasks.map((task, index) => (
- <div key={index} style={{background: task.completed && "red"}}>
- <li>{task.name}</li>
- <button className="done-task" onClick={() => doneTask(index)}>Done</button>
- <button className="delete-task" onClick={() => deleteTask(index)}>Delete</button>
- </div>
- ))}
- </ul>
- </div>
+ <TodoCards tasks={tasks} setTasks={setTasks} />
 
  <div className="navigation" style={{display: "flex", justifyContent: "center"}}>
  <button className="menu-btn" onClick={() => resetMenu(null)}>Return to Menu</button>