React App

├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── Components ├── Styles.css └── Todo.jsx ├── Images └── todo.svg.svg ├── index.css └── 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 | # React TODO ✍ 2 | A todo-listapp to take notes, add items, complete Tasks and keep an log of your daily activities with comprehencive delete list and editlist feature and an amazing UI. 3 | 4 | ![Imgur](https://i.imgur.com/65jahfN.png) 5 | 6 | ## Key Features 7 | * Dynamic UI 8 | * LocalStorage of list Data 9 | * Edit option to make corrections to existing list 10 | 11 |
12 | 13 | ## Build With 14 |
15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 | 23 |
24 |
25 |
26 | 27 | Leave a ⭐ from [here](https://github.com/restrictedCodex/restrictedCodex) if you like 😁 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todolist", 3 | "homepage": "https://restrictedCodex.github.io/todo-list", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.14.1", 8 | "@testing-library/react": "^11.2.7", 9 | "@testing-library/user-event": "^12.8.3", 10 | "gh-pages": "^3.2.3", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-scripts": "4.0.3", 14 | "web-vitals": "^1.1.2" 15 | }, 16 | "scripts": { 17 | "predeploy": "npm run build", 18 | "deploy": "gh-pages -d build", 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/restrictedCodex/todo-list/177b07365b8b6e2a273921b87cd84063e9c86c69/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 18 | 19 | 28 | React App 29 | 30 | 31 | 32 |

33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/restrictedCodex/todo-list/177b07365b8b6e2a273921b87cd84063e9c86c69/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/restrictedCodex/todo-list/177b07365b8b6e2a273921b87cd84063e9c86c69/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.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/restrictedCodex/todo-list/177b07365b8b6e2a273921b87cd84063e9c86c69/src/App.css -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Todo from './Components/Todo'; 3 | 4 | function App() { 5 | return ( 6 | <> 7 | 8 | 9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /src/Components/Styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Source Sans Pro", sans-serif; 8 | } 9 | 10 | html { 11 | font-size: 62.5%; 12 | } 13 | 14 | .main-div { 15 | min-height: 100vh; 16 | background: #060822; 17 | display: flex; 18 | justify-content: center; 19 | /* align-items: center; */ 20 | } 21 | 22 | .child-div { 23 | text-align: center; 24 | margin-top: 12rem; 25 | } 26 | 27 | .child-div figure img { 28 | width: 10rem; 29 | height: 8rem; 30 | } 31 | 32 | .child-div figure figcaption { 33 | color: #fff; 34 | font-size: 2.2rem; 35 | padding-top: 2rem; 36 | text-transform: capitalize; 37 | } 38 | 39 | input { 40 | /* display: block; */ 41 | min-width: 40rem; 42 | height: 3.4rem; 43 | padding: 2rem 1.2rem; 44 | font-size: 1.8rem; 45 | line-height: 1.42857143; 46 | margin-top: 2rem; 47 | color: rgb(58, 57, 57); 48 | background-color: #fff; 49 | background-image: none; 50 | border: 0.1rem solid #ccc; 51 | border-radius: 0.4rem; 52 | -webkit-box-shadow: inset 0 0.1rem 0.1rem rgb(0 0 0 / 8%); 53 | box-shadow: inset 0 0.1rem 0.1rem rgb(0 0 0 / 8%); 54 | transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 55 | } 56 | 57 | input, 58 | input:focus, 59 | input:active, 60 | input:active:focus { 61 | border: none; 62 | padding: 2.3rem 1.5rem; 63 | outline: none; 64 | } 65 | input { 66 | -webkit-box-shadow: none; 67 | box-shadow: none; 68 | -webkit-transition: all 0.2s linear; 69 | transition: all 0.2s linear; 70 | } 71 | input:focus { 72 | -webkit-box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.2); 73 | box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.2); 74 | } 75 | 76 | 77 | .todo-btn { 78 | width: 5rem; 79 | display: flex; 80 | justify-content: space-around; 81 | } 82 | 83 | .fa { 84 | margin-left: -2.5rem; 85 | cursor: pointer; 86 | pointer-events: auto; 87 | z-index: 10; 88 | background-color: #fff; 89 | background-image: none; 90 | color: #666; 91 | -webkit-transition: color 0.15s linear; 92 | transition: color 0.15s linear; 93 | font-size: 2rem; 94 | } 95 | .fa:hover { 96 | color: rgb(47, 214, 122); 97 | } 98 | 99 | .fa-plus:before { 100 | content: "\f067"; 101 | font-size: 1.5rem; 102 | } 103 | 104 | .showItems { 105 | margin-top: 3rem; 106 | text-align: center; 107 | } 108 | 109 | .eachItem { 110 | background: #fff; 111 | padding: 1.2rem 1rem; 112 | border-radius: 0.5rem; 113 | margin-bottom: 0.7rem; 114 | margin-left: 1rem; 115 | min-width: 40rem; 116 | word-break: break-word; 117 | background: rgb(85, 41, 220); 118 | display: flex; 119 | justify-content: space-between; 120 | align-items: center; 121 | } 122 | 123 | .eachItem:hover { 124 | background: rgb(249, 249, 252); 125 | color: rgb(85, 41, 220); 126 | } 127 | 128 | .showItems .eachItem h3 { 129 | padding-left: 1rem; 130 | font-size: 1.6rem; 131 | color: #fff; 132 | } 133 | 134 | .fa-trash-alt, 135 | .fa-edit { 136 | /* margin-left: -2.5rem; */ 137 | cursor: pointer; 138 | pointer-events: auto; 139 | z-index: 10; 140 | color: rgb(251, 251, 251); 141 | -webkit-transition: color 0.15s linear; 142 | transition: color 0.15s linear; 143 | font-size: 2rem; 144 | } 145 | 146 | .addItems .fa-edit { 147 | color: rgb(47, 214, 122); 148 | } 149 | 150 | .fa-edit { 151 | margin-left: -3.5rem; 152 | } 153 | 154 | 155 | .eachItem:hover .fa-trash-alt { 156 | color: rgb(214, 47, 61); 157 | } 158 | 159 | .eachItem:hover .fa-edit { 160 | color: rgb(100, 214, 47); 161 | } 162 | 163 | .eachItem:hover h3 { 164 | color: rgb(85, 41, 220); 165 | } 166 | 167 | .btn { 168 | letter-spacing: 0.1em; 169 | cursor: pointer; 170 | font-size: 14px; 171 | font-weight: 400; 172 | line-height: 45px; 173 | max-width: 160px; 174 | position: relative; 175 | text-decoration: none; 176 | text-transform: uppercase; 177 | width: 100%; 178 | } 179 | .btn:hover { 180 | text-decoration: none; 181 | } 182 | 183 | .effect04 { 184 | --uismLinkDisplay: var(--smLinkDisplay, inline-flex); 185 | display: var(--uismLinkDisplay); 186 | color: #000; 187 | outline: solid 2px #000; 188 | position: relative; 189 | transition-duration: 0.4s; 190 | overflow: hidden; 191 | } 192 | 193 | .effect04::before, 194 | .effect04 span { 195 | margin: 0 auto; 196 | transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); 197 | transition-duration: 0.4s; 198 | } 199 | 200 | .effect04:hover { 201 | background-color: rgb(85, 41, 220); 202 | } 203 | 204 | .effect04:hover span { 205 | -webkit-transform: translateY(-400%) scale(-0.1, 20); 206 | transform: translateY(-400%) scale(-0.1, 20); 207 | } 208 | 209 | .effect04::before { 210 | content: attr(data-sm-link-text); 211 | color: #fff; 212 | position: absolute; 213 | left: 0; 214 | right: 0; 215 | margin: auto; 216 | -webkit-transform: translateY(500%) scale(-0.1, 20); 217 | transform: translateY(500%) scale(-0.1, 20); 218 | } 219 | 220 | .effect04:hover::before { 221 | letter-spacing: 0.05em; 222 | -webkit-transform: translateY(0) scale(1, 1); 223 | transform: translateY(0) scale(1, 1); 224 | } -------------------------------------------------------------------------------- /src/Components/Todo.jsx: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react' 2 | import '../Components/Styles.css' 3 | import mainImage from '../Images/todo.svg.svg' 4 | 5 | const getLocalData = () => { 6 | const lists = localStorage.getItem("mytodolist"); 7 | if(lists) { 8 | return JSON.parse(lists); 9 | } else { 10 | return []; 11 | } 12 | } 13 | 14 | const Todo = () => { 15 | 16 | const [inputData, setInputData] = useState(""); 17 | const [item, setItem] = useState(getLocalData()); 18 | const [isEditItem, setIsEditItem] = useState(""); 19 | const [toggleButton, setToggleButton] = useState(false); 20 | 21 | const addItem = () => { 22 | if(!inputData){ 23 | alert("🚨🚨 Please Fill The Data") 24 | } 25 | else if(inputData && toggleButton){ 26 | setItem( 27 | item.map((currElem) => { 28 | if(currElem.id === isEditItem){ 29 | return {...currElem, name: inputData}; 30 | } 31 | return currElem; 32 | }) 33 | ); 34 | setInputData(""); 35 | setIsEditItem(null); 36 | setToggleButton(false); 37 | } 38 | else { 39 | const myNewInputData = { 40 | id:new Date().getTime().toString(), 41 | name: inputData, 42 | } 43 | setItem([...item,myNewInputData]); 44 | setInputData(""); 45 | } 46 | } 47 | 48 | const editItem = (index) => { 49 | const itemEdited = item.find((currElem) => { 50 | return currElem.id === index; 51 | }) 52 | setInputData(itemEdited.name); 53 | setIsEditItem(index); 54 | setToggleButton(true); 55 | } 56 | 57 | const deleteItem = (index) =>{ 58 | const updatedItem = item.filter((currElem)=>{ 59 | return currElem.id !== index; 60 | }); 61 | setItem(updatedItem); 62 | } 63 | 64 | const removeAll = () => { 65 | setItem([]); 66 | } 67 | 68 | useEffect(() => { 69 | localStorage.setItem("mytodolist", JSON.stringify(item)); 70 | }, [item]) 71 | 72 | return ( 73 | <> 74 |

75 |

76 |

80 |

81 | setInputData(event.target.value)} 86 | /> 87 | {toggleButton ? ( 88 | 89 | ):( 90 | 91 | )} 92 | 93 |

94 | 95 |

96 | {item.map((currElem) => { 97 | return ( 98 |

99 |

{currElem.name}

100 |

101 | editItem(currElem.id)}> 102 | deleteItem(currElem.id)}> 103 |

104 |

105 | ); 106 | })} 107 | 108 |

109 | 110 |

111 | 114 |

115 |

116 |

117 | 118 | ) 119 | } 120 | 121 | export default Todo 122 | -------------------------------------------------------------------------------- /src/Images/todo.svg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | 13 | --------------------------------------------------------------------------------