Todo App React

MuhammadHassanRaza25 · Sep 20, 2024 · c033af0 · c033af0
1 parent 0821c59
commit c033af0
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 85 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -2,18 +2,27 @@ import { useContext, useState } from 'react'
 import './App.css'
 import TodoInput from './components/TodoInput';
 import TodoList from './components/TodoList';
+import FilterButtons from './components/FilterButtons'
 import { ThemeContext } from './context/ThemeContext';
 
 function App() {
 const [todo, setTodo] = useState('')
 const [todos, setTodos] = useState([])
 const [editBtn, setEditBtn] = useState(false)
 
-//using context
+// Using context for light/dark mode
 const {theme, setTheme} = useContext(ThemeContext)
 // console.log(theme);
 
-// add todo function
+// Change body light/dark mode using context
+{theme == "light"
+  ? 
+  document.getElementById('root').style.backgroundColor = '#f9fafb'
+  :
+  document.getElementById('root').style.backgroundColor = 'black'
+}
+
+// Add todo function
 let addBtn = ()=>{
   const allTodosarray = [...todos, {
     todo,
@@ -25,16 +34,16 @@ let addBtn = ()=>{
 }
 // summary: new array bangaya or usmy pichle sary todos agaye or hamny 1 or new todo add kardia. or setTodos main push krdia.
 
-// delete todo function  //niche map main se id pas ki h. 
+// Delete todo function  //niche map main se id pas ki h. 
 let delTodo = (id)=>{
   let del = todos.filter((abc)=> abc.id !== id);
   setTodos([...del])
 }
 
-// edit todo function
+// Edit todo function
 let editTodo = (id)=>{
  let editTodo = todos.find((data)=> data.id === id)   //is se edit pe click karne se todo or uski id mili h.
- setTodo(editTodo.todo)         //get todo value & set to input.
+ setTodo(editTodo.todo)     //get todo value & set to input.
 
  let remainingTodos = todos.filter((data) => data.id !== id);
  setTodos(remainingTodos);
@@ -44,73 +53,79 @@ let editTodo = (id)=>{
   return (
     <>   
     {/* Header Start */}
-    {theme == 'light' ? 
-    // light theme
-    <h1 className='header flex justify-between p-3.5 bg-white border-b-2 text-3xl font-semibold -mt-4 mb-5 w-full'><span>Todo <span className='text-purple-600'>App</span></span> 
-    <button className='btn text-lg font-semibold border-2 border-purple-600 bg-purple-600 text-white w-24 rounded-lg p-0.5 hover:bg-white hover:text-purple-600' 
-     onClick={()=>{
-     if(theme === 'light'){
-      setTheme('Dark')
-     }
-     else{
-      setTheme('light')
-     }
-    }}>Dark 🌘</button></h1>
-    : 
-    // dark theme
-    <h1 className='header flex justify-between p-3.5 bg-black text-white border-b-2 text-3xl font-semibold -mt-4 mb-5 w-full'><span>Todo <span className='text-purple-600'>App</span></span> 
-    <button className='btn text-lg font-semibold border-2 border-purple-600 bg-purple-600 text-white w-24 rounded-lg p-0.5 hover:text-purple-600 hover:bg-white' 
-     onClick={()=>{
-      if(theme === 'light'){
-       setTheme('Dark')
-      }
-      else{
-       setTheme('light')
-      }
-     }}>Light ☀</button></h1> 
+    {theme == 'light' 
+     ? 
+      // light theme
+      <h1 className='header flex justify-between p-3.5 bg-white border-b-2 text-3xl font-semibold -mt-4 mb-5 w-full'><span>Todo <span className='text-purple-600'>App</span></span> 
+      <button className='btn text-lg font-semibold border-2 border-purple-600 bg-purple-600 text-white w-24 rounded-lg p-0.5 hover:bg-white hover:text-purple-600' 
+       onClick={()=>{
+       if(theme === 'light'){
+        setTheme('Dark')
+       }
+       else{
+        setTheme('light')
+       }
+      }}>Dark 🌘</button></h1>
+     : 
+      // dark theme
+      <h1 className='header flex justify-between p-3.5 bg-black text-white border-b-2 text-3xl font-semibold -mt-4 mb-5 w-full'><span>Todo <span className='text-purple-600'>App</span></span> 
+      <button className='btn text-lg font-semibold border-2 border-purple-600 bg-purple-600 text-white w-24 rounded-lg p-0.5 hover:text-purple-600 hover:bg-white' 
+       onClick={()=>{
+        if(theme === 'light'){
+         setTheme('Dark')
+        }
+        else{
+         setTheme('light')
+        }
+       }}>Light ☀</button></h1> 
     }
    {/* Header End */}
 
     {/* Todo List Box ⬇ */}
-    {theme == 'light'?
-    // light theme
-    <div className='box'>
-       <TodoInput 
-       value={todo} 
-       onChange={(e)=> setTodo(e.target.value)} 
-       onClick={addBtn} 
-       showEditBtn={editBtn}
-       />
-
-       {todos.map((data)=>(
-        <TodoList 
-        todos={data.todo} 
-        id={data.id} 
-        deleteFunction={()=> delTodo(data.id)}
-        editFunction={()=> editTodo(data.id)}
-        />
-       ))}
-     </div>
-     :
-    //  dark theme
-     <div className='boxDark'>
-       <TodoInput 
-       value={todo} 
-       onChange={(e)=> setTodo(e.target.value)} 
-       onClick={addBtn} 
-       showEditBtn={editBtn}
-       />
-
-       {todos.map((data)=>(
-        <TodoList 
-        todos={data.todo} 
-        id={data.id} 
-        deleteFunction={()=> delTodo(data.id)}
-        editFunction={()=> editTodo(data.id)}
-        />
-       ))}
-     </div>
-     }
+    {theme == 'light'
+      ?
+       // light theme
+       <div className='box'>
+          <TodoInput 
+          value={todo} 
+          onChange={(e)=> setTodo(e.target.value)} 
+          onClick={addBtn} 
+          showEditBtn={editBtn}
+          />
+
+          <FilterButtons/>
+
+          {todos.map((data)=>(
+           <TodoList 
+           todos={data.todo} 
+           id={data.id} 
+           deleteFunction={()=> delTodo(data.id)}
+           editFunction={()=> editTodo(data.id)}
+           />
+          ))}
+        </div>
+      :
+       // dark theme
+        <div className='boxDark'>
+          <TodoInput 
+          value={todo} 
+          onChange={(e)=> setTodo(e.target.value)} 
+          onClick={addBtn} 
+          showEditBtn={editBtn}
+          />
+
+          <FilterButtons/>
+
+          {todos.map((data)=>(
+           <TodoList 
+           todos={data.todo} 
+           id={data.id} 
+           deleteFunction={()=> delTodo(data.id)}
+           editFunction={()=> editTodo(data.id)}
+           />
+          ))}
+        </div>
+    }
      {/* Todo List Box ⬆ */}
 
       {/* Programmer Name */}

diff --git a/src/components/FilterButtons.jsx b/src/components/FilterButtons.jsx
@@ -0,0 +1,12 @@
+
+function FilterButtons(){
+    return(
+      <div className="flex justify-between rounded-xl mb-8">
+        <button className="btn border-2 border-purple-600 font-semibold text-lg bg-purple-600 text-white p-2 w-full rounded-xl hover:bg-white hover:text-purple-600">All</button>
+        <button className="btn border-2 border-purple-600 font-semibold text-lg bg-purple-600 text-white p-2 w-full rounded-xl ml-2 hover:bg-white hover:text-purple-600">Completed</button>
+        <button className="btn border-2 border-purple-600 font-semibold text-lg bg-purple-600 text-white p-2 w-full rounded-xl ml-2 hover:bg-white hover:text-purple-600">InCompleted</button>
+      </div>
+    )
+}
+
+export default FilterButtons;
diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx
@@ -8,20 +8,22 @@ const {theme, setTheme} = useContext(ThemeContext)
 
 return(
     <>
-    {theme == 'light'?
-    // light theme
-    <div className="flex mb-8">
-      <input className="todoInput font-bold p-2.5 rounded-xl focus:border-purple-600 hover:border-purple-600 focus:placeholder:text-purple-600" 
-       type="text" value={value} placeholder="Enter Your Todo" onChange={onChange}/>
-       <button disabled={value === ''} className="btn border-2 border-purple-600 font-semibold text-xl bg-purple-600 text-white p-2 w-28 rounded-xl ml-2 hover:bg-white hover:text-purple-600" onClick={onClick}>{showEditBtn?"Edit" : "Add"}</button>
-    </div>
+    {theme == 'light'
+      ?
+       // light theme
+       <div className="flex mb-6">
+         <input className="todoInput font-bold p-2.5 rounded-xl focus:border-purple-600 hover:border-purple-600 focus:placeholder:text-purple-600" 
+          type="text" value={value} placeholder="Enter Your Todo" onChange={onChange}/>
+          <button disabled={value === ''} className="btn border-2 border-purple-600 font-semibold text-xl bg-purple-600 text-white p-2 w-28 rounded-xl ml-2 hover:bg-white hover:text-purple-600" onClick={onClick}>{showEditBtn?"Edit" : "Add"}</button>
+       </div>
       :
-    // dark theme
-    <div className="flex mb-8">
-       <input className="todoInput bg-black text-white font-bold p-2.5 rounded-xl focus:border-purple-600 hover:border-purple-600 focus:placeholder:text-purple-600 placeholder:text-gray-300" 
-        type="text" value={value} placeholder="Enter Your Todo" onChange={onChange}/>
-       <button disabled={value === ''} className="btn border-2 border-purple-600 font-semibold text-xl bg-purple-600 text-white p-2 w-28 rounded-xl ml-2 hover:bg-white hover:text-purple-600" onClick={onClick}>{showEditBtn?"Edit" : "Add"}</button>
-    </div>}
+       // dark theme
+       <div className="flex mb-6">
+          <input className="todoInput bg-black text-white font-bold p-2.5 rounded-xl focus:border-purple-600 hover:border-purple-600 focus:placeholder:text-purple-600 placeholder:text-gray-300" 
+           type="text" value={value} placeholder="Enter Your Todo" onChange={onChange}/>
+          <button disabled={value === ''} className="btn border-2 border-purple-600 font-semibold text-xl bg-purple-600 text-white p-2 w-28 rounded-xl ml-2 hover:bg-white hover:text-purple-600" onClick={onClick}>{showEditBtn?"Edit" : "Add"}</button>
+       </div>
+       }
     </>
 )
 }

diff --git a/src/index.css b/src/index.css
@@ -38,7 +38,7 @@ body {
 /* light theme box */
 .box{
   height: 80vh;
-  width:50vw;
+  width:55vw;
   background-color: white;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
@@ -52,12 +52,12 @@ body {
 /* dark theme box */
 .boxDark{
   height: 80vh;
-  width:50vw;
+  width:55vw;
   background-color: black;
-  border:2px solid lightgrey;
   border-radius: 10px;
   padding: 17px;
   overflow: scroll;
+  box-shadow: 0px 0px 5px white, 0px 0px 6px white;
 }
 .boxDark::-webkit-scrollbar{
   display: none;
@@ -68,7 +68,7 @@ body {
 }
 
 .todoInput{
-  width: 39vw;
+  width: 44vw;
   border: 2px solid lightgrey;
   transition: all 0.5s;
 }