├── public
    ├── icon.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── src
    ├── ScreenShot
    │   ├── 01.jpg
    │   ├── 02.jpg
    │   ├── 03.jpg
    │   └── 04.jpg
    ├── index.js
    ├── Components
    │   ├── Todo
    │   │   ├── square-regular.svg
    │   │   ├── EditTodoForm.jsx
    │   │   ├── TodoForm.jsx
    │   │   ├── Todo.jsx
    │   │   └── TodoApp.jsx
    │   ├── Modal
    │   │   └── OpenModal.jsx
    │   └── DarkTheme
    │   │   └── DarkMode.jsx
    └── App.css
├── package.json
└── README.md


/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amirrahemi01/Basic-TodoApp/HEAD/public/icon.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/ScreenShot/01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amirrahemi01/Basic-TodoApp/HEAD/src/ScreenShot/01.jpg


--------------------------------------------------------------------------------
/src/ScreenShot/02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amirrahemi01/Basic-TodoApp/HEAD/src/ScreenShot/02.jpg


--------------------------------------------------------------------------------
/src/ScreenShot/03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amirrahemi01/Basic-TodoApp/HEAD/src/ScreenShot/03.jpg


--------------------------------------------------------------------------------
/src/ScreenShot/04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amirrahemi01/Basic-TodoApp/HEAD/src/ScreenShot/04.jpg


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import TodoWrapper from './Components/Todo/TodoApp';
 4 | import './App.css';
 5 | 
 6 | const root = ReactDOM.createRoot(document.getElementById('root'));
 7 | root.render(
 8 |   <React.StrictMode>
 9 | 
10 |     <TodoWrapper />
11 | 
12 |   </React.StrictMode>
13 | );
14 | 
15 | 


--------------------------------------------------------------------------------
/src/Components/Todo/square-regular.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" class="svg-inline--fa fa-trash IconMargin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H384zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>


--------------------------------------------------------------------------------
/src/Components/Modal/OpenModal.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 3 | import { faAngleLeft, faSquareXmark } from "@fortawesome/free-solid-svg-icons";
 4 | 
 5 | function OpenModal({ open, onClose, children }) {
 6 |   if (!open) return null;
 7 | 
 8 |   return (
 9 |     <div className="Modal-Container">
10 |       <div className="Modal-Inner">
11 |         <FontAwesomeIcon
12 |           onClick={onClose}
13 |           icon={faSquareXmark}
14 |           className="close-btn"
15 |           size="xl"
16 |         />
17 |         {children}
18 |       </div>
19 |     </div>
20 |   );
21 | }
22 | 
23 | export default OpenModal;
24 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Todo App",
 3 |   "name": "Basic ToDo App MADEBY_AMIR",
 4 |   "icons": [
 5 |     {
 6 |       "src": "icon.png",
 7 |       "type": "image/x-icon"
 8 |     }
 9 |   ],
10 |   "start_url": ".",
11 |   "display": "standalone",
12 | 
13 |   "description": "Mini And Simple ToDO App Created With REACT.JS",
14 |   "screenshots": [
15 |     {
16 |       "src": "/images/screenshot1.png",
17 |       "type": "image/png",
18 |       "sizes": "540x720",
19 |       "form_factor": "narrow"
20 |     },
21 |     {
22 |       "src": "/images/screenshot2.jpg",
23 |       "type": "image/jpg",
24 |       "sizes": "720x540",
25 |       "form_factor": "wide"
26 |     }
27 |   ]
28 | 
29 | }
30 | 


