OpenStack-ai: Style the Todo App

[desouky22]

can you make another style using css when i check a todo by setting the background color to green

[openstack-ai[bot]]

Here's the PR! #13.

UPDATE 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;
}

.todo-item-checked {
  background-color: green;
}

UPDATE src/ToDoList.js

import './ToDoList.css';

export default function ToDoList({ todoList, handleCheck, handleDelete }) {
  return (
    <ul className="todo-list">
      {todoList.map((todo, index) => (
        <li key={index} className={`todo-item ${todo.checked ? 'todo-item-checked' : ''}`}>
          <input
            type="checkbox"
            checked={todo.checked}
            onChange={() => handleCheck(index)}
            className="todo-checkbox"
          />
          <label className="todo-label">{todo.text}</label>
          <button onClick={() => handleDelete(index)} className="todo-delete-button">Delete</button>
        </li>
      ))}
    </ul>
  );
}