todo.jsx

import "./App.css"
import { useState } from "react"

function App() {
  const [todoText, setTodoText] = useState("")
  const [todoList, setTodoList] = useState([
    { value: "do homework", isChecked: false },
    { value: "watch a movie", isChecked: true },
    { value: "make bed", isChecked: true }
  ])

  /*
  - Add todo
  - reset input
  - Completed state
  - Delete todo

  STATE:

  - input
  - todo list
  - completed
  */

  const todos = todoList.map((item, itemIndex) => {
    return (
      <li key={itemIndex} className={item.isChecked ? "completed-todo" : ""}>
        <span className="todo-text">{item.value}</span>
        <button>Check</button>
        <button>Delete</button>
      </li>
    )
  })

  const addTodo = () => {
    const newTodo = { value: todoText, isChecked: false }

    setTodoList([...todoList, newTodo])
    setTodoText("")
  }

  return (
    <div style={{ fontFamily: "sans-serif" }}>
      <h1>Todos</h1>
      <input
        value={todoText}
        onChange={(event) => setTodoText(event.target.value)}
        type="text"
        placeholder="Type something..."
      />
      <button onClick={addTodo}>Add</button>
      <ul>{todos}</ul>
    </div>
  )
}

export default App