React App

├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── index.css └── index.js └── yarn.lock /.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 - DevSuperior 2 | 3 | Live 14/04/2021 - Todo 4 | 5 | ## Como rodar o projeto? 6 | 7 | - Faça um fork do projeto para o seu github,
8 | - Clone o projeto para sua máquina local,
9 | - Utilize o comando `yarn` para instalar as dependências,
10 | - Execute `yarn start` para rodar o projeto localmente.
11 | Acesse `http://localhost:3000`. 12 | 13 | ## Desafio 14 | 15 | - [ ] Editar o Todo
16 | - [ ] Salvar os dados na localStorage / Recuperar os dados da localStorage 17 | 18 | ## Observações 19 | O desafio deve ser encarado como um exercício de fixação. faça ele apenas quando tiver um tempinho sobrando e suas aulas estiverem em dia 😜 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "4.0.3", 12 | "web-vitals": "^1.0.1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsuperior/todo-react-live-14042021/c1c4d7132a7ffc0ef9cb16a114412d170fa4b435/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/devsuperior/todo-react-live-14042021/c1c4d7132a7ffc0ef9cb16a114412d170fa4b435/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsuperior/todo-react-live-14042021/c1c4d7132a7ffc0ef9cb16a114412d170fa4b435/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 { useState } from "react"; 2 | 3 | function App() { 4 | const [taskTitle, setTaskTitle] = useState(""); 5 | const [tasks, setTasks] = useState([]); 6 | 7 | function addTask() { 8 | const newTask = { 9 | id: Math.random().toString(10).substring(7), 10 | title: taskTitle, 11 | }; 12 | 13 | if (taskTitle) { 14 | const tasksCopy = [...tasks]; 15 | tasksCopy.push(newTask); 16 | setTasks(tasksCopy); 17 | setTaskTitle(""); 18 | } 19 | } 20 | 21 | function deleteTask(id) { 22 | const filteredTasks = tasks.filter((task) => task.id !== id); 23 | setTasks(filteredTasks); 24 | } 25 | 26 | return ( 27 |

28 |

29 | setTaskTitle(e.target.value)} 34 | /> 35 | 38 |

39 |

40 | {tasks.map((task) => ( 41 |

42 |

{task.title}

43 | 46 |

47 | ))} 48 |

49 |

50 | ); 51 | } 52 | 53 | export default App; 54 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | outline: none; 6 | } 7 | 8 | body { 9 | width: 100%; 10 | background: #dedede; 11 | } 12 | 13 | .app { 14 | width: 60vw; 15 | margin: 0 auto; 16 | } 17 | 18 | /* Formulario */ 19 | 20 | .form { 21 | width: 100%; 22 | height: 200px; 23 | display: flex; 24 | flex-direction: row; 25 | align-items: center; 26 | justify-content: space-between; 27 | } 28 | 29 | .form input { 30 | width: 80%; 31 | height: 50px; 32 | border: none; 33 | border-radius: 4px; 34 | text-indent: 10px; 35 | } 36 | 37 | .form button { 38 | width: 18%; 39 | height: 50px; 40 | cursor: pointer; 41 | background: #ff8400; 42 | color: white; 43 | font-weight: bold; 44 | border-radius: 4px; 45 | border: none; 46 | transition: all 0.4s; 47 | } 48 | 49 | .form button:hover { 50 | background: #ff8400a1; 51 | } 52 | 53 | /* Tarefas */ 54 | 55 | .tasks { 56 | width: 100%; 57 | } 58 | 59 | .task { 60 | width: 100%; 61 | height: 50px; 62 | background: #fff; 63 | border-radius: 0.25rem; 64 | margin-bottom: 0.625rem; 65 | display: flex; 66 | flex-direction: row; 67 | align-items: center; 68 | justify-content: space-between; 69 | padding: 0px 15px; 70 | } 71 | 72 | .task button { 73 | border: none; 74 | width: 24px; 75 | height: 24px; 76 | cursor: pointer; 77 | transition: all 0.4s; 78 | } 79 | 80 | .task button:hover { 81 | background: red; 82 | color: white; 83 | } 84 | -------------------------------------------------------------------------------- /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 | ); --------------------------------------------------------------------------------