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 a84536756..000000000 Binary files a/src/platzi.webp and /dev/null differ