add clear function

.eslintrc.cjs

@@ -18,4 +18,4 @@ module.exports = {
       { allowConstantExport: true },
     ],
   },
-}
+};

.prettierrc.json

@@ -1,7 +1,14 @@
 {
+  "semi": true,
   "trailingComma": "es5",
-  "tabWidth": 2,
-  "semi": false,
   "singleQuote": true,
-  "useTabs": false
+  "printWidth": 80,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "endOfLine": "lf"
 }

src/App.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import ToDoMain from './components/ToDoMain'
+import React from 'react';
+import ToDoMain from './components/ToDoMain';
 
 function App() {
   return (
     <>
       <ToDoMain />
     </>
-  )
+  );
 }
 
-export default App
+export default App;

src/components/ToDoMain.css

@@ -138,4 +138,10 @@
   .container .wrapper .footer .content button {
     width: 2rem;
   }
+  .container .wrapper .header {
+    border-radius: 0;
+  }
+  .container .wrapper .footer {
+    border-radius: 0;
+  }
 }

src/components/ToDoMain.jsx

@@ -1,9 +1,12 @@
-import './ToDoMain.css'
-import { useState } from 'react'
+import './ToDoMain.css';
+import { useState } from 'react';
 
 function ToDoMain() {
-  const [toDo, setToDo] = useState([])
-  const [data, setData] = useState('')
+  const [toDo, setToDo] = useState([]);
+  const [data, setData] = useState('');
+  const clearInput = () => {
+    setData('');
+  };
   return (
     <>
       <div className="container flex flex-align flex-content">
@@ -14,9 +17,10 @@ function ToDoMain() {
               <input
                 type="text"
                 onChange={(e) => {
-                  setData(e.target.value)
+                  setData(e.target.value);
                 }}
                 placeholder="Enter description"
+                value={data}
               />
               <button
                 onClick={() => {
@@ -27,7 +31,8 @@ function ToDoMain() {
                       id: Date.now(),
                       check: false,
                     },
-                  ])
+                  ]),
+                    clearInput();
                 }}
               >
                 <i className="fa-solid fa-plus fa-xl"></i>
@@ -43,11 +48,11 @@ function ToDoMain() {
                       setToDo(
                         toDo.filter((index) => {
                           if (obj.id === index.id) {
-                            index.status = e.target.checked
+                            index.status = e.target.checked;
                           }
-                          return index
+                          return index;
                         })
-                      )
+                      );
                     }}
                     type="checkbox"
                   />
@@ -59,22 +64,22 @@ function ToDoMain() {
                       setToDo(
                         toDo.filter((index) => {
                           if (obj.id != index.id) {
-                            return index
+                            return index;
                           }
                         })
-                      )
+                      );
                     }}
                   >
                     <i className="fa-solid fa-trash fa-xl"></i>
                   </button>
                 </div>
-              )
+              );
             })}
           </div>
         </div>
       </div>
     </>
-  )
+  );
 }
 
-export default ToDoMain
+export default ToDoMain;

src/main.jsx

@@ -1,9 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-)
+);

vite.config.js

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});