├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.js └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Todo React App 📝

2 |

3 | 🖊️ A simple Todo App built using React and Mantine UI 4 |

5 | 6 | ## This is a super simple Todo App built using React.js and styled using Mantine UI. 7 | 8 | You can view a live demo of the project here: https://javascriptbear.github.io/todo_react_app/ 9 | Or, you can watch this video demo 10 | 11 | ### **(Most likely outdated, its reccomeneded you check out the live demo!)** 12 | 13 | https://user-images.githubusercontent.com/109053279/178185429-8de77574-cc2f-429f-8c4e-b1ed9f290894.mp4 14 | 15 | ## 😃 Features: 16 | 17 | - ➕ Add todos 18 | - 🗑️ Delete todos 19 | - ⏸ Save todos to Local Storage when the state changes 20 | - ▶️ Load the todos from Local Storage when the site is loaded again 21 | - 🌙 Light \ dark mode toggle 22 | 23 |

24 | ❤️ Feel free to create issues and contributions for features or bugs to this project. 25 |

26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo_react_app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://javascriptbear.github.io/todo_react_app", 6 | "dependencies": { 7 | "@mantine/core": "^4.2.12", 8 | "@mantine/hooks": "^4.2.12", 9 | "@testing-library/jest-dom": "^5.16.4", 10 | "@testing-library/react": "^13.3.0", 11 | "@testing-library/user-event": "^13.5.0", 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "react-scripts": "5.0.1", 15 | "tabler-icons-react": "^1.52.0", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "predeploy": "npm run build", 20 | "deploy": "gh-pages -d build", 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | }, 44 | "devDependencies": { 45 | "gh-pages": "^4.0.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptbear/todo_react_app/151276c0ac59482802f1b4ebd1d0f867f960def8/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |

32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptbear/todo_react_app/151276c0ac59482802f1b4ebd1d0f867f960def8/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptbear/todo_react_app/151276c0ac59482802f1b4ebd1d0f867f960def8/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { 2 | Button, 3 | Container, 4 | Text, 5 | Title, 6 | Modal, 7 | TextInput, 8 | Group, 9 | Card, 10 | ActionIcon, 11 | Code, 12 | } from '@mantine/core'; 13 | import { useState, useRef, useEffect } from 'react'; 14 | import { MoonStars, Sun, Trash } from 'tabler-icons-react'; 15 | 16 | import { 17 | MantineProvider, 18 | ColorSchemeProvider, 19 | ColorScheme, 20 | } from '@mantine/core'; 21 | import { useColorScheme } from '@mantine/hooks'; 22 | import { useHotkeys, useLocalStorage } from '@mantine/hooks'; 23 | 24 | export default function App() { 25 | const [tasks, setTasks] = useState([]); 26 | const [opened, setOpened] = useState(false); 27 | 28 | const preferredColorScheme = useColorScheme(); 29 | const [colorScheme, setColorScheme] = useLocalStorage({ 30 | key: 'mantine-color-scheme', 31 | defaultValue: 'light', 32 | getInitialValueInEffect: true, 33 | }); 34 | const toggleColorScheme = value => 35 | setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark')); 36 | 37 | useHotkeys([['mod+J', () => toggleColorScheme()]]); 38 | 39 | const taskTitle = useRef(''); 40 | const taskSummary = useRef(''); 41 | 42 | function createTask() { 43 | setTasks([ 44 | ...tasks, 45 | { 46 | title: taskTitle.current.value, 47 | summary: taskSummary.current.value, 48 | }, 49 | ]); 50 | 51 | saveTasks([ 52 | ...tasks, 53 | { 54 | title: taskTitle.current.value, 55 | summary: taskSummary.current.value, 56 | }, 57 | ]); 58 | } 59 | 60 | function deleteTask(index) { 61 | var clonedTasks = [...tasks]; 62 | 63 | clonedTasks.splice(index, 1); 64 | 65 | setTasks(clonedTasks); 66 | 67 | saveTasks([...clonedTasks]); 68 | } 69 | 70 | function loadTasks() { 71 | let loadedTasks = localStorage.getItem('tasks'); 72 | 73 | let tasks = JSON.parse(loadedTasks); 74 | 75 | if (tasks) { 76 | setTasks(tasks); 77 | } 78 | } 79 | 80 | function saveTasks(tasks) { 81 | localStorage.setItem('tasks', JSON.stringify(tasks)); 82 | } 83 | 84 | useEffect(() => { 85 | loadTasks(); 86 | }, []); 87 | 88 | return ( 89 | 92 | 96 |

97 | { 103 | setOpened(false); 104 | }} 105 | centered> 106 | 113 | 119 | 120 | 127 | 134 | 135 | 136 | 137 | 138 | ({ 140 | fontFamily: `Greycliff CF, ${theme.fontFamily}`, 141 | fontWeight: 900, 142 | })}> 143 | My Tasks 144 | 145 | toggleColorScheme()} 148 | size='lg'> 149 | {colorScheme === 'dark' ? ( 150 | 151 | ) : ( 152 | 153 | )} 154 | 155 | 156 | {tasks.length > 0 ? ( 157 | tasks.map((task, index) => { 158 | if (task.title) { 159 | return ( 160 | 161 | 162 | {task.title} 163 | { 165 | deleteTask(index); 166 | }} 167 | color={'red'} 168 | variant={'transparent'}> 169 | 170 | 171 | 172 | 173 | {task.summary 174 | ? task.summary 175 | : 'No summary was provided for this task'} 176 | 177 | 178 | ); 179 | } 180 | }) 181 | ) : ( 182 | 183 | You have no tasks 184 | 185 | )} 186 | 194 | 195 |

196 | 197 | 198 | ); 199 | } 200 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | import { 6 | MantineProvider, 7 | ColorSchemeProvider, 8 | ColorScheme, 9 | } from '@mantine/core'; 10 | 11 | ReactDOM.createRoot(document.getElementById('root')).render(); 12 | --------------------------------------------------------------------------------