├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── Assets │ ├── app.css │ └── index.css ├── Components │ ├── CardNota │ │ ├── cardNota.jsx │ │ ├── estilo.css │ │ └── index.js │ ├── Formulario │ │ ├── estilo.css │ │ ├── formulario.jsx │ │ └── index.js │ └── ListaNotas │ │ ├── estilo.css │ │ ├── index.js │ │ └── lista.jsx ├── index.js └── reportWebVitals.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 | # Olá, Eu sou a Rafaella Ballerini 🚀 2 | 3 | A intenção desse projeto é fazer com que seu dia fique mais organizado usando notas isso mesmo notas, 4 | com ele você pode anotar todas as suas tarefas, coisas que você precise lembrar ou anotar uma receita de bolo!🥮 Espero que goste do projeto e aproveitando da uma estrela nesse projeto para ajudar 🥺 5 | 6 | 7 | # Ferramentas usadas 🧰 8 | 9 | 🔨 Estè projeto foi interamente feito com ReactJS. 10 | 11 | 📜Foi usado a ferramenta Visual Studio Code como editor de texto. 12 | 13 | ## Quem fez esse projeto? 🤔 14 | 15 | Este projeto somente eu que fiz 🤩 16 | 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ceep", 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.1", 10 | "react-dom": "^17.0.1", 11 | "react-scripts": "4.0.2", 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/rafaballerini/ReactCards/dcadd8bc6639cd4fc2f12c0ba6b957a8d0378048/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/rafaballerini/ReactCards/dcadd8bc6639cd4fc2f12c0ba6b957a8d0378048/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafaballerini/ReactCards/dcadd8bc6639cd4fc2f12c0ba6b957a8d0378048/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 React, { Component } from "react"; 2 | import ListaDeNotas from "./Components/ListaNotas/lista"; 3 | import FormularioCadastro from "./Components/Formulario/formulario"; 4 | import "./Assets/app.css"; 5 | import './Assets/index.css'; 6 | class App extends Component { 7 | 8 | constructor(){ 9 | super(); 10 | this.state = { 11 | notas: [] 12 | }; 13 | } 14 | 15 | criarNota(titulo, texto){ 16 | const novaNota = {titulo, texto}; 17 | const novoArrayNotas = [...this.state.notas,novaNota] 18 | const novoEstado = { 19 | notas: novoArrayNotas 20 | } 21 | this.setState(novoEstado); 22 | } 23 | 24 | render() { 25 | return ( 26 |
27 | 28 | 29 |
30 | ); 31 | } 32 | } 33 | 34 | export default App; -------------------------------------------------------------------------------- /src/Assets/app.css: -------------------------------------------------------------------------------- 1 | .conteudo { 2 | display: flex; 3 | } 4 | 5 | :root { 6 | --primaria: #58a4b0; 7 | --secundaria: #373f51; 8 | --secundaria-ativa: #cccccc; 9 | --fundo: #ffffff; 10 | --fundo-detalhes: #ececec; 11 | } -------------------------------------------------------------------------------- /src/Assets/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | div, 4 | span, 5 | applet, 6 | object, 7 | iframe, 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6, 14 | p, 15 | blockquote, 16 | pre, 17 | a, 18 | abbr, 19 | acronym, 20 | address, 21 | big, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | s, 32 | samp, 33 | small, 34 | strike, 35 | strong, 36 | sub, 37 | sup, 38 | tt, 39 | var, 40 | b, 41 | u, 42 | i, 43 | center, 44 | dl, 45 | dt, 46 | dd, 47 | ol, 48 | ul, 49 | li, 50 | fieldset, 51 | form, 52 | label, 53 | legend, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td, 62 | article, 63 | aside, 64 | canvas, 65 | details, 66 | embed, 67 | figure, 68 | figcaption, 69 | footer, 70 | header, 71 | hgroup, 72 | menu, 73 | nav, 74 | output, 75 | ruby, 76 | section, 77 | summary, 78 | time, 79 | mark, 80 | audio, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | 90 | /* make sure to set some focus styles for accessibility */ 91 | :focus { 92 | outline: 0; 93 | } 94 | 95 | /* HTML5 display-role reset for older browsers */ 96 | article, 97 | aside, 98 | details, 99 | figcaption, 100 | figure, 101 | footer, 102 | header, 103 | hgroup, 104 | menu, 105 | nav, 106 | section { 107 | display: block; 108 | } 109 | 110 | body { 111 | line-height: 1; 112 | } 113 | 114 | ol, 115 | ul { 116 | list-style: none; 117 | } 118 | 119 | blockquote, 120 | q { 121 | quotes: none; 122 | } 123 | 124 | blockquote:before, 125 | blockquote:after, 126 | q:before, 127 | q:after { 128 | content: ""; 129 | content: none; 130 | } 131 | 132 | table { 133 | border-collapse: collapse; 134 | border-spacing: 0; 135 | } 136 | 137 | input[type="search"]::-webkit-search-cancel-button, 138 | input[type="search"]::-webkit-search-decoration, 139 | input[type="search"]::-webkit-search-results-button, 140 | input[type="search"]::-webkit-search-results-decoration { 141 | -webkit-appearance: none; 142 | -moz-appearance: none; 143 | } 144 | 145 | input[type="search"] { 146 | -webkit-appearance: none; 147 | -moz-appearance: none; 148 | -webkit-box-sizing: content-box; 149 | -moz-box-sizing: content-box; 150 | box-sizing: content-box; 151 | } 152 | 153 | textarea { 154 | overflow: auto; 155 | vertical-align: top; 156 | resize: vertical; 157 | } 158 | 159 | /** 160 | * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. 161 | */ 162 | 163 | audio, 164 | canvas, 165 | video { 166 | display: inline-block; 167 | *display: inline; 168 | *zoom: 1; 169 | max-width: 100%; 170 | } 171 | 172 | /** 173 | * Prevent modern browsers from displaying `audio` without controls. 174 | * Remove excess height in iOS 5 devices. 175 | */ 176 | 177 | audio:not([controls]) { 178 | display: none; 179 | height: 0; 180 | } 181 | 182 | /** 183 | * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. 184 | * Known issue: no IE 6 support. 185 | */ 186 | 187 | [hidden] { 188 | display: none; 189 | } 190 | 191 | /** 192 | * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using 193 | * `em` units. 194 | * 2. Prevent iOS text size adjust after orientation change, without disabling 195 | * user zoom. 196 | */ 197 | 198 | html { 199 | font-size: 100%; /* 1 */ 200 | -webkit-text-size-adjust: 100%; /* 2 */ 201 | -ms-text-size-adjust: 100%; /* 2 */ 202 | } 203 | 204 | /** 205 | * Address `outline` inconsistency between Chrome and other browsers. 206 | */ 207 | 208 | a:focus { 209 | outline: thin dotted; 210 | } 211 | 212 | /** 213 | * Improve readability when focused and also mouse hovered in all browsers. 214 | */ 215 | 216 | a:active, 217 | a:hover { 218 | outline: 0; 219 | } 220 | 221 | /** 222 | * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. 223 | * 2. Improve image quality when scaled in IE 7. 224 | */ 225 | 226 | img { 227 | border: 0; /* 1 */ 228 | -ms-interpolation-mode: bicubic; /* 2 */ 229 | } 230 | 231 | /** 232 | * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. 233 | */ 234 | 235 | figure { 236 | margin: 0; 237 | } 238 | 239 | /** 240 | * Correct margin displayed oddly in IE 6/7. 241 | */ 242 | 243 | form { 244 | margin: 0; 245 | } 246 | 247 | /** 248 | * Define consistent border, margin, and padding. 249 | */ 250 | 251 | fieldset { 252 | border: 1px solid #c0c0c0; 253 | margin: 0 2px; 254 | padding: 0.35em 0.625em 0.75em; 255 | } 256 | 257 | /** 258 | * 1. Correct color not being inherited in IE 6/7/8/9. 259 | * 2. Correct text not wrapping in Firefox 3. 260 | * 3. Correct alignment displayed oddly in IE 6/7. 261 | */ 262 | 263 | legend { 264 | border: 0; /* 1 */ 265 | padding: 0; 266 | white-space: normal; /* 2 */ 267 | *margin-left: -7px; /* 3 */ 268 | } 269 | 270 | /** 271 | * 1. Correct font size not being inherited in all browsers. 272 | * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, 273 | * and Chrome. 274 | * 3. Improve appearance and consistency in all browsers. 275 | */ 276 | 277 | button, 278 | input, 279 | select, 280 | textarea { 281 | font-size: 100%; /* 1 */ 282 | margin: 0; /* 2 */ 283 | vertical-align: baseline; /* 3 */ 284 | *vertical-align: middle; /* 3 */ 285 | } 286 | 287 | /** 288 | * Address Firefox 3+ setting `line-height` on `input` using `!important` in 289 | * the UA stylesheet. 290 | */ 291 | 292 | button, 293 | input { 294 | line-height: normal; 295 | } 296 | 297 | /** 298 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 299 | * All other form control elements do not inherit `text-transform` values. 300 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. 301 | * Correct `select` style inheritance in Firefox 4+ and Opera. 302 | */ 303 | 304 | button, 305 | select { 306 | text-transform: none; 307 | } 308 | 309 | /** 310 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 311 | * and `video` controls. 312 | * 2. Correct inability to style clickable `input` types in iOS. 313 | * 3. Improve usability and consistency of cursor style between image-type 314 | * `input` and others. 315 | * 4. Remove inner spacing in IE 7 without affecting normal text inputs. 316 | * Known issue: inner spacing remains in IE 6. 317 | */ 318 | 319 | button, 320 | html input[type="button"], /* 1 */ 321 | input[type="reset"], 322 | input[type="submit"] { 323 | -webkit-appearance: button; /* 2 */ 324 | cursor: pointer; /* 3 */ 325 | *overflow: visible; /* 4 */ 326 | } 327 | 328 | /** 329 | * Re-set default cursor for disabled elements. 330 | */ 331 | 332 | button[disabled], 333 | html input[disabled] { 334 | cursor: default; 335 | } 336 | 337 | /** 338 | * 1. Address box sizing set to content-box in IE 8/9. 339 | * 2. Remove excess padding in IE 8/9. 340 | * 3. Remove excess padding in IE 7. 341 | * Known issue: excess padding remains in IE 6. 342 | */ 343 | 344 | input[type="checkbox"], 345 | input[type="radio"] { 346 | box-sizing: border-box; /* 1 */ 347 | padding: 0; /* 2 */ 348 | *height: 13px; /* 3 */ 349 | *width: 13px; /* 3 */ 350 | } 351 | 352 | /** 353 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 354 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 355 | * (include `-moz` to future-proof). 356 | */ 357 | 358 | input[type="search"] { 359 | -webkit-appearance: textfield; /* 1 */ 360 | -moz-box-sizing: content-box; 361 | -webkit-box-sizing: content-box; /* 2 */ 362 | box-sizing: content-box; 363 | } 364 | 365 | /** 366 | * Remove inner padding and search cancel button in Safari 5 and Chrome 367 | * on OS X. 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Remove inner padding and border in Firefox 3+. 377 | */ 378 | 379 | button::-moz-focus-inner, 380 | input::-moz-focus-inner { 381 | border: 0; 382 | padding: 0; 383 | } 384 | 385 | /** 386 | * 1. Remove default vertical scrollbar in IE 6/7/8/9. 387 | * 2. Improve readability and alignment in all browsers. 388 | */ 389 | 390 | textarea { 391 | overflow: auto; /* 1 */ 392 | vertical-align: top; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove most spacing between table cells. 397 | */ 398 | 399 | table { 400 | border-collapse: collapse; 401 | border-spacing: 0; 402 | } 403 | 404 | html, 405 | button, 406 | input, 407 | select, 408 | textarea { 409 | color: #222; 410 | } 411 | 412 | ::-moz-selection { 413 | background: #b3d4fc; 414 | text-shadow: none; 415 | } 416 | 417 | ::selection { 418 | background: #b3d4fc; 419 | text-shadow: none; 420 | } 421 | 422 | img { 423 | vertical-align: middle; 424 | } 425 | 426 | fieldset { 427 | border: 0; 428 | margin: 0; 429 | padding: 0; 430 | } 431 | 432 | textarea { 433 | resize: vertical; 434 | } 435 | 436 | .chromeframe { 437 | margin: 0.2em 0; 438 | background: #ccc; 439 | color: #000; 440 | padding: 0.2em 0; 441 | } -------------------------------------------------------------------------------- /src/Components/CardNota/cardNota.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./estilo.css"; 3 | class CardNota extends Component { 4 | render() { 5 | return ( 6 |
7 |
8 |

{this.props.titulo}

9 |
10 |

{this.props.texto}

11 |
12 | ); 13 | } 14 | } 15 | 16 | export default CardNota; -------------------------------------------------------------------------------- /src/Components/CardNota/estilo.css: -------------------------------------------------------------------------------- 1 | .card-nota { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: flex-start; 5 | justify-content: space-between; 6 | background-color: var(--fundo-detalhes); 7 | border-radius: 4px; 8 | flex-wrap: wrap; 9 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); 10 | padding: 16px; 11 | } 12 | .card-nota_cabecalho { 13 | font-size: 1.1em; 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | } 18 | 19 | .card-nota_texto { 20 | margin-top: 8px; 21 | font-size: 1em; 22 | } 23 | 24 | .card-nota_titulo { 25 | font-size: 1.2em; 26 | margin-right: 12px; 27 | } -------------------------------------------------------------------------------- /src/Components/CardNota/index.js: -------------------------------------------------------------------------------- 1 | import CardNota from "./cardNota" 2 | export default CardNota; -------------------------------------------------------------------------------- /src/Components/Formulario/estilo.css: -------------------------------------------------------------------------------- 1 | .form-cadastro { 2 | flex-grow: 2; 3 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); 4 | z-index: 1; 5 | min-height: 100vh; 6 | display: flex; 7 | flex-direction: column; 8 | padding: 12px 40px; 9 | } 10 | .form-cadastro_input { 11 | margin-top: 8px; 12 | padding: 4px; 13 | border: none; 14 | background-color: var(--fundo-detalhes); 15 | font-family: Arial, Helvetica, sans-serif; 16 | font-weight: 100; 17 | } 18 | 19 | .form-cadastro_submit { 20 | align-self: flex-end; 21 | width: 30%; 22 | background-color: var(--secundaria); 23 | color: white; 24 | font-weight: 400; 25 | } 26 | 27 | .form-cadastro_submit:active { 28 | background-color: var(--secundaria-ativa); 29 | } -------------------------------------------------------------------------------- /src/Components/Formulario/formulario.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./estilo.css"; 3 | class FormularioCadastro extends Component { 4 | 5 | constructor(props){ 6 | super(props); 7 | this.titulo = ''; 8 | this.texto= ''; 9 | } 10 | 11 | _handleMudancaTitulo(evento){ 12 | this.titulo = evento.target.value; 13 | } 14 | 15 | _handleMudancaTexto(evento){ 16 | this.texto = evento.target.value; 17 | } 18 | 19 | _criarNota(evento){ 20 | evento.preventDefault(); 21 | evento.stopPropagation(); 22 | console.log('uma nova nota foi criada ' + this.titulo + ' ' + this.texto); 23 | this.props.criarNota(this.titulo, this.texto); 24 | } 25 | 26 | render() { 27 | return ( 28 |
30 | 36 |