Merge pull request #65 from PraveenMp/feature/changes-1

Some Changes to To-Do App
PraveenMp · Jul 15, 2024 · 1f6a7fc · 1f6a7fc
2 parents 5046358 + 7d47cfd
commit 1f6a7fc
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 63 deletions.
diff --git a/to-do/public/index.html b/to-do/public/index.html
@@ -25,6 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/to-do/src/components/todo/TodoList.js b/to-do/src/components/todo/TodoList.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-
 const TodoApp = () => {
   const [tasks, setTasks] = useState([]);
 
@@ -12,11 +11,12 @@ const TodoApp = () => {
     localStorage.setItem("tasks", JSON.stringify(tasks));
   }, [tasks]);
 
-  const addTask = (taskText) => {
+  const addTask = (taskText, taskCategory) => {
     const newTask = {
       id: Date.now(),
       text: taskText,
       date: new Date().toISOString(),
+      category: taskCategory,
       new: true,
       inProgress: false,
       completed: false,
@@ -51,8 +51,10 @@ const TodoApp = () => {
 
   return (
     <div className="container mt-5">
-      <h4>Praveen To-Do List</h4>
-      <TodoForm addTask={addTask} />
+      <h4 className="text-center mb-4">Praveen To-Do List</h4>
+      <div className="form-body mb-4">
+        <TodoForm addTask={addTask} />
+      </div>
       <TodoList
         tasks={tasks}
         onCheckboxChange={handleCheckboxChange}
@@ -64,28 +66,36 @@ const TodoApp = () => {
 
 const TodoForm = ({ addTask }) => {
   const [taskText, setTaskText] = useState("");
+  const [taskCategory, setTaskCategory] = useState("Personal");
 
   const handleSubmit = (e) => {
     e.preventDefault();
     if (!taskText.trim()) return;
-    addTask(taskText);
+    addTask(taskText, taskCategory);
     setTaskText("");
+    setTaskCategory("Personal");
   };
 
-
-
-
-
   return (
-    <form onSubmit={handleSubmit}>
-      <div className="input-group mb-3">
+    <form onSubmit={handleSubmit} className="table-body-wrapper">
+      <div className="input-group">
         <input
           type="text"
           className="form-control"
           placeholder="Enter a new task"
           value={taskText}
           onChange={(e) => setTaskText(e.target.value)}
         />
+        <select
+          className="form-select"
+          value={taskCategory}
+          onChange={(e) => setTaskCategory(e.target.value)}
+        >
+          <option value="Personal">Personal</option>
+          <option value="Office">Office</option>
+          <option value="Home">Home</option>
+          <option value="Others">Others</option>
+        </select>
         <button className="btn btn-primary" type="submit">
           Add Task
         </button>
@@ -94,44 +104,56 @@ const TodoForm = ({ addTask }) => {
   );
 };
 
-const TodoList = ({ tasks, onCheckboxChange, onDelete  }) => {
+const TodoList = ({ tasks, onCheckboxChange, onDelete }) => {
+  const categories = ["Personal", "Office", "Home", "Others"];
+
   return (
-    <table className="table">
-      <thead>
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">Task</th>
-          <th scope="col">Date</th>
-          <th scope="col">Status</th>
-          <th scope="col">Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        {tasks.map((task, index) => (
-          <tr key={task.id}>
-            <th scope="row">{index + 1}</th>
-            <td>{task.text}</td>
-            <td>{new Date(task.date).toLocaleString()}</td>
-            <td>
-              <input
-                type="checkbox"
-                checked={task.completed}
-                onChange={() => onCheckboxChange(task.id)}
-              />
-              {task.completed ? "Completed" : "In Progress"}
-            </td>
-            <td>
-              <button
-                className="btn btn-danger"
-                onClick={() => onDelete(task.id)}
-              >
-                Delete
-              </button>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
+    <div>
+      {categories.map((category) => (
+        <div key={category} className="mb-4 table-body-wrapper">
+          <h5>{category}</h5>
+          <hr />
+          <table className="table">
+            <thead className="thead-dark">
+              <tr>
+                <th scope="col">#</th>
+                <th scope="col">Task</th>
+                <th scope="col">Date</th>
+                <th scope="col">Status</th>
+                <th scope="col">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {tasks
+                .filter((task) => task.category === category)
+                .map((task, index) => (
+                  <tr key={task.id}>
+                    <th scope="row">{index + 1}</th>
+                    <td>{task.text}</td>
+                    <td>{new Date(task.date).toLocaleString()}</td>
+                    <td>
+                      <input
+                        type="checkbox"
+                        checked={task.completed}
+                        onChange={() => onCheckboxChange(task.id)}
+                      />
+                      {task.completed ? "Completed" : "In Progress"}
+                    </td>
+                    <td>
+                      <button
+                        className="btn btn-danger btn-sm"
+                        onClick={() => onDelete(task.id)}
+                      >
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        </div>
+      ))}
+    </div>
   );
 };
 

diff --git a/to-do/src/index.css b/to-do/src/index.css
@@ -5,9 +5,21 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #ccc;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.table-body-wrapper {
+  border: 1px solid #ccc;
+  border-radius: 15px;
+  padding: 15px;
+  background: #fff;
+}
+
+#root, .App, html {
+  background: #fbfbfb;
+}
diff --git a/todo/asset-manifest.json b/todo/asset-manifest.json
@@ -1,15 +1,15 @@
 {
   "files": {
-    "main.css": "/todo/static/css/main.cc0e798d.css",
-    "main.js": "/todo/static/js/main.20573aeb.js",
+    "main.css": "/todo/static/css/main.82fc0197.css",
+    "main.js": "/todo/static/js/main.da563c78.js",
     "static/js/787.c6a9a21d.chunk.js": "/todo/static/js/787.c6a9a21d.chunk.js",
     "index.html": "/todo/index.html",
-    "main.cc0e798d.css.map": "/todo/static/css/main.cc0e798d.css.map",
-    "main.20573aeb.js.map": "/todo/static/js/main.20573aeb.js.map",
+    "main.82fc0197.css.map": "/todo/static/css/main.82fc0197.css.map",
+    "main.da563c78.js.map": "/todo/static/js/main.da563c78.js.map",
     "787.c6a9a21d.chunk.js.map": "/todo/static/js/787.c6a9a21d.chunk.js.map"
   },
   "entrypoints": [
-    "static/css/main.cc0e798d.css",
-    "static/js/main.20573aeb.js"
+    "static/css/main.82fc0197.css",
+    "static/js/main.da563c78.js"
   ]
 }
diff --git a/todo/index.html b/todo/index.html
@@ -10,8 +10,10 @@
     <link rel="apple-touch-icon" href="/todo/logo192.png" />
     <link rel="manifest" href="/todo/manifest.json" />
     <title>React App</title>
-    <script defer="defer" src="/todo/static/js/main.20573aeb.js"></script>
-    <link href="/todo/static/css/main.cc0e798d.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script defer="defer" src="/todo/static/js/main.da563c78.js"></script>
+    <link href="/todo/static/css/main.82fc0197.css" rel="stylesheet">
 </head>
 
 <body><noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/todo/static/css/main.cc0e798d.css → todo/static/css/main.82fc0197.css b/todo/static/css/main.cc0e798d.css → todo/static/css/main.82fc0197.css
diff --git a/todo/static/css/main.82fc0197.css.map b/todo/static/css/main.82fc0197.css.map
diff --git a/todo/static/css/main.cc0e798d.css.map b/todo/static/css/main.cc0e798d.css.map
diff --git a/todo/static/js/main.20573aeb.js.map b/todo/static/js/main.20573aeb.js.map
diff --git a/todo/static/js/main.20573aeb.js → todo/static/js/main.da563c78.js b/todo/static/js/main.20573aeb.js → todo/static/js/main.da563c78.js
diff --git a/todo/static/js/main.20573aeb.js.LICENSE.txt → todo/static/js/main.da563c78.js.LICENSE.txt b/todo/static/js/main.20573aeb.js.LICENSE.txt → todo/static/js/main.da563c78.js.LICENSE.txt
diff --git a/todo/static/js/main.da563c78.js.map b/todo/static/js/main.da563c78.js.map