├── chevron-up-solid-24.png ├── postcss.config.js ├── public ├── bell-solid-24.png ├── trash-regular-24.png └── bell-off-solid-24.png ├── vite.config.js ├── tailwind.config.js ├── src ├── main.jsx ├── TaskList.js ├── index.css ├── components │ ├── Task.jsx │ ├── TaskDes.jsx │ └── AddTask.jsx └── App.jsx ├── index.html ├── README.md └── package.json /chevron-up-solid-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Harshbailurkar/Updated-TODO-React-App/HEAD/chevron-up-solid-24.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/bell-solid-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Harshbailurkar/Updated-TODO-React-App/HEAD/public/bell-solid-24.png -------------------------------------------------------------------------------- /public/trash-regular-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Harshbailurkar/Updated-TODO-React-App/HEAD/public/trash-regular-24.png -------------------------------------------------------------------------------- /public/bell-off-solid-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Harshbailurkar/Updated-TODO-React-App/HEAD/public/bell-off-solid-24.png -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Your to-do list 7 | 8 | 9 |

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/TaskList.js: -------------------------------------------------------------------------------- 1 | //export default [ 2 | // { 3 | // id: 1, 4 | // title: "Homework", 5 | // dueDate: "29-10-2023", 6 | // reminder: true, 7 | // description: "Hello Harsh How are you", 8 | // }, 9 | // { 10 | // id: 2, 11 | // title: "Sports", 12 | // dueDate: "29-09-2023", 13 | // reminder: true, 14 | // description: "Give Names To S. B. Patil sir", 15 | // }, 16 | // { 17 | // id: 3, 18 | // title: "Coading", 19 | // dueDate: "31-10-2023", 20 | // reminder: false, 21 | // description: "Finish AWS Corse", 22 | // }, 23 | // { 24 | // id: 4, 25 | // title: "NPTL", 26 | // dueDate: "31-10-2023", 27 | // reminder: true, 28 | // description: "NPTL Exam", 29 | // }, 30 | //]; 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | To Run: npm install >> npm run dev 2 |
3 |
4 | Try: https://task-app-harshbailurkar.netlify.app/ 5 |
6 |
7 | Figma Design File: https://www.figma.com/file/lQlBN3BtY7UMJnzcYT5BUJ/TODO-List?type=design&node-id=0%3A1&mode=design&t=5wcQyyFs3O74vc1m-1 8 |
9 |
10 | ### Add Task 11 | ![image](https://github.com/Harshbailurkar/Updated-TODO-React-App/assets/113308692/299613cf-2b1d-46a9-b461-53e5e4ea928b) 12 |
13 | ### See Task 14 | ![image](https://github.com/Harshbailurkar/Updated-TODO-React-App/assets/113308692/1c7f1ad1-ea62-4055-ae77-051c8592466f) 15 |
16 | ### Search Task 17 | ![image](https://github.com/Harshbailurkar/Updated-TODO-React-App/assets/113308692/b3857c5d-0c8b-4c8b-aa18-3d1a796de41a) 18 |
19 | ### Clear All Task 20 | ![image](https://github.com/Harshbailurkar/Updated-TODO-React-App/assets/113308692/4d32db6f-18f6-40bb-aa1f-efa82c434908) 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "sweetalert": "^2.1.2", 16 | "sweetalert2": "^11.7.31" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.2.15", 20 | "@types/react-dom": "^18.2.7", 21 | "@vitejs/plugin-react": "^4.0.3", 22 | "autoprefixer": "^10.4.16", 23 | "eslint": "^8.45.0", 24 | "eslint-plugin-react": "^7.32.2", 25 | "eslint-plugin-react-hooks": "^4.6.0", 26 | "eslint-plugin-react-refresh": "^0.4.3", 27 | "postcss": "^8.4.30", 28 | "tailwindcss": "^3.3.3", 29 | "vite": "^4.4.5" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .card { 6 | background-color: rgba(54, 56, 74, 1); 7 | } 8 | .header { 9 | height: 10px; 10 | } 11 | .des { 12 | background-color: #2c303b; 13 | border-radius: 5px; 14 | } 15 | .search { 16 | margin-top: 5px; 17 | } 18 | .title-inp { 19 | padding: 3px; 20 | } 21 | .swal-button { 22 | padding: 7px 19px; 23 | border-radius: 2px; 24 | background-color: #4962b3; 25 | font-size: 12px; 26 | border: 1px solid #3e549a; 27 | text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); 28 | } 29 | .swal2-modal { 30 | background-color: #2c303b; 31 | color: #ccc; 32 | width: 400px; 33 | } 34 | /* .swal2-popup { 35 | background-color: #333; 36 | color: #fff; 37 | } 38 | 39 | .swal2-title { 40 | color: #fff; 41 | } 42 | 43 | .swal2-content { 44 | color: #ccc; 45 | } */ 46 | .mobileview { 47 | display: none; 48 | } 49 | @media screen and (max-width: 576px) { 50 | .App { 51 | display: none; 52 | } 53 | .mobileview { 54 | display: block; 55 | width: 80%; 56 | margin-top: 50%; 57 | text-align: center; 58 | font-size: x-large; 59 | padding-left: 20%; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/components/Task.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import TaskDes from "./TaskDes"; 3 | 4 | export default function Task(props) { 5 | const [showdes, setShowDes] = React.useState(false); 6 | const changeShowdes = () => { 7 | setShowDes((prev) => !prev); 8 | }; 9 | const TodaysDate = new Date(); 10 | const TaskDueDate = new Date(props.date); 11 | const DateDifference = TaskDueDate - TodaysDate; 12 | const daysDifference = Math.floor(DateDifference / (1000 * 60 * 60 * 24)) + 1; 13 | const showWarning = daysDifference < 6 ? true : false; 14 | return ( 15 | <> 16 | {!showdes && ( 17 |

