platzi · Misael-GC · Sep 5, 2023 · Sep 7, 2023 · Sep 14, 2023 · Sep 14, 2023
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Repositorio base del Curso de Introducción a React.js en Platzi
+# Repositorio  React.js
 
 ¡Hola, Platzinauta!
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,8 +2,11 @@
   "name": "platzi-intro-react-base",
   "version": "0.1.0",
   "dependencies": {
+    "chart.js": "^4.4.0",
     "react": "^18",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
+    "react-icons": "^4.11.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Task App</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -39,5 +40,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -36,3 +36,26 @@
     transform: rotate(360deg);
   }
 }
+ /* A quí está mi código CSS */
+/* CSS para pantallas móviles (menos de 768px) */
+.container1 {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto;
+  gap: 16px; /* Espacio entre elementos */
+  place-content: center;
+  /* background-color: black;  */
+}
+
+.darkmode{
+  /* background-color: black; */
+}
+
+/* CSS para pantallas más grandes (768px o más) */
+@media (min-width: 768px) {
+  .container1  {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: auto;
+    place-content: center;
+  }
+}
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,161 @@
-import logo from './platzi.webp';
+import React, { useState, useEffect } from 'react';
+import { TodoCounter } from './TodoCounter';
+import { TodoSearch } from './TodoSearch';
+import { TodoList } from './TodoList';
+import { TodoItem } from './TodoItem';
+import { CreateTodoButton } from './CreateTodoButton';
+import { Nadvar } from './Nadvar';
+import { Footer } from './Footer';
+import { Graficos } from './Graficos';
+import { Filtros } from './Filtros';
 import './App.css';
 
+
+const defaultTodos = [
+  { text: 'Cortar cebolla', completed: true },
+  { text: 'Tomar el Curso de Introcción a React.js', completed: false },
+  { text: 'Llorar con la Llorona', completed: false },
+  { text: 'LALALALALA', completed: false },
+  { text: 'LALA', completed: true },
+  { text: "el filtro de todos || completados || faltan", completed : false },
+  { text: 'reto - diga felicidades ya terminaste todo', completed: false },
+  { text: 'las leyendas e instrucciones', completed: false },
+];
+
+const frasesMotivacionales = [
+  "Cree en ti, todo es posible.",
+  "El éxito es la suma de esfuerzos.",
+  "La perseverancia lleva a la victoria.",
+  "Si puedes soñarlo, puedes lograrlo.",
+  "El cambio comienza con una decisión.",
+  "Crea, rompe, aprende, repite, evoluciona, persiste.",
+  "Cada día es una nueva oportunidad.",
+  "Persiste con fuerza, la meta te espera.",
+  "Si puedes imaginarlo, puedes crearlo.",
+  'Código limpio: como arte, simple y efectivo.',
+  "Debuggear es el arte de ser paciente.",
+  "La mejor documentación es un código claro.",
+  "Programar es como resolver un rompecabezas.",
+  "No reinventes la rueda, a menos que aprendas.",
+  "Códigos buenos son poesía, no aburridos prosa.",
+  "Siempre hay espacio para mejorar tu código.",
+  "Piensa antes de programar, después hazlo simple.",
+  "Escribe código que otros amen leer.",
+];
+
+// localStorage.setItem('TODOS_V1'), defaultTodos);
+// localStorage.removeItem('TODOS_V1');
+
 function App() {
+  //TodoSearch input
+  const [searchValue, setSearchValue] = React.useState(''); 
+
+
+  //TodoCounter P1 has completado N de N TODOs
+  const [todos, setTodos] = React.useState(defaultTodos); //000000000000000000000000000000
+
+  const completedTodos = todos.filter(
+    todo=> !!todo.completed 
+    ).length;
+
+    const totalTodos = todos.length;
+
+    //TodoList
+    const searchedTodos = todos.filter(
+
+      (todo) => {
+        const todoText = todo.text.toLowerCase();
+        const searchText = searchValue.toLocaleLowerCase();
+        return todoText.includes(searchText)
+      }
+    );
+
+    //TodoList delete & check
+    const completeTodo = (text) => {
+
+      const todoIndex = todos.findIndex( 
+      (todo) => todo.text === text
+      );
+      const newTodos = [...todos]; 
+      newTodos[todoIndex].completed = !newTodos[todoIndex].completed; 
+      setTodos(newTodos); 
+    }
+
+   const deleteTodo = (text) => { 
+      const newTodos = [...todos];
+      const todoIndex = newTodos.findIndex( 
+        (todo) => todo.text === text 
+      );
+      newTodos.splice(todoIndex, 1);
+      setTodos(newTodos); 
+    }
+
+  //TodoCounter P2 Frases random
+  const [motivationalPhrase, setMotivationalPhrase] = React.useState(''); 
+  const generateRandomMotivationalPhrase = () => {
+    const randomPhrase = frasesMotivacionales[Math.floor(Math.random() * frasesMotivacionales.length)];
+    setMotivationalPhrase(randomPhrase);
+  };
+  useEffect(() => {
+    generateRandomMotivationalPhrase();
+  }, []); 
+
+// Mi componente Filter
+  const filterTodosAll = defaultTodos;
+  const filterTodoCompleted = defaultTodos.filter(
+    todo => todo.completed === true
+  );
+
+  const filterTodoNoCompleted = defaultTodos.filter(
+    todo => todo.completed === false
+  );
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edita el archivo <code>src/App.js</code> y guarda para recargar.
-        </p>
-        <a
-          className="App-link"
-          href="https://platzi.com/reactjs"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+
+    <> 
+      <div>
+        <Nadvar/>
+        <TodoCounter 
+        completed={completedTodos}
+        total={totalTodos}
+        motivationalPhrase={motivationalPhrase}
+        />
+
+        <Filtros 
+          onTodos={() => setTodos(defaultTodos)}//todos los elementos
+          onCompletados={() => setTodos(filterTodoCompleted)}
+          onNoCompletados={() => setTodos(filterTodoNoCompleted)}
+        />
+
+        <TodoSearch
+          searchValue={searchValue}
+          setSearchValue={setSearchValue}
+        />
+
+
+        <div className="container1">
+          <TodoList> 
+          {searchedTodos.map(todo => (
+          <TodoItem 
+            key={todo.text}
+            text={todo.text}
+            completed={todo.completed}
+            onComplete={() => completeTodo(todo.text)}
+            onDelete={() => deleteTodo(todo.text)} 
+          />))}
+          </TodoList>
+          <Graficos
+            completed={completedTodos}
+            total={totalTodos}
+          />
+        </div>
+      </div>
+      <CreateTodoButton/>
+      <Footer/>
+    </>
   );
 }
 
