diff --git a/package-lock.json b/package-lock.json index cff3fca4..09453a9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,9 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.8.2", "react-scripts": "5.0.1", + "uuid": "^9.0.0", "web-vitals": "^2.1.4" } }, @@ -2985,6 +2987,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.3.tgz", + "integrity": "sha512-YRHie1yQEj0kqqCTCJEfHqYSSNlZQ696QJG+MMiW4mxSl9I0ojz/eRhJS4fs88Z5i6D1SmoF9d3K99/QOhI8/w==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -13870,6 +13880,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.2.tgz", + "integrity": "sha512-lF7S0UmXI5Pd8bmHvMdPKI4u4S5McxmHnzJhrYi9ZQ6wE+DA8JN5BzVC5EEBuduWWDaiJ8u6YhVOCmThBli+rw==", + "dependencies": { + "@remix-run/router": "1.3.3" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.2.tgz", + "integrity": "sha512-N/oAF1Shd7g4tWy+75IIufCGsHBqT74tnzHQhbiUTYILYF0Blk65cg+HPZqwC+6SqEyx033nKqU7by38v3lBZg==", + "dependencies": { + "@remix-run/router": "1.3.3", + "react-router": "6.8.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -14696,6 +14736,14 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", @@ -15718,9 +15766,9 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", "bin": { "uuid": "dist/bin/uuid" } @@ -18674,6 +18722,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.3.tgz", + "integrity": "sha512-YRHie1yQEj0kqqCTCJEfHqYSSNlZQ696QJG+MMiW4mxSl9I0ojz/eRhJS4fs88Z5i6D1SmoF9d3K99/QOhI8/w==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -26422,6 +26475,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.2.tgz", + "integrity": "sha512-lF7S0UmXI5Pd8bmHvMdPKI4u4S5McxmHnzJhrYi9ZQ6wE+DA8JN5BzVC5EEBuduWWDaiJ8u6YhVOCmThBli+rw==", + "requires": { + "@remix-run/router": "1.3.3" + } + }, + "react-router-dom": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.2.tgz", + "integrity": "sha512-N/oAF1Shd7g4tWy+75IIufCGsHBqT74tnzHQhbiUTYILYF0Blk65cg+HPZqwC+6SqEyx033nKqU7by38v3lBZg==", + "requires": { + "@remix-run/router": "1.3.3", + "react-router": "6.8.2" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -27033,6 +27103,13 @@ "faye-websocket": "^0.11.3", "uuid": "^8.3.2", "websocket-driver": "^0.7.4" + }, + "dependencies": { + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + } } }, "source-list-map": { @@ -27785,9 +27862,9 @@ "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==" }, "uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==" }, "v8-compile-cache": { "version": "2.3.0", diff --git a/package.json b/package.json index d8474c81..12e7a282 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,9 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.8.2", "react-scripts": "5.0.1", + "uuid": "^9.0.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.css b/src/App.css index 74b5e053..e69de29b 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js index 37845757..3d0d2400 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,18 @@ -import logo from './logo.svg'; + import './App.css'; +import ListaDeTareas from './components/ListaDeTareas'; + + function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+

Wishlist

+ + +
+
); } diff --git a/src/components/ListaDeTareas.js b/src/components/ListaDeTareas.js new file mode 100644 index 00000000..79fc75bd --- /dev/null +++ b/src/components/ListaDeTareas.js @@ -0,0 +1,56 @@ +import React,{useState} from 'react' +import TareaFormulario from './TareaFormulario' +import "../styles/ListaDeTareas.css" +import Tarea from "./Wishlist" + + +export default function ListaDeTareas() { + + const[tareas,setTareas]=useState([]); + const agregarTarea=tarea=>{ + if(tarea.texto.trim()){ + console.log(tarea) + tarea.texto=tarea.texto.trim(); + const tareasActualizadas=[tarea, ...tareas]; + setTareas(tareasActualizadas); + } + } + + const eliminarTarea=id=>{ + const tareasActualizadas=tareas.filter(tarea => tarea.id !==id); + setTareas(tareasActualizadas); + } + + const completarTarea=id=>{ + const tareasActualizadas=tareas.map(tarea=>{ + if(tarea.id===id){ + tarea.completada=!tarea.completada; + } + return tarea; + }) + setTareas(tareasActualizadas); + + } + const finish =document.querySelector(".finished__task--p") + + return ( + <> + +
+ { + tareas.map((tarea)=> + + + + ) + } +
+ + ) +} diff --git a/src/components/SavedData.js b/src/components/SavedData.js new file mode 100644 index 00000000..76f34c8c --- /dev/null +++ b/src/components/SavedData.js @@ -0,0 +1,16 @@ +// import React,{useState,useEffect} from 'react' + + +// export default function SavedData() { + +// const [save,setSave]=useState(""); + +// const getData=()=>{ +// return localStorage.setTareas(tareasActualizadas); +// } +// useEffect( ()=>{ +// setSave(getData () ); +// } , []) + + +// } diff --git a/src/components/Segunda.js b/src/components/Segunda.js new file mode 100644 index 00000000..09a91b5d --- /dev/null +++ b/src/components/Segunda.js @@ -0,0 +1,23 @@ +import React from 'react' +import "../styles/Segunda.css" + +function Segunda() { + + + + + return ( + <> +
+