--------------------------------------------------------------------------------
/src/Components/Todo/EditTodoForm.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | 
 3 | 
 4 | function EditTodoForm({ editTodo, task, onClose }) {
 5 | 
 6 |   const [value, setValue] = useState(task.task);
 7 | 
 8 | 
 9 |   const handleSubmit = (e) => {
10 | 
11 |     // prevent default action
12 |     e.preventDefault();
13 | 
14 |     // edti Todo value
15 |     editTodo(value, task.id);
16 | 
17 |   }
18 | 
19 |   
20 | 
21 | 
22 |   return (
23 | 
24 |     <div>
25 |       <form onSubmit={handleSubmit} className='TodoForm'>
26 |         <input type='text' value={value} onChange={(e) => setValue(e.target.value)} className='InputTodo' /> <br />
27 |         <button onClick={onClose} type='submit' className='ButtonTodo'>Edit</button>
28 |       </form>
29 |     </div>
30 |   )
31 | }
32 | 
33 | export default EditTodoForm


--------------------------------------------------------------------------------
/src/Components/Todo/TodoForm.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | 
 3 | function TodoFrom({ addTodo, onClose }) {
 4 | 
 5 |     const [value, setValue] = useState('');
 6 | 
 7 |     const handleSubmit = (e) => {
 8 |         e.preventDefault();
 9 | 
10 |         if (value) {
11 |             addTodo(value);
12 |             setValue('');
13 |             onClose();
14 |         }
15 |     }
16 | 
17 |     return (
18 |         <div>
19 |             <div className='TodoFormBox'>
20 |                 <form onSubmit={handleSubmit} className='TodoForm'>
21 |                     <input type='text' value={value} onChange={(e) => setValue(e.target.value)} className='InputTodo' placeholder='Write a task' autofocus onfocus="this.select();" maxLength="28" /> <br />
22 |                     <button type='submit' className='ButtonTodo'>Add Task</button>
23 |                 </form>
24 |             </div>
25 |         </div>
26 |     )
27 | }
28 | 
29 | export default TodoFrom


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!-- <!DOCTYPE html> -->
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="%PUBLIC_URL%/icon.png" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> -->
 9 |   <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> -->
10 | 
11 | 
12 |   <!-- <meta name="theme-color" content="#10101D" /> -->
13 |   <meta name="theme-color" data-theme="dark" content="#10101D">
14 |   <meta name="theme-color" data-theme="light" content="#fff">
15 |   
16 |   <meta name="description" content="Web site created using create-react-app" />
17 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |   <title>ToDo App</title>
19 | </head>
20 | 
21 | <body>
22 |   <noscript>You need to enable JavaScript to run this app.</noscript>
23 |   <div id="root"></div>
24 | 
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todoapp-v1",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@fortawesome/free-solid-svg-icons": "^6.4.2",
 7 |     "@fortawesome/react-fontawesome": "^0.2.0",
 8 |     "@testing-library/jest-dom": "^5.17.0",
 9 |     "@testing-library/react": "^13.4.0",
10 |     "@testing-library/user-event": "^13.5.0",
11 |     "react": "^18.2.0",
12 |     "react-dom": "^18.2.0",
13 |     "react-scripts": "5.0.1",
14 |     "uuid": "^9.0.1",
15 |     "web-vitals": "^2.1.4"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": [
25 |       "react-app",
26 |       "react-app/jest"
27 |     ]
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/Components/Todo/Todo.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 3 | import { faTrash, faPenToSquare, faSquareCheck } from '@fortawesome/free-solid-svg-icons'
 4 | 
 5 | import { ReactComponent as Logo } from "./square-regular.svg";
 6 | 
 7 | function Todo({ task, deleteTodo, editTodo, toggleComplete }) {
 8 | 
 9 |     function onClickCompleted() {
10 |         toggleComplete(task.id)
11 |     }
12 | 
13 |     return (
14 |         <div className='Todo-Container'>
15 |             <p className={`${task.completed ? 'completed' : ""}`} onClick={() => toggleComplete(task.id)}>{(task.task)}</p>
16 |             <div className='RightRow'>
17 |                 <FontAwesomeIcon icon={faPenToSquare} onClick={() => editTodo(task.id)} className='IconMargin' />
18 |                 <FontAwesomeIcon icon={faTrash} onClick={() => deleteTodo(task.id)} className='IconMargin' />
19 | 
20 |                 {task.completed ? <FontAwesomeIcon icon={faSquareCheck} onClick={onClickCompleted} className='IconMargin' /> : <Logo onClick={onClickCompleted} className='IconMargin' />}
21 | 
22 |             </div>
23 |         </div>
24 |     )
25 | }
26 | 
27 | export default Todo


