Add files via upload

completed without errormodal

Author: yunusorak

todo-list/src/UI/Card.jsx

@@ -0,0 +1,9 @@
+const Card = (props) => {
+ return (
+ <>
+ <div className={`${props.className}`}>{props.children}</div>
+ </>
+ );
+};
+
+export default Card;

todo-list/src/UI/Todo.jsx

@@ -1,33 +1,70 @@
-const Todo = () => {
- return (
- <div className="h-100 w-full flex items-center justify-center bg-teal-lightest font-sans">
- <div className="bg-white rounded shadow p-6 m-4 w-full lg:w-3/4 lg:max-w-lg">
- <div className="flex mb-4 items-center">
- <p className="w-full text-grey-darkest">
- Add another component to Tailwind Components
- </p>
- <button className="flex-no-shrink p-2 ml-4 mr-2 border-2 rounded hover:text-white text-green border-green hover:bg-green-600">
- Done
- </button>
- <button className="flex-no-shrink p-2 ml-2 border-2 rounded text-red border-red hover:text-white hover:bg-red-600">
- Remove
- </button>
- </div>
- <div className="flex mb-4 items-center">
- <p className="w-full line-through text-green">
- Submit Todo App Component to Tailwind Components
- </p>
+import { useState } from "react";
+
+const Todo = (props) => {
+ const todo = props.todo;
+ const [todoState, setTodoState] = useState(todo.state);
+
+ const deleteTodoHandler = (todoId) => {
+ console.log(todoId);
+ props.setTodos(() => props.todos.filter((todo) => todo.id !== todoId));
+ };
 
- <button className="flex-no-shrink p-2 ml-4 mr-2 border-2 rounded text-grey border-grey hover:text-white hover:bg-gray-400">
- Not Done
- </button>
+ return (
+ <>
+ <div className="flex mb-4 items-center">
+ <p
+ className={`w-full text-grey-darkest min-w-[280px] max-w-[280px] ${
+ todoState ? "line-through" : ""
+ }`}
+ >
+ {todo.todo}
+ </p>
+ <button
+ onClick={() => {
+ setTodoState((prevState) => {
+ return !prevState;
+ });
+ }}
+ className={`flex-no-shrink p-2 ml-4 mr-2 border-2 rounded hover:text-white text-green border-green hover:bg-green-600 ${
+ todoState ? "hidden" : "block"
+ }`}
+ >
+ Done
+ </button>
+ <button
+ onClick={() => {
+ setTodoState((prevState) => {
+ return !prevState;
+ });
+ }}
+ className={`flex-no-shrink p-2 ml-4 mr-2 border-2 rounded hover:text-white text-green border-green hover:bg-gray-400
+ ${todoState ? "block" : "hidden"}
+ `}
+ >
+ Not Done
+ </button>
 
- <button className="flex-no-shrink p-2 ml-2 border-2 rounded text-red border-red hover:text-white hover:bg-red-600">
- Remove
- </button>
- </div>
+ <button
+ onClick={() => deleteTodoHandler(todo.id)}
+ className="flex-no-shrink p-2 ml-2 border-2 rounded text-red border-red hover:text-white hover:bg-red-600"
+ >
+ Remove
+ </button>
  </div>
- </div>
+ {/* <div className="flex mb-4 items-center">
+ <p className="w-full line-through text-green">
+ Submit Todo App Component to Tailwind Components
+ </p>
+
+ <button className="flex-no-shrink p-2 ml-4 mr-2 border-2 rounded text-grey border-grey hover:text-white hover:bg-gray-400">
+ Not Done
+ </button>
+
+ <button className="flex-no-shrink p-2 ml-2 border-2 rounded text-red border-red hover:text-white hover:bg-red-600">
+ Remove
+ </button>
+ </div> */}
+ </>
  );
 };
 

todo-list/src/components/TodoForm.jsx

@@ -16,7 +16,14 @@ const TodoForm = (props) => {
  };
  const addTodoHandler = () => {
  props.setTodos((prevState) => {
- return [...prevState, { todo: todo.todo, state: todo.state }];
+ return [
+ ...prevState,
+ {
+ todo: todo.todo,
+ state: todo.state,
+ id: Math.floor(Math.random() * 1000),
+ },
+ ];
  });
  setTodos({ todo: "", state: false });
  };
@@ -34,6 +41,7 @@ const TodoForm = (props) => {
  todokey="todo"
  className="shadow appearance-none border w-full py-2 px-3 mr-4 text-grey-darker"
  placeholder="Add Todo"
+ value={todo.todo}
  />
  <button
  onClick={addTodoHandler}

todo-list/src/components/Todos.jsx

@@ -1,15 +1,27 @@
 import { useState } from "react";
 import Todo from "../UI/Todo";
 import TodoForm from "./TodoForm";
-
+import Card from "../UI/Card";
 const Todos = () => {
  const [todos, setTodos] = useState([]);
- console.log(todos);
-
  return (
- <div className="h-screen flex">
+ <div className="h-screen">
  <TodoForm setTodos={setTodos} />
- <Todo />
+
+ {todos.length > 0 && (
+ <Card className="bg-white rounded shadow p-6 w-full lg:w-3/4 lg:max-w-lg m-auto">
+ <div className="h-100 w-full flex items-center justify-center bg-teal-lightest font-sans flex-col">
+ {todos.map((todo) => (
+ <Todo
+ key={todo.id}
+ todo={todo}
+ todos={todos}
+ setTodos={setTodos}
+ />
+ ))}
+ </div>
+ </Card>
+ )}
  </div>
  );
 };