search

desouky22 / ToDoAPP

A basic TO DO application
https://to-do-app-mocha-six.vercel.app
Other
0 stars 0 forks source link

openstack-ai/add-todo-form-component pull request #10

Closed openstack-ai[bot] closed 1 year ago

openstack-ai[bot] commented 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;
}
vercel[bot] commented 1 year ago

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

Name Status Preview Comments Updated (UTC)
to-do-app 🛑 Canceled (Inspect) Aug 16, 2023 9:04pm
netlify[bot] commented 1 year ago

Deploy Preview for fabulous-stardust-b9bca0 ready!

Name Link
Latest commit 6f075547ff2cd6dc758c0905b46fa64bd8ffe483
Latest deploy log https://app.netlify.com/sites/fabulous-stardust-b9bca0/deploys/64dd39a667867300088f1e9c
Deploy Preview https://deploy-preview-10--fabulous-stardust-b9bca0.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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