--------------------------------------------------------------------------------
/src/Components/DarkTheme/DarkMode.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 3 | import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 4 | 
 5 | function DarkMode() {
 6 | 
 7 |   function setDarkMode() {
 8 |     document.querySelector("body").setAttribute("data-theme", "dark");
 9 |     localStorage.setItem("selectedThemeType", "dark");
10 |   }
11 | 
12 |   function setLightMode() {
13 |     document.querySelector("body").setAttribute("data-theme", "light");
14 |     localStorage.setItem("selectedThemeType", "light");
15 |   }
16 | 
17 |   const selectedTheme = localStorage.getItem("selectedThemeType");
18 | 
19 |   if (selectedTheme === "dark") {
20 |     setDarkMode();
21 |   }
22 | 
23 |   function toggleTheme(e) {
24 |     if (e.target.checked) setDarkMode();
25 |     else setLightMode();
26 |   }
27 | 
28 |   return (
29 |     <div className="Dark-Mode">
30 |       <input
31 |         className="Dark-Mode-Input"
32 |         type="checkbox"
33 |         id="Dark-Mode-Toggle"
34 |         onChange={toggleTheme}
35 |         defaultChecked={selectedTheme === 'dark'}
36 |       />
37 | 
38 |       <label className="Dark-Mode-Lable" for="Dark-Mode-Toggle">
39 |         <FontAwesomeIcon icon={faMoon} className="moon" />
40 |         <FontAwesomeIcon icon={faSun} className="sun" />
41 |       </label>
42 | 
43 |       <h1>ToDo-List</h1>
44 | 
45 |     </div>
46 |   );
47 | }
48 | 
49 | export default DarkMode;
50 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Basic TodoApp REACT.JS
 2 | 
 3 | I Make a simple "TodoApp" with React.js.
 4 | 
 5 | 
 6 | ### List of components for this project:
 7 | > - [x] LocalStorage
 8 | > - [x] DarkMode
 9 | > - [x] Add, Edit, Delete, Completed(Check)