+
+
 export default App;
diff --git a/src/CreateTodoButton.css b/src/CreateTodoButton.css
@@ -0,0 +1,38 @@
+.CreateTodoButton{
+    background-color:#61dafa;
+    box-shadow:0 9px 25px rgba(97,218,250,.5);
+    border:none;
+    border-radius:50%;
+    cursor:pointer;
+    font-size:50px;
+    position:fixed;
+    bottom:24px;
+    right: auto;
+    left: 20px;
+    font-weight:700;
+    color:#fafafa;
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    height:64px;
+    width:64px;
+    transform:rotate(0);
+    transition:.3s ease
+}
+
+.CreateTodoButton:hover{
+    font-size: 50px;
+    transform:rotate(224deg)
+}
+
+@media (max-width: 768px) {
+    .CreateTodoButton{
+        left: 1px;
+        height:54px;
+        width:54px;
+    }
+    .CreateTodoButton:hover{
+        font-size: 40px;
+        transform:rotate(240deg)
+    }
+  }
diff --git a/src/CreateTodoButton.js b/src/CreateTodoButton.js
@@ -0,0 +1,20 @@
+import './CreateTodoButton.css'
+
+function CreateTodoButton(){
+    return(
+        <button
+         className="CreateTodoButton"
+         onClick={
+            (event) =>{
+                console.log('le diste click')
+                console.log(event)
+                console.log(event.target)
+            }
+         }
+         >
+         +
+         </button>
+    );
+}
+
+export {CreateTodoButton};
diff --git a/src/Filtros.css b/src/Filtros.css
@@ -0,0 +1,46 @@
+.filter{
+    display: flex;
+    justify-content: center;
+}
+
+.container__filter{
+    padding: 10px;
+    text-align: center;
+    background-color: black;
+    color: white;
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 10px;
+    width: 72%;
+    height: auto;
+    border-radius: 10px;
+}
+
+.filter__option{
+    margin: auto;
+    width: auto;
+    padding: 2px 10px;
+}
+
+
+.filter__option:hover{
+    color: #a5c6c4;
+    border: 4px solid black;
+    font-size: 16px;
+}
+
+/*hover*/
+/* CSS para pantallas pequeñas(768px o menos) */
+@media (max-width: 768px) {
+    .container__filter{
+        padding: 10px;
+        text-align: center;
+        background-color: black;
+        color: white;
+        display: flex;
+        justify-content: space-around;
+        width: 100%;
+        border-radius: 2px;
+    }
+  }
+
diff --git a/src/Filtros.js b/src/Filtros.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import './Filtros.css';
+
+function Filtros({ onTodos, onCompletados, onNoCompletados }) {
+  return (
+    <section className='filter'>
+        <div className='container__filter'>
+            <spa className="filter__option"
+                   onClick={onTodos}
+            >Todos</spa>
+
+
+            <span className="filter__option filter__option--completed"
+                  onClick={onCompletados}
+            >
+            Completados</span>
+
+
+            <span className="filter__option filter__option--no-completed"
+              onClick={onNoCompletados}
+            >No completados</span>
+        </div>
+    </section>
+  )
+}
+
+export { Filtros };