Finished

+
+ +

+
+ +
+ + ) +} + +export default Segunda \ No newline at end of file diff --git a/src/components/TareaFormulario.js b/src/components/TareaFormulario.js new file mode 100644 index 00000000..4326356b --- /dev/null +++ b/src/components/TareaFormulario.js @@ -0,0 +1,42 @@ +import React,{useState} from "react"; +import "../styles/TareaFormulario.css" +import { v4 as uuidv4 } from 'uuid'; +import { Link } from "react-router-dom"; + +function TareaFormulario(props){ + const[input,setInput] = useState(""); + const manejarCambio = e => { +setInput(e.target.value); + } + + const manejarEnvio = e => { + e.preventDefault(); + const tareaNueva={ + id:uuidv4(), + texto: input, + competada: false + } + props.onSubmit(tareaNueva); + } +return( + <> +
+ + + +
+ + + + +); + +} +export default TareaFormulario; \ No newline at end of file diff --git a/src/components/Wishlist.jsx b/src/components/Wishlist.jsx new file mode 100644 index 00000000..a884f15c --- /dev/null +++ b/src/components/Wishlist.jsx @@ -0,0 +1,16 @@ +import React from 'react' +import "../styles/Wishlist.css" +export default function Wishlist({id,texto,completada,completarTarea,eliminarTarea}){ + return ( + <> +
+
completarTarea(id)}> +{texto} +
+
eliminarTarea(id)}> +X +
+
+ + ) +} diff --git a/src/index.js b/src/index.js index d563c0fb..ee54a8c2 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,18 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import { BrowserRouter, Routes ,Route} from 'react-router-dom'; import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import App from "./App" +import Segunda from './components/Segunda'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - - + + + }/> + }/> + errorPAge}/> + + ); -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/main.js b/src/main.js new file mode 100644 index 00000000..959764c6 --- /dev/null +++ b/src/main.js @@ -0,0 +1,10 @@ +import React from 'react' +import { BrowserRouter } from 'react-router-dom' +import App from './App' + +ReactDOM.render( + + + + +) diff --git a/src/styles/ListaDeTareas.css b/src/styles/ListaDeTareas.css new file mode 100644 index 00000000..0674a2b0 --- /dev/null +++ b/src/styles/ListaDeTareas.css @@ -0,0 +1,6 @@ +.tareas-lista-contenedor{ + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: 15px; +} \ No newline at end of file diff --git a/src/styles/Segunda.css b/src/styles/Segunda.css new file mode 100644 index 00000000..feebb48d --- /dev/null +++ b/src/styles/Segunda.css @@ -0,0 +1,12 @@ +.finished__tasks--div{ + min-height: 80vh; + width: 400vh; + background-color: black; +} +.all__page--div{ +display: flex; +flex-direction: column; +justify-content: space-between; +align-items: center; + +} \ No newline at end of file diff --git a/src/styles/TareaFormulario.css b/src/styles/TareaFormulario.css new file mode 100644 index 00000000..ce70c8a2 --- /dev/null +++ b/src/styles/TareaFormulario.css @@ -0,0 +1,29 @@ +.tarea-formulario{ + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; +} + +.tarea-input{ + width: 300px; + font-size: 18px; + outline: none; + border: 1px solid green; +} + +.tarea-boton{ + + padding: 16px; + font-size: 18px; + border: none; + cursor: pointer; + outline: none; + background-color: green; + color: aliceblue; + text-transform: capitalize; + +} +.next__page--btn{ + text-decoration: none; +} \ No newline at end of file diff --git a/src/styles/Wishlist.css b/src/styles/Wishlist.css new file mode 100644 index 00000000..d1e8f5c7 --- /dev/null +++ b/src/styles/Wishlist.css @@ -0,0 +1,37 @@ +.tarea-contenedor{ + width: 500px; + min-height: 65px; + background-color: antiquewhite; + margin: 5px 0; + padding: 8px 15px 8px 20px; + display: flex; + justify-content: space-between; + align-items: center; + border: 1px solid white; + cursor:pointer; +} + +.tarea-contenedor:nth-child(3n+1){ + background-color: aqua; +} + +.tarea-contenedor:nth-child(3n+2){ + background-color: greenyellow; +} + +.tarea-contenedor:nth-child(3n+3){ + background-color: blue; +} + +.tarea-texto{ + width: 100%; + height: 100%; + display: flex; + align-items: center; + overflow-wrap: anywhere; +} + +.tarea-contenedor .completada{ + background-color: blueviolet; + text-decoration: line-through; +} \ No newline at end of file