funcionalides de ingreso

Vaap2099 · Aug 10, 2023 · 4ce4de7 · 4ce4de7
1 parent 403d832
commit 4ce4de7
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 9 deletions.
diff --git a/src/TodoContext/index.js b/src/TodoContext/index.js
@@ -11,7 +11,7 @@ function TodoProvider ({ children }) {
         loading,
         error,} = useLocalStorage('TODOS_V1', []);
   const [searchValue, setSearchValue] = React.useState('');
-  const [openModal, setOpenModal] = React.useState(true);
+  const [openModal, setOpenModal] = React.useState(false);
 
   const completedTodos = todos.filter(todo => !!todo.completed).length;
   const totalTodos=todos.length;
@@ -43,6 +43,16 @@ function TodoProvider ({ children }) {
     saveTodos(newTodos);
   }
 
+  const addTodo = (text) => {
+    const newTodos = [...todos];
+    newTodos.push ({
+      text, completed: false,
+    }
+
+    )
+    saveTodos(newTodos);
+  }
+
     return (
         <TodoContext.Provider value={{
             loading,
@@ -56,6 +66,7 @@ function TodoProvider ({ children }) {
             deleteTodo,
             openModal,
             setOpenModal,
+            addTodo, 
         }}>
             {children}
 

diff --git a/src/TodoForm/TodoForm.css b/src/TodoForm/TodoForm.css
@@ -0,0 +1,73 @@
+form {
+    width: 90%;
+    max-width: 300px;
+    background-color: #fff;
+    padding: 33px 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+label {
+    text-align: center;
+    font-weight: bold;
+    font-size: 20px;
+    color: #1E1E1F;
+    margin-bottom: 26px;    
+}
+
+textarea {
+    background-color: #F9FBFC;
+    border: 2px solid #202329;
+    border-radius: 2px;
+    box-shadow: 0px 5px 50px rgba(32, 35, 41, 0.25);
+    color: #1E1E1F;
+    font-size: 20px;
+    text-align: center;
+    padding: 12px;
+    height: 96px;
+    width: calc(100% - 25px);
+}
+
+textarea::placeholder {
+    color: #A5A5A5;
+    font-family: 'Montserrat';
+    font-weight: 400;
+}
+
+textarea:focus {
+    outline-color: #61DAFA;    
+}
+
+
+.TodoForm-buttonContainer {
+    margin-top: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.TodoForm-button {
+    cursor: pointer;
+    display: inline-block;
+    font-size: 20px;
+    color: 20px;
+    font-weight: 400;
+    width: 120px;
+    height: 48px;
+    border-radius: 2px;
+    border: none;
+    font-family: 'Montserrat';
+}
+
+.TodoForm-button--cancel {
+    background: transparent;
+    box-shadow: 0px 5px 25px rgba(97, 218, 250, 0.5);
+}
+
+.TodoForm-button--add {
+    background: #61DAFA;
+    box-shadow: 0px 5px 25px rgba(97, 218, 250, 0.5);
+}
diff --git a/src/TodoForm/index.js b/src/TodoForm/index.js
@@ -1,16 +1,52 @@
 import React from "react";
+import { TodoContext } from '../TodoContext'
+import './TodoForm.css'
 
 function TodoForm () {
-    return (
-        <form>
-            <label>Escribe tu nuevo TODO</label>
-            <textarea placeholder="Cortar cebolla para el almuerzo" />
-            <button className="TodoForm-button TodoForm-button--cancel">
+    const {
+        addTodo,
+        setOpenModal, 
+    } = React.useContext(TodoContext);
+
+    const [newTodoValue, setNewTodoValue] = React.useState('');
+
+    const onSubmit = (event) => {
+        event.preventDefault(); 
+        addTodo(newTodoValue);
+        setOpenModal(false);
+    }
+
+    const onCancel = () => {
+        setOpenModal(false);
+    }
 
-            </button>
-            <button className="TodoForm-button TodoForm-button--add">
+    const onChange = (event) => {
+        setNewTodoValue(event.target.value);
+    }
 
-            </button>
+
+
+    return (
+        <form onSubmit={onSubmit}>
+            <label>Escribe tu nuevo TODO</label>
+            <textarea             
+            placeholder="Cortar cebolla para el almuerzo" 
+            value={newTodoValue}
+            onChange={onChange}
+            />
+            <div className="TodoForm-buttonContainer">
+                <button 
+                type="button"
+                className="TodoForm-button TodoForm-button--cancel"
+                onClick={onCancel}>
+                    Cancelar
+                </button>
+                <button 
+                type="submit"
+                className="TodoForm-button TodoForm-button--add">
+                    Añadir
+                </button>
+            </div>
         </form>
     );
 }