├── .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 | );
--------------------------------------------------------------------------------