From a8851e6fa5d36e1df98a771f49c7778e76ce1ac1 Mon Sep 17 00:00:00 2001 From: Daniel Fuentes Date: Fri, 24 Nov 2023 19:55:50 -0500 Subject: [PATCH] avance hasta complete y delete todos --- package-lock.json | 15 +++++ package.json | 1 + src/App.css | 38 ----------- src/App.js | 25 ------- src/App/App.css | 5 ++ src/App/App.js | 63 ++++++++++++++++++ .../CreateToDoButton/CreateToDoButton.css | 12 ++++ .../CreateToDoButton/CreateToDoButton.jsx | 11 +++ src/Componentes/Icons/completeIcon.jsx | 12 ++++ src/Componentes/Icons/deleteIcon.jsx | 11 +++ src/Componentes/Icons/todoIcons.jsx | 18 +++++ src/Componentes/ToDoCounter/ToDoCounter.css | 11 +++ src/Componentes/ToDoCounter/ToDoCounter.jsx | 10 +++ src/Componentes/ToDoList/ToDoList.css | 0 src/Componentes/ToDoList/ToDoList.jsx | 13 ++++ src/Componentes/ToDoSearch/ToDoSearch.css | 18 +++++ src/Componentes/ToDoSearch/ToDoSearch.jsx | 17 +++++ src/Componentes/TodoItem/ToDoItem.css | 50 ++++++++++++++ src/Componentes/TodoItem/ToDoItem.jsx | 19 ++++++ src/index.css | 16 ++--- src/index.js | 2 +- src/platzi.webp | Bin 1008 -> 0 bytes 22 files changed, 295 insertions(+), 72 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/App.js create mode 100644 src/App/App.css create mode 100644 src/App/App.js create mode 100644 src/Componentes/CreateToDoButton/CreateToDoButton.css create mode 100644 src/Componentes/CreateToDoButton/CreateToDoButton.jsx create mode 100644 src/Componentes/Icons/completeIcon.jsx create mode 100644 src/Componentes/Icons/deleteIcon.jsx create mode 100644 src/Componentes/Icons/todoIcons.jsx create mode 100644 src/Componentes/ToDoCounter/ToDoCounter.css create mode 100644 src/Componentes/ToDoCounter/ToDoCounter.jsx create mode 100644 src/Componentes/ToDoList/ToDoList.css create mode 100644 src/Componentes/ToDoList/ToDoList.jsx create mode 100644 src/Componentes/ToDoSearch/ToDoSearch.css create mode 100644 src/Componentes/ToDoSearch/ToDoSearch.jsx create mode 100644 src/Componentes/TodoItem/ToDoItem.css create mode 100644 src/Componentes/TodoItem/ToDoItem.jsx delete mode 100644 src/platzi.webp diff --git a/package-lock.json b/package-lock.json index f26ec7a8b..f927fd394 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "react": "^18", "react-dom": "^18", + "react-icons": "^4.12.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -13423,6 +13424,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz", + "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -25601,6 +25610,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-icons": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz", + "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 0c4b9cdc0..375205b0d 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "dependencies": { "react": "^18", "react-dom": "^18", + "react-icons": "^4.12.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 4661df052..000000000 --- a/src/App.css +++ /dev/null @@ -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: #233553; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #97ca3f; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 952c8f1fd..000000000 --- a/src/App.js +++ /dev/null @@ -1,25 +0,0 @@ -import logo from './platzi.webp'; -import './App.css'; - -function App() { - return ( -
-
- logo -

- Edita el archivo src/App.js y guarda para recargar. -

- - Learn React - -
-
- ); -} - -export default App; diff --git a/src/App/App.css b/src/App/App.css new file mode 100644 index 000000000..e644ff7bb --- /dev/null +++ b/src/App/App.css @@ -0,0 +1,5 @@ +.MainContainer{ + display: flex; + flex-direction: column; + align-items: center; +} \ No newline at end of file diff --git a/src/App/App.js b/src/App/App.js new file mode 100644 index 000000000..604c498b7 --- /dev/null +++ b/src/App/App.js @@ -0,0 +1,63 @@ +import React from "react"; +import "./App.css" +import { CreateToDoButton } from "../Componentes/CreateToDoButton/CreateToDoButton"; +import { ToDoCounter } from "../Componentes/ToDoCounter/ToDoCounter"; +import { ToDoList } from "../Componentes/ToDoList/ToDoList"; +import { ToDoSearch } from "../Componentes/ToDoSearch/ToDoSearch"; +import { ToDoItem } from "../Componentes/TodoItem/ToDoItem"; + + + const arrayToDos = [ + {text: "sacar a noah", completed: true}, + {text: "cortar cebolla", completed: false}, + {text: "terminar curso de manip arrays", completed: false}, + {text: "mimir", completed: true}, + {text: "leer", completed: true}, + {text: "COCINAR", completed: false}, + {text: "Entrenar", completed: true}, +] + +function App() { + + const [todos, setTodos] = React.useState(arrayToDos); + + const [searchValue, setSearchValue ] = React.useState(""); + console.log("Los usuarios buscan todos de " + searchValue); + + const completedTodos = todos.filter((todo) => todo.completed).length + const totalTodos = todos.length + + const searchedTodos = todos.filter((todo) => todo.text.toLowerCase().includes(searchValue.toLowerCase())) + + const completeTodo = (text) => { + + const newTodosList = [...todos]; + const todoIndex = newTodosList.findIndex((todo)=>todo.text === text); + newTodosList[todoIndex].completed = true; // aca lo que estoy diciendo es que en el indice del array donde la propiedad todo.text sea igual al texto que yo le estoy enviando por parametro, ya que ese texto es el identificador unico de ese elemento. entonces, que a ese indice en su propiedad completed la cambie a true cuando ocurra todo lo que pasa en todoIndex. + setTodos(newTodosList); + } + + const deleteTodo = (text) => { + const newTodosList = [...todos]; + const todoIndex = newTodosList.findIndex((todo)=>todo.text === text); + newTodosList.splice(todoIndex, 1); + setTodos(newTodosList); + } + + return ( +
+ + + + + + {searchedTodos.map((todo) => {completeTodo (todo.text)}} onDelete={()=>{deleteTodo(todo.text)}}/> )} + + + + +
+ ); +} + +export default App; diff --git a/src/Componentes/CreateToDoButton/CreateToDoButton.css b/src/Componentes/CreateToDoButton/CreateToDoButton.css new file mode 100644 index 000000000..0ab608b5f --- /dev/null +++ b/src/Componentes/CreateToDoButton/CreateToDoButton.css @@ -0,0 +1,12 @@ +button{ + width: 80px; + height: 80px; + border-radius: 100%; + font-size: 40px; + border: 2px solid rgb(0, 145, 255); + position: absolute; + top: 715px; + right: 205px; + background-color: rgb(0, 170, 255); + color: #FAFAFA; +} \ No newline at end of file diff --git a/src/Componentes/CreateToDoButton/CreateToDoButton.jsx b/src/Componentes/CreateToDoButton/CreateToDoButton.jsx new file mode 100644 index 000000000..13a6adae7 --- /dev/null +++ b/src/Componentes/CreateToDoButton/CreateToDoButton.jsx @@ -0,0 +1,11 @@ +import React from "react"; +import "./CreateToDoButton.css" + +function CreateToDoButton () { + + return ( + + ) +} + +export {CreateToDoButton}; \ No newline at end of file diff --git a/src/Componentes/Icons/completeIcon.jsx b/src/Componentes/Icons/completeIcon.jsx new file mode 100644 index 000000000..b6f210179 --- /dev/null +++ b/src/Componentes/Icons/completeIcon.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import { TodoIcons } from "./todoIcons"; + + +function CompleteIcon () { + return ( + + + ) +} + +export {CompleteIcon}; \ No newline at end of file diff --git a/src/Componentes/Icons/deleteIcon.jsx b/src/Componentes/Icons/deleteIcon.jsx new file mode 100644 index 000000000..155886dc2 --- /dev/null +++ b/src/Componentes/Icons/deleteIcon.jsx @@ -0,0 +1,11 @@ +import React from "react"; +import { TodoIcons } from "./todoIcons"; + + +function DeleteIcon () { + return ( + + ) +} + +export {DeleteIcon}; \ No newline at end of file diff --git a/src/Componentes/Icons/todoIcons.jsx b/src/Componentes/Icons/todoIcons.jsx new file mode 100644 index 000000000..d6269c2b8 --- /dev/null +++ b/src/Componentes/Icons/todoIcons.jsx @@ -0,0 +1,18 @@ +import {AiFillCheckCircle } from "react-icons/ai"; +import { AiFillDelete } from "react-icons/ai"; + +const iconTypes = { //Creo un objeto con los tipos de iconos que voy a querer renderizar + "check":, + "delete": +} + +function TodoIcons ({type}){ + return( + + + {iconTypes[type]} + + ) +} + +export {TodoIcons}; \ No newline at end of file diff --git a/src/Componentes/ToDoCounter/ToDoCounter.css b/src/Componentes/ToDoCounter/ToDoCounter.css new file mode 100644 index 000000000..3ea239108 --- /dev/null +++ b/src/Componentes/ToDoCounter/ToDoCounter.css @@ -0,0 +1,11 @@ +.title{ + font-size: 24px; + text-align: center; + margin: 0; + padding: 48px; + font-weight: 300; +} + +.title span{ + font-weight: 700; +} \ No newline at end of file diff --git a/src/Componentes/ToDoCounter/ToDoCounter.jsx b/src/Componentes/ToDoCounter/ToDoCounter.jsx new file mode 100644 index 000000000..9f93c5ff9 --- /dev/null +++ b/src/Componentes/ToDoCounter/ToDoCounter.jsx @@ -0,0 +1,10 @@ +import React from "react"; +import "./ToDoCounter.css" + +function ToDoCounter ({completed, total}) { + return ( +

Haz Completado {completed} de {total} ToDo's

+ ) +} + +export {ToDoCounter}; \ No newline at end of file diff --git a/src/Componentes/ToDoList/ToDoList.css b/src/Componentes/ToDoList/ToDoList.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/Componentes/ToDoList/ToDoList.jsx b/src/Componentes/ToDoList/ToDoList.jsx new file mode 100644 index 000000000..c6c6915a7 --- /dev/null +++ b/src/Componentes/ToDoList/ToDoList.jsx @@ -0,0 +1,13 @@ +import React from "react"; + + + +function ToDoList ({children}) { + return ( +
    + {children} +
+ ) +} + +export {ToDoList}; \ No newline at end of file diff --git a/src/Componentes/ToDoSearch/ToDoSearch.css b/src/Componentes/ToDoSearch/ToDoSearch.css new file mode 100644 index 000000000..94ce8738e --- /dev/null +++ b/src/Componentes/ToDoSearch/ToDoSearch.css @@ -0,0 +1,18 @@ +.searchBar{ + width: 279px; + height: 64px; + border-radius: 10px; + border: solid 1px gray +} + +.searchBar::placeholder{ + color: silver; + font-family: "Montserrat"; + font-weight: 400; + text-align: center; + font-size: 20px; +} + +.searchBar:focus{ + outline-color: rgb(49, 49, 112); +} \ No newline at end of file diff --git a/src/Componentes/ToDoSearch/ToDoSearch.jsx b/src/Componentes/ToDoSearch/ToDoSearch.jsx new file mode 100644 index 000000000..6f7c1aadd --- /dev/null +++ b/src/Componentes/ToDoSearch/ToDoSearch.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import "./ToDoSearch.css" + +function ToDoSearch ({searchValue, setSearchValue}) { + + return ( + {setSearchValue(event.target.value)}} + value={searchValue} + /> + ) +} + +export {ToDoSearch}; \ No newline at end of file diff --git a/src/Componentes/TodoItem/ToDoItem.css b/src/Componentes/TodoItem/ToDoItem.css new file mode 100644 index 000000000..542090c21 --- /dev/null +++ b/src/Componentes/TodoItem/ToDoItem.css @@ -0,0 +1,50 @@ +li{ + list-style: none; +} + +.TodoItem{ + width: 550px; + background-color: #FAFAFA; + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin-top: 24px; + box-shadow: 0px 5px 50px rgba(32, 35, 41, 0.15); + border-radius: 10px; +} + + .TodoItem-p{ + margin: 24px 0 24px 24px; + width: calc(100% - 120px); + font-size: 18px; + line-height: 24px; + font-weight: 400; +} + + .TodoItem-p--complete{ + text-decoration: line-through; +} + +.Icon{ + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + height: 48px; + width: 48px; + font-size: 24px; + font-weight: bold; +} + +.Icon--check--active{ + color: rgb(107, 173, 107); +} + +.Icon-delete{ + position: relative; +} + +.Icon-delete:hover{ + color: rgb(241, 143, 143); +} \ No newline at end of file diff --git a/src/Componentes/TodoItem/ToDoItem.jsx b/src/Componentes/TodoItem/ToDoItem.jsx new file mode 100644 index 000000000..3e20a1307 --- /dev/null +++ b/src/Componentes/TodoItem/ToDoItem.jsx @@ -0,0 +1,19 @@ +import React from "react"; +import "./ToDoItem.css" +import { CompleteIcon } from "../Icons/completeIcon"; +import { DeleteIcon } from "../Icons/deleteIcon"; + +function ToDoItem ({text, onComplete, onDelete, completed}) { + + return ( +
  • + +

    {text}

    + +
    • + + + ) +} + +export {ToDoItem}; \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e8c..28dd0fd3f 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,13 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + padding: 0; + background-color: silver; + color: black; + font-family: "Montserrat", "Arial", "Helvetica", "sans-serif"; } -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; +#root{ + margin: 0 24px; + position: relative; + min-height: 100vh; } diff --git a/src/index.js b/src/index.js index 793e2b837..7933d46f6 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import App from './App'; +import App from './App/App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); diff --git a/src/platzi.webp b/src/platzi.webp deleted file mode 100644 index a84536756882549cc895dade9ebe7295c17a9a2e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1008 zcmVaj*r`-jiplutb{28Zb zBa^nNf4$i~0zruWpTz}|Ix>k+^{+I?OGQ4y6sc8 zZPU<1srJ|mlTFKG8$``RJ7#k&ji`HLsUfuj@;2G%KSTj~9O%2xT@bK`Zl-?K3Wc{b zZJbtUyyFbh2O;v%6Mj}iA@i8Xu4;tP8>WjkK`1?J*jhOo31d1Gau9MKc)B^&YhH-~ zUm=IFDToOV6E6NAj0hEe6hl6uFeMDeWQD`!@hqi0?w38e5~gK$eV0%Ex@<+)6a8Jc zm-5x$XWE<25cbcq#2;H-=?xHhh2Z!u%lxf-k5$&P2EnP6!k|WLrUZgSgHCi1bs`I% zBL*JDtk4NVy_ouJFmP#8+ZG^@DdfsF2wEa(N)YtK5ilZPRIFKgLcpoM;u-+jf?v|o z@WQKGI-8^6CO5q1h0i<)f!bxyL{tj+)bYTfZc!8(6od*g(4ZpF3^}r(B*@^ESYT56 z8kqz|=?Bgvkm*b3kpni3U*^LU(5dvPxAnhPyBYN+0`S2rD)ykJh>oSoPDEg)PD#OD)Re1|jdj~)+?0dT z)U&S}ueo_iz4i6>rly<-Y|qV02<%8rIWX9TnyXM4GdE#18lGDgTOuZCyD&i;hzQGnqfqk`GEt>mk zqtL1j)qTkl*!@s;3_wtJT z%gb^vug$%@K>zY8-OEdLFR$0Tyy(`yymI&Q^4+Uz;9gw__v&i6SC_=Sx-Rb3#c{8$ zkb8BR+^cKlTwSm>dskP@y}ESn)%EkPE~0yNCB3W5>1SP2ri(hJy0G5W)%C6}v3GTy eovVxOU0reK>asgm*WR?}>fZ(M>~|G@3H}2yCHam3