10 | > - [x] Responsive For Mobile
11 | > - [x] PWA - Web Application
12 | > - [ ] Extention for browser
13 | > - [ ] Cancel button for edit todo task container
14 | > - [ ] Custom font for persian language
15 | > - [ ] swipeable-list - left or right swip for tasks :)
16 | > - [ ] Auto focuse for input in creat todolist task
17 | > - [ ] Delete Popup 
18 | > - [ ] Search bar - ex: Search your todo task or something else
19 | > - [ ] Navbar for completed & not completed (Pending) & all task
20 | > - [ ] ClearAll Button (Delete all task from localstorage or database)
21 | > - [ ] Show how many task left over - ex: 2 tasks left
22 | > - [ ] Get time, day and put in "Creat ToDo Task"
23 | > - [ ] By default have some task as local storage
24 | > - [ ] DataBase instead of localstorage
25 | > - [ ] Signup & Login 
26 | 
27 | 
28 | ## Screenshots
29 | <div>
30 |   <img width="300" src="https://raw.githubusercontent.com/amirrahemi01/Basic-TodoApp/main/src/ScreenShot/01.jpg" style="border-radius: 1rem;">
31 |   <img width="300" src="https://raw.githubusercontent.com/amirrahemi01/Basic-TodoApp/main/src/ScreenShot/02.jpg" style="border-radius: 1rem;">
32 |   <img width="300" src="https://raw.githubusercontent.com/amirrahemi01/Basic-TodoApp/main/src/ScreenShot/03.jpg" style="border-radius: 1rem;">
33 |   <img width="300" src="https://raw.githubusercontent.com/amirrahemi01/Basic-TodoApp/main/src/ScreenShot/04.jpg" style="border-radius: 1rem;">
34 |   <img width="300" src="https://github.com/amirrahemi01/Basic-TodoApp/blob/main/public/icon.png?raw=true" style="border-radius: 1rem;">
35 | </div>
36 | 
37 | 
38 | 
39 | <!-- ![App Screenshot](https://github.com/amirrahemi01/Basic-TodoApp/blob/main/public/icon.png?raw=true) -->
40 | 
41 | 
42 | ## Demo
43 | 
44 | Check working <a href="https://amirrahemi-todo.netlify.app/" target="_blank">DEMO</a>
45 | 
46 | 
47 | ## Run 
48 | 
49 | npm i && npm start
50 | 


--------------------------------------------------------------------------------
/src/Components/Todo/TodoApp.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react';
  2 | import TodoForm from "./TodoForm"
  3 | import EditTodoForm from './EditTodoForm';
  4 | import Todo from './Todo';
  5 | 
  6 | import { v4 as uuidv4 } from 'uuid';
  7 | 
  8 | // dark ligh toggle
  9 | import DarkMode from '../DarkTheme/DarkMode';
 10 | 
 11 | // modal
 12 | import OpenModal from '../Modal/OpenModal';
 13 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 14 | import { faPlus } from '@fortawesome/free-solid-svg-icons';
 15 | 
 16 | uuidv4()
 17 | 
 18 | function TodoApp() {
 19 | 
 20 |   
 21 | 
 22 | 
 23 |   const [todos, setTodos] = useState([])
 24 | 
 25 | 
 26 | 
 27 |   useEffect(() => {
 28 |     const savedTodos = JSON.parse(localStorage.getItem('todos')) || [];
 29 |     setTodos(savedTodos);
 30 |   }, []);
 31 | 
 32 |   const addTodo = todo => {
 33 |     const newTodos = [...todos, { id: uuidv4(), task: todo, completed: false, isEditing: false }];
 34 |     setTodos(newTodos);
 35 |     localStorage.setItem('todos', JSON.stringify(newTodos));
 36 |   }
 37 | 
 38 |   const toggleComplete = id => {
 39 |     const newTodos = todos.map((todo) => todo.id === id ? { ...todo, completed: !todo.completed } : todo);
 40 |     setTodos(newTodos);
 41 |     localStorage.setItem('todos', JSON.stringify(newTodos));
 42 |   }
 43 | 
 44 |   const deleteTodo = id => {
 45 |     const newTodos = todos.filter(todo => todo.id !== id)
 46 |     setTodos(newTodos);
 47 |     localStorage.setItem('todos', JSON.stringify(newTodos));
 48 |   }
 49 | 
 50 |   const editTodo = id => {
 51 |     setTodos(
 52 |       todos.map((todo) =>
 53 |         todo.id === id ? { ...todo, isEditing: !todo.isEditing } : todo
 54 |       )
 55 |     );
 56 |   }
 57 | 
 58 |   const editTask = (task, id) => {
 59 |     setTodos(
 60 |       todos.map((todo) =>
 61 |         todo.id === id ? { ...todo, task, isEditing: !todo.isEditing } : todo
 62 |       )
 63 |     );
 64 |   }
 65 | 
 66 |   // modal
 67 | 
 68 |   const [isOpen, setIsOpen] = useState(false);
 69 | 
 70 |   // prevent auto zoom for input in ios
 71 |   // if (navigator.userAgent.indexOf('iPhone') > -1) {
 72 | 
 73 |   //   document.querySelector("body").setAttribute("device", "ios");
 74 | 
 75 |   //   document
 76 |   //     .querySelector("[name=viewport]")
 77 |   //     .setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1")
 78 |   // } else if (navigator.userAgentData.mobile) {
 79 |   //   document.querySelector("body").setAttribute("device", "mobile");
 80 |   }
 81 | 
 82 | 
 83 |   return (
 84 |     <div className='TodoWrapper' id='TodoWrapper'>
 85 | 
 86 |       <div className='Content'>
 87 | 
 88 |         <DarkMode />
 89 | 
 90 |         {todos.map((todo) =>
 91 |           todo.isEditing ? (
 92 |             <EditTodoForm editTodo={editTask} task={todo} onClose={() => setIsOpen(false)} />
 93 |           ) : (
 94 |             <>
 95 |               <Todo
 96 |                 key={todo.id}
 97 |                 task={todo}
 98 |                 deleteTodo={deleteTodo}
 99 |                 editTodo={editTodo}
100 |                 toggleComplete={toggleComplete}
101 |               />
102 |               <br />
103 |             </>
104 |           )
105 |         )}
106 | 
107 |         <OpenModal open={isOpen} onClose={() => setIsOpen(false)} >
108 |           <TodoForm onClose={() => setIsOpen(false)} addTodo={addTodo} />
109 |         </OpenModal>
110 | 
111 |       </div>
112 |       <div onClick={() => setIsOpen(true)} className='FlexConBTN'>
113 |         <svg id='AddToDo' viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
114 |           <path fill="currentColor" d="M44.8,-77.6C58.2,-69.9,69.3,-58.1,77,
115 |           -44.5C84.8,-30.9,89.3,-15.5,90.3,0.6C91.3,16.6,88.8,33.2,80.9,46.5C72.
116 |           9,59.9,59.5,69.9,45.1,77.7C30.8,85.5,15.4,91,-0.4,91.7C-16.1,92.3,-32.2,88,
117 |           -45.9,79.8C-59.5,71.6,-70.6,59.4,-78.6,45.4C-86.5,31.5,-91.2,15.7,-90.8,
118 |           0.3C-90.3,-15.2,-84.7,-30.5,-76.5,-43.8C-68.2,-57.2,-57.2,-68.6,-44,
119 |           -76.5C-30.8,-84.3,-15.4,-88.4,0.2,-88.7C15.7,-89,31.4,-85.3,44.8,-77.6Z"
120 |             transform="translate(100 100)" />
121 |           <FontAwesomeIcon icon={faPlus} />
122 |         </svg>
123 |       </div>
124 |     </div>
125 |   )
126 | }
127 | 
128 | export default TodoApp;
129 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   /* Colors */
  3 |   --primary-color: #060606;
  4 |   --secondary-color: #fff;
  5 |   --container: #fff;
  6 |   --font-color: #424242;
  7 |   --heading-color: #292922;
  8 |   --bg-color: #E4E5EA;
  9 |   --todo-form: #f5f5f5;
 10 |   --btn-form: #ffffff;
 11 |   --btn-form-focus: #dadada;
 12 |   --btn-add: #ffffff;
 13 |   --scrl-thumb: #a1a1a1;
 14 |   --scrl-track: #f1f1f1;
 15 |   --shadow: #00000091;
 16 |   --completed: #b5b5b5;
 17 |   --btn-form-todo: #f00;
 18 |   --main-width: 375px;
 19 |   --main-width-inner: 360px;
 20 |   --bottom-addTodo: 0;
 21 | }
 22 | 
 23 | [data-theme="dark"] {
 24 |   --primary-color: #fff;
 25 |   --secondary-color: #000;
 26 |   --container: #191933;
 27 |   --font-color: #e1b12c;
 28 |   --btn-add: #494971;
 29 |   --heading-color: #292922;
 30 |   --bg-color: #10101D;
 31 |   --todo-form: #09090d;
 32 |   --btn-form-focus: #7878de;
 33 |   --btn-form: #eaeaea;
 34 |   --scrl-thumb: #66667a;
 35 |   --scrl-track: #24242d;
 36 |   --shadow: #bdbdbd26;
 37 |   --completed: #92929280;
 38 |   --btn-form-todo: #f00;
 39 | }
 40 | 
 41 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 42 | 
 43 | 
 44 | ::-webkit-scrollbar {
 45 |   width: 7px;
 46 |   border-radius: 16px;
 47 |   cursor: pointer;
 48 |   background-color: transparent;
 49 | }
 50 | 
 51 | ::-webkit-scrollbar-thumb {
 52 |   background-color: transparent;
 53 |   border-radius: 16px;
 54 |   cursor: pointer;
 55 | }
 56 | 
 57 | ::-webkit-scrollbar-track {
 58 |   background-color: transparent;
 59 |   border-radius: 16px;
 60 |   cursor: pointer;
 61 | }
 62 | 
 63 | 
 64 | * {
 65 |   font-family: 'Poppins', sans-serif;
 66 |   margin: 0;
 67 |   padding: 0;
 68 |   box-sizing: border-box;
 69 |   transition: all 0.5s ease-in-out;
 70 |   text-transform: capitalize;
 71 | }
 72 | 
 73 | body {
 74 |   background-color: #282c34;
 75 |   margin: 0;
 76 |   display: flex;
 77 |   justify-content: center;
 78 |   align-items: center;
 79 |   -webkit-user-select: none;
 80 |   -ms-user-select: none;
 81 |   user-select: none;
 82 | }
 83 | 
 84 | .App {
 85 |   text-align: center;
 86 | }
 87 | 
 88 | h1 {
 89 |   color: var(--primary-color);
 90 |   margin-bottom: 0.5rem;
 91 |   font-size: 1.75rem;
 92 | }
 93 | 
 94 | .TodoWrapper {
 95 |   background: var(--bg-color);
 96 |   color: var(--primary-color);
 97 |   border-radius: 16px;
 98 |   padding: 6px 0px;
 99 |   height: 85vh;
100 |   width: 100%;
101 |   padding: 18px 0px;
102 | }
103 | 
104 | .Content {
105 |   padding: 15px;
106 |   overflow-y: auto;
107 |   border-radius: 20px;
108 |   height: 80vh;
109 |   width: var(--main-width);
110 |   display: flex;
111 |   flex-direction: column;
112 | }
113 | 
114 | /* Style the scrollbar */
115 | .Content::-webkit-scrollbar {
116 |   width: 7px;
117 |   border-radius: 16px;
118 |   cursor: pointer;
119 | }
120 | 
121 | .Content::-webkit-scrollbar-thumb {
122 |   background-color: var(--scrl-thumb);
123 |   border-radius: 16px;
124 |   cursor: pointer;
125 | }
126 | 
127 | .Content::-webkit-scrollbar-track {
128 |   background-color: var(--scrl-track);
129 |   border-radius: 16px;
130 |   cursor: pointer;
131 | }
132 | 
133 | .Content br {
134 |   display: none;
135 | }
136 | 
137 | .Todo-Container {
138 |   background-color: var(--container);
139 |   border-radius: 11px;
140 |   padding: 10px 16px;
141 |   margin-top: 1rem;
142 |   display: flex;
143 |   flex-direction: row;
144 |   flex-wrap: wrap;
145 |   align-content: flex-start;
146 |   justify-content: space-between;
147 | }
148 | 
149 | .Todo-Container p {
150 |   color: var(--primary-color);
151 | }
152 | 
153 | .Todo-Container svg {
154 |   color: var(--primary-color);
155 | }
156 | 
157 | .RightRow {
158 |   display: flex;
159 |   align-items: center;
160 |   justify-content: center;
161 | }
162 | 
163 | .Todo-Container p,
164 | .RightRow {
165 |   cursor: pointer;
166 | }
167 | 
168 | .FlexConBTN {
169 |   display: flex;
170 |   justify-content: center;
171 |   position: relative;
172 |   cursor: pointer;
173 | }
174 | 
175 | .FlexConBTN svg {
176 |   width: 40px;
177 |   position: absolute;
178 |   color: var(--btn-add);
179 |   background-color: var(--btn-add);
180 |   border-radius: 10px;
181 |   padding: 1px;
182 |   bottom: var(--bottom-addTodo);
183 | }
184 | 
185 | 
186 | .FlexConBTN svg.fa-plus {
187 |   color: var(--primary-color);
188 | }
189 | 
190 | .TodoForm {
191 |   width: 100%;
192 |   background: var(--todo-form);
193 |   border-radius: 1rem;
194 |   padding: 1rem;
195 |   margin: 1rem auto;
196 | }
197 | 
198 | .TodoFormBox {
199 |   display: flex;
200 |   align-items: center;
201 |   bottom: 0;
202 |   margin: 0 auto;
203 |   width: auto;
204 | }
205 | 
206 | .InputTodo {
207 |   outline: none;
208 |   background: var(--btn-form);
209 |   border: 1px solid var(--btn-form);
210 |   padding: 10px 16px;
211 |   margin-top: 0;
212 |   margin-bottom: 10px;
213 |   width: 100%;
214 |   color: #000;
215 |   border-radius: 1rem;
216 | }
217 | 
218 | .InputTodo::placeholder {
219 |   color: #00000052;
220 | }
221 | 
222 | .InputTodo:focus {
223 |   background: var(--btn-form-focus);
224 |   border: 1px solid var(--btn-form-focus);
225 |   color: var(--primary-color);
226 | }
227 | 
228 | .ButtonTodo {
229 |   outline: none;
230 |   background: var(--btn-form);
231 |   border: 1px solid var(--btn-form);
232 |   padding: 10px 16px;
233 |   margin-top: 5px;
234 |   margin-bottom: 0;
235 |   width: 100%;
236 |   color: #000;
237 |   border-radius: 1rem;
238 |   cursor: pointer;
239 | }
240 | 
241 | .ButtonTodo:hover {
242 |   background: var(--btn-form-focus);
243 |   border: 1px solid var(--btn-form-focus);
244 |   color: var(--secondary-color);
245 | }
246 | 
247 | .Todo {
248 |   display: flex;
249 |   justify-content: space-between;
250 |   align-items: center;
251 |   background: #8758ff;
252 |   color: #fff;
253 |   padding: 0.75rem 1rem;
254 |   border-radius: 5px;
255 |   margin-bottom: 1rem;
256 |   cursor: pointer;
257 | }
258 | 
259 | .fa-trash {
260 |   margin-left: 0.75rem;
261 | }
262 | 
263 | .IconMargin {
264 |   margin: 0 6px;
265 |   display: flex;
266 |   width: 12px;
267 |   justify-content: center;
268 |   align-items: center;
269 |   align-content: center;
270 |   flex-direction: column;
271 | }
272 | 
273 | .Todo-Container .completed {
274 |   color: var(--completed);
275 |   text-decoration: line-through;
276 | }
277 | 
278 | /* toggle */
279 | 
280 | .Dark-Mode {
281 |   display: flex;
282 |   flex-direction: row;
283 |   position: relative;
284 | }
285 | 
286 | .Dark-Mode h1 {
287 |   position: absolute;
288 |   right: 0;
289 |   bottom: -17px;
290 | }
291 | 
292 | .Dark-Mode-Lable {
293 |   width: 65px;
294 |   height: 30px;
295 |   position: relative;
296 |   display: block;
297 |   background: #ebebeb;
298 |   border-radius: 200px;
299 |   box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
300 |     inset 0px -5px 15px rgba(255, 255, 255, 0.4);
301 |   cursor: pointer;
302 |   transition: 0.3s;
303 |   z-index: 0;
304 | }
305 | 
306 | .Dark-Mode-Lable:after {
307 |   content: "";
308 |   width: 25px;
309 |   height: 25px;
310 |   position: absolute;
311 |   top: 3px;
312 |   left: 3px;
313 |   background: linear-gradient(180deg, #ffcc89, #d8860b);
314 |   border-radius: 180px;
315 |   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
316 |   transition: 0.3s;
317 | }
318 | 
319 | .Dark-Mode-Input {
320 |   width: 0;
321 |   height: 0;
322 |   visibility: hidden;
323 | }
324 | 
325 | .Dark-Mode-Input:checked+.Dark-Mode-Lable {
326 |   background: #242424;
327 | }
328 | 
329 | .Dark-Mode-Input:checked+.Dark-Mode-Lable:after {
330 |   left: 62px;
331 |   transform: translateX(-100%);
332 |   background: linear-gradient(180deg, #777, #3a3a3a);
333 | }
334 | 
335 | .Dark-Mode-Lable:active:after {
336 |   width: 30px;
337 | }
338 | 
339 | .Dark-Mode-Lable svg {
340 |   position: absolute;
341 |   width: 20px;
342 |   top: 5px;
343 |   z-index: 100;
344 | }
345 | 
346 | .Dark-Mode-Lable svg.sun {
347 |   left: 5px;
348 |   fill: #fff;
349 |   transition: 0.3s;
350 | }
351 | 
352 | .Dark-Mode-Lable svg.moon {
353 |   left: 40px;
354 |   fill: #7e7e7e;
355 |   transition: 0.3s;
356 | }
357 | 
358 | .Dark-Mode-Input:checked+.Dark-Mode-Lable svg.sun {
359 |   fill: #7e7e7e;
360 | }
361 | 
362 | .Dark-Mode-Input:checked+.Dark-Mode-Lable svg.moon {
363 |   fill: #fff;
364 | }
365 | 
366 | /* Modal */
367 | 
368 | .Modal-Container {
369 |   position: fixed;
370 |   display: flex;
371 |   align-content: center;
372 |   justify-content: center;
373 |   align-items: center;
374 |   top: 0;
375 |   left: 0;
376 |   width: 100%;
377 |   height: 100vh;
378 |   backdrop-filter: blur(5px);
379 |   -webkit-backdrop-filter: blur(5px);
380 |   z-index: 1;
381 | }
382 | 
383 | .Modal-Inner {
384 |   position: relative;
385 |   padding: 15px;
386 |   width: var(--main-width-inner);
387 |   max-width: 640px;
388 |   background-color: var(--todo-form);
389 |   color: #f5f5f5;
390 |   border-radius: 1rem;
391 |   box-shadow: 3px 3px 20px var(--shadow);
392 | }
393 | 
394 | .Modal-Inner .close-btn {
395 |   position: absolute;
396 |   top: 15px;
397 |   right: 15px;
398 |   border: none;
399 |   background: transparent;
400 |   color: var(--primary-color);
401 |   font-weight: bolder;
402 |   cursor: pointer;
403 | }
404 | 
405 | /* responsive */
406 | 
407 | @media only screen and (max-width: 500px) {
408 |   body {
409 |     display: block;
410 |     background-color: var(--bg-color);
411 |   }
412 | 
413 |   .TodoWrapper {
414 |     width: 100%;
415 |     margin: 0;
416 |     height: 100vh;
417 |     border-radius: 0;
418 |   }
419 | 
420 |   .Content {
421 |     height: 95vh;
422 |     width: 100%;
423 |     margin: 0 auto;
424 |     overflow-y: visible;
425 |   }
426 | 
427 |   .Content::-webkit-scrollbar {
428 |     border-radius: 16px;
429 |   }
430 | 
431 |   .Content::-webkit-scrollbar-thumb {
432 |     background-color: transparent;
433 |   }
434 | 
435 |   .Content::-webkit-scrollbar-track {
436 |     background-color: transparent;
437 |   }
438 | 
439 |   .Content br {
440 |     display: none;
441 |   }
442 | 
443 |   .Content br:last-child {
444 |     display: block;
445 |   }
446 | 
447 |   .FlexConBTN svg {
448 |     width: 40px;
449 |     position: fixed;
450 |     bottom: var(--bottom-addTodo);
451 |     margin: 8px auto;
452 |   }
453 | }
454 | 


--------------------------------------------------------------------------------