18 | {showWarning && ( 19 | 20 | {daysDifference} 21 | 22 | )} 23 |

{props.title}

24 | 30 |

31 | )} 32 | {showdes && ( 33 | 42 | )} 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/components/TaskDes.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function TaskDes(props) { 4 | const [reminderState, setReminderState] = React.useState(props.reminder); 5 | 6 | return ( 7 |

8 |

9 |

{props.title}

10 | 16 |

17 |

18 | 19 |

Due Date : {props.date}

20 | 28 | 29 |

30 | setReminderState((prev) => !prev)} 34 | id="ReminderState" 35 | className="hidden" 36 | /> 37 | 38 | 42 | {reminderState ? ( 43 |

44 | ) : ( 45 |

50 | )} 51 | Reminder 52 | 53 |
54 | Description: 55 |

56 |

{props.desciption}

57 |

58 |

59 |

60 |

61 | ); 62 | } 63 | -------------------------------------------------------------------------------- /src/components/AddTask.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function AddTask(props) { 4 | const [reminder, setReminder] = React.useState(false); 5 | const [taskInfo, setTaskInfo] = React.useState({ 6 | id: props.allTask.length + 1, 7 | title: "", 8 | dueDate: "", 9 | reminder: reminder, 10 | description: "", 11 | }); 12 | 13 | const dateInput = (e) => { 14 | e.preventDefault(); 15 | setTaskInfo({ 16 | ...taskInfo, 17 | dueDate: e.target.value, 18 | }); 19 | }; 20 | 21 | const titleInput = (e) => { 22 | e.preventDefault(); 23 | setTaskInfo({ 24 | ...taskInfo, 25 | title: e.target.value, 26 | }); 27 | }; 28 | 29 | const checkboxInput = (e) => { 30 | e.preventDefault(); 31 | setTaskInfo({ 32 | ...taskInfo, 33 | reminder: !taskInfo.reminder, 34 | }); 35 | }; 36 | 37 | const descriptionInput = (e) => { 38 | e.preventDefault(); 39 | setTaskInfo({ 40 | ...taskInfo, 41 | description: e.target.value, 42 | }); 43 | }; 44 | 45 | const submitTaskInfo = () => { 46 | const { title } = taskInfo; 47 | if (title) { 48 | props.addingTask((prevTask) => [taskInfo, ...prevTask]); 49 | } else { 50 | alert("Title is Required"); 51 | } 52 | }; 53 | 54 | return ( 55 |

56 |

57 |

58 | Add Task 59 |

60 | 66 |

67 |

68 | Due Date : 69 | 75 |

76 |

77 | Title : 78 | 84 |

85 |

86 | 92 | 93 | {taskInfo.reminder ? ( 94 |

95 | ) : ( 96 |

97 | )} 98 | Set Reminder 99 | 100 |

101 |

102 | Description : 103 | 107 |

108 | 109 | 110 | 116 | 117 | 118 |

119 | ); 120 | } 121 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import Task from "./components/Task"; 3 | import AddTask from "./components/AddTask"; 4 | import Swal from "sweetalert2"; 5 | import "sweetalert2/dist/sweetalert2.css"; 6 | 7 | function App() { 8 | const [allTask, setAllTask] = useState( 9 | () => JSON.parse(localStorage.getItem("Tasks")) || [] 10 | ); 11 | const [isChecked, setIsChecked] = useState(false); 12 | const [addTask, setAddTask] = useState(false); 13 | const [task, setTask] = useState(allTask ? true : false); 14 | const [searchtask, setSearchTask] = useState([]); 15 | 16 | useEffect(() => { 17 | localStorage.setItem("Tasks", JSON.stringify(allTask)); 18 | }, [allTask]); 19 | 20 | const handleCheckboxChange = () => { 21 | setIsChecked(!isChecked); 22 | }; 23 | const closeAddTask = () => { 24 | setAddTask((prev) => !prev); 25 | }; 26 | 27 | function deleteTask(event, TaskId) { 28 | event.stopPropagation(); 29 | setAllTask((oldTask) => oldTask.filter((newtask) => newtask.id !== TaskId)); 30 | } 31 | const clearAllTask = () => { 32 | Swal.fire({ 33 | title: "Delete All !!", 34 | text: "You will Lose All the Task Details. and you can never recover. Click ok to Delete All Task.", 35 | icon: "warning", 36 | confirmButtonText: "OK", 37 | showCancelButton: true, 38 | cancelButtonText: "Cancel", 39 | }).then((result) => { 40 | if (result.isConfirmed) { 41 | setAllTask([]); 42 | } else if (result.dismiss === Swal.DismissReason.cancel) { 43 | return; 44 | } 45 | }); 46 | }; 47 | function search(e) { 48 | let inputsearchTask = e.target.value.toLowerCase(); 49 | setSearchTask(inputsearchTask); 50 | } 51 | const filteredData = allTask.filter((task) => { 52 | if (searchtask === "") { 53 | return true; 54 | } 55 | return task.title.toLowerCase().includes(searchtask); 56 | }); 57 | const TaskComp = filteredData.map((items) => { 58 | return ( 59 | 68 | ); 69 | }); 70 | return ( 71 |

72 |

73 | We are Working with Mobile device view. for now open in desktop Mode 74 |

75 |

76 |

77 |

78 | TO-DO List 79 |

80 |

81 | 87 | 90 |

91 |

92 | 93 |

94 | 100 |

105 |

110 |

111 | 112 |

113 |

114 |

115 |

116 | Add Task 117 |

118 | 124 | 130 |

131 | 132 |

133 | {addTask && ( 134 | 139 | )} 140 |

141 |

142 | {task && TaskComp} 143 |

144 |

145 |

146 | ); 147 | } 148 | 149 | export default App; 150 | --------------------------------------------------------------------------------