openstack-ai/update-todo-list-component pull request

[openstack-ai[bot]]

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

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
to-do-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 16, 2023 9:36pm

[netlify[bot]]

✅ Deploy Preview for fabulous-stardust-b9bca0 ready!

Name	Link
🔨 Latest commit	843254e8eb94da52ea7d1bae901801f8e81d7eb3
🔍 Latest deploy log	https://app.netlify.com/sites/fabulous-stardust-b9bca0/deploys/64dd4145ce819a0008741732
😎 Deploy Preview	https://deploy-preview-13--fabulous-stardust-b9bca0.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.