fix bug and add formatter

NayanUnni95 · Mar 14, 2024 · 3e34141 · 3e34141
1 parent 4a42604
commit 3e34141
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 41 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "useTabs": false
+}
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# React ToDo
+# React ToDo
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/src/App.jsx b/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
diff --git a/src/components/ToDoMain.css b/src/components/ToDoMain.css
@@ -25,12 +25,13 @@
 .container .wrapper {
   width: 80%;
   height: 80%;
-  background-color: aquamarine;
+  /* background-color: aquamarine; */
 }
 .container .wrapper .header {
   width: 100%;
   height: 25%;
   background-color: rgb(65, 197, 214);
+  border-radius: 1rem 1rem 0 0;
 }
 .container .wrapper .header h1 {
   margin-top: 1rem;
@@ -50,10 +51,16 @@
 .container .wrapper .header .input-div input[type='text'] {
   width: 40rem;
   padding-left: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease-out;
+}
+.container .wrapper .header .input-div input[type='text']:hover {
+  background-color: rgb(226, 226, 226);
 }
 .container .wrapper .header .input-div button {
   width: 4rem;
   transition: background-color 0.3s ease-out;
+  cursor: pointer;
 }
 .container .wrapper .header .input-div button:hover {
   background-color: rgb(47, 241, 47);
@@ -63,6 +70,11 @@
   height: 75%;
   padding: 1rem;
   background-color: rgb(107, 224, 170);
+  overflow: scroll;
+  border-radius: 0 0 1rem 1rem;
+}
+.container .wrapper .footer::-webkit-scrollbar {
+  display: none;
 }
 .container .wrapper .footer .content {
   width: 96%;
@@ -86,13 +98,15 @@
   border: none;
   height: 2.5rem;
   transition: background-color 0.5s ease-out;
+  cursor: pointer;
 }
 .container .wrapper .footer .content button:hover {
   background-color: red;
 }
 .container .wrapper .footer .content input {
   width: 1rem;
   height: 1rem;
+  cursor: pointer;
 }
 @media (max-width: 1024px) {
   .container .wrapper .footer .content .content-data {

diff --git a/src/components/ToDoMain.jsx b/src/components/ToDoMain.jsx
@@ -1,74 +1,80 @@
-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('')
   return (
     <>
-      <div className='container flex flex-align flex-content'>
-        <div className='wrapper flex flex-align flex-content flex-wrap'>
-          <div className='header flex flex-align flex-content flex-dir'>
+      <div className="container flex flex-align flex-content">
+        <div className="wrapper flex flex-align flex-content flex-wrap">
+          <div className="header flex flex-align flex-content flex-dir">
             <h1>React ToDo List...</h1>
-            <div className='input-div flex'>
+            <div className="input-div flex">
               <input
-                type='text'
+                type="text"
                 onChange={(e) => {
-                  setData(e.target.value);
+                  setData(e.target.value)
                 }}
-                placeholder='Enter description'
+                placeholder="Enter description"
               />
               <button
                 onClick={() => {
                   setToDo([
                     ...toDo,
-                    { des: data, id: Date.now(), check: false },
-                  ]);
-                }}>
-                <i className='fa-solid fa-plus fa-xl'></i>
+                    {
+                      des: data,
+                      id: Date.now(),
+                      check: false,
+                    },
+                  ])
+                }}
+              >
+                <i className="fa-solid fa-plus fa-xl"></i>
               </button>
             </div>
           </div>
-          <div className='footer'>
+          <div className="footer">
             {toDo.map((obj, index) => {
               return (
-                <div key={index} className='content flex flex-align'>
+                <div key={index} className="content flex flex-align">
                   <input
                     onClick={(e) => {
                       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'
+                    type="checkbox"
                   />
-                  <div className='content-data flex flex-align flex-content'>
+                  <div className="content-data flex flex-align flex-content">
                     <h4>{obj.des}</h4>
                   </div>
                   <button
                     onClick={() => {
                       setToDo(
                         toDo.filter((index) => {
                           if (obj.id != index.id) {
-                            return index;
+                            return index
                           }
                         })
-                      );
-                    }}>
-                    <i className='fa-solid fa-trash fa-xl'></i>
+                      )
+                    }}
+                  >
+                    <i className="fa-solid fa-trash fa-xl"></i>
                   </button>
                 </div>
-              );
+              )
             })}
           </div>
         </div>
       </div>
     </>
-  );
+  )
 }
 
-export default ToDoMain;
+export default ToDoMain
diff --git a/src/main.jsx b/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(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
+)