Open desouky22 opened 1 year ago
UPDATE src/AddToDoForm.js
import './AddToDoForm.css';
export default function AddToDoForm({
handleSubmit,
todoItem,
handleAdd,
setTodoItem,
}) {
return (
<form onSubmit={handleSubmit} className="add-todo-form">
<input
type="text"
placeholder="Add Todo"
value={todoItem}
onChange={(e) => {
setTodoItem(e.target.value);
}}
className="add-todo-input"
/>
<button onClick={handleAdd} className="add-todo-button">Add</button>
</form>
);
}
CREATE src/AddToDoForm.css
.add-todo-form {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.add-todo-input {
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
flex-grow: 1;
border-radius: 3px;
}
.add-todo-button {
padding: 10px 20px;
font-size: 16px;
border: none;
background-color: #007BFF;
color: white;
cursor: pointer;
border-radius: 3px;
margin-left: 10px;
}
.add-todo-button:hover {
background-color: #0056b3;
}
UPDATE src/ToDoList.js
import './ToDoList.css';
export default function ToDoList({
todoList,
handleCheck,
handleAdd,
handleDelete,
}) {
return (
<ul className="todo-list">
{todoList.map((item) => {
return (
<li key={item.id} className="todo-item">
{item.done ? (
<>
<input
type="checkbox"
id={item.id}
checked
onChange={() => handleCheck(item.id)}
className="todo-checkbox"
/>
<label htmlFor={item.id} className="todo-label">
<del>{item.text}</del>
</label>
</>
) : (
<>
<input
type="checkbox"
id={item.id}
onChange={() => handleCheck(item.id)}
className="todo-checkbox"
/>
<label htmlFor={item.id} className="todo-label">{item.text}</label>
</>
)}
<button onClick={() => handleDelete(item.id)} className="todo-delete-button">Delete</button>
</li>
);
})}
</ul>
);
}
CREATE src/ToDoList.css
.todo-list {
list-style-type: none;
padding: 0;
}
.todo-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.todo-checkbox {
margin-right: 10px;
}
.todo-label {
flex-grow: 1;
}
.todo-delete-button {
padding: 5px 10px;
font-size: 14px;
border: none;
background-color: #dc3545;
color: white;
cursor: pointer;
border-radius: 3px;
}
.todo-delete-button:hover {
background-color: #c82333;
}
UPDATE public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<link rel="stylesheet" href="%PUBLIC_URL%/index.css">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
CREATE public/index.css
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f8f9fa;
}
#root {
max-width: 600px;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
padding: 20px;
background-color: white;
border-radius: 3px;
}
make a good style using CSS for the whole components that look awesome