Alondra Cruz

A continuación el código de:

Login.jsx

1import React from "react";
2import Axios from "axios";
3
4const authentication = (e) => {
5 e.preventDefault();
6
7 const form = e.target;
8 const data = {
9   email: form.email.value,
10   password: form.password.value,
11 };
12
13 Axios.post(`${process.env.REACT_APP_API_USER}/login`, data)
14   .then((response) => {
15     localStorage.setItem("token", response.data.token);
16     window.location = "/";
17   })
18   .catch((error) => console.log(error));
19};
20
21const Login = () => {
22 return (
23   <div className="ed-grid">
24     <div className="l-block"></div>
25     <div className="m-to-center m-60 lg-30">
26       <h1 className="center">Iniciar sesión</h1>
27       <form onSubmit={authentication.bind()}>
28         <div className="form__item">
29           <label htmlFor="email">
30             Correo electrónico
31             <input
32               type="email"
33               id="email"
34               placeholder="Ingrese su e-mail"
35               required
36               name="email"
37             />
38           </label>
39         </div>
40         <div className="form__item">
41           <label htmlFor="password">
42             Contraseña
43             <input
44               type="password"
45               id="password"
46               placeholder="Ingrese su contraseña"
47               name="password"
48             />
49           </label>
50         </div>
51         <div className="form_item">
52           <input
53             type="submit"
54             value="Iniciar sesión"
55             className="button full"
56             required
57           />
58         </div>
59       </form>
60     </div>
61   </div>
62 );
63};
64
65export default Login;

Register.jsx

1import React from "react";
2import Axios from "axios";
3
4const registration = (e) => {
5 e.preventDefault();
6 const form = e.target;
7
8 const data = {
9   email: form.email.value,
10   name: form.fullname.value,
11   password: form.password.value,
12 };
13
14 Axios.post(`${process.env.REACT_APP_API_USER}/signup`, data)
15   .then(() => {
16     alert("Usuario creado");
17     window.location = "/login";
18   })
19   .catch(() => alert("Error al crear el usuario"));
20};
21
22const Register = () => {
23 return (
24   <div className="ed-grid">
25     <div className="l-block"></div>
26     <div className="m-to-center m-60 lg-30">
27       <h1 className="center">Crear cuenta</h1>
28       <form onSubmit={registration.bind()}>
29         <div className="form__item">
30           <label htmlFor="fullname">
31             Nombre completo
32             <input
33               type="text"
34               id="fullname"
35               placeholder="Ingrese su nombre"
36               required
37               name="fullname"
38             />
39           </label>
40         </div>
41         <div className="form__item">
42           <label htmlFor="email">
43             Correo electrónico
44             <input
45               type="email"
46               id="email"
47               placeholder="Ingrese su e-mail"
48               required
49               name="email"
50             />
51           </label>
52         </div>
53         <div className="form__item">
54           <label htmlFor="password">
55             Contraseña
56             <input
57               type="password"
58               id="password"
59               placeholder="Ingrese su contraseña"
60               name="password"
61             />
62           </label>
63         </div>
64         <div className="form_item">
65           <input
66             type="submit"
67             value="Iniciar sesión"
68             className="button full"
69             required
70           />
71         </div>
72       </form>
73     </div>
74   </div>
75 );
76};
77
78export default Register;

.env.local

REACT_APP_API_URL =  http://localhost:3003

REACT_APP_API_USER = https://api-edteam.alejogs4.now.sh

Para que se leída la variable de entorno local, deben parar la ejecución de la app en la terminal y volver a mandarla a producción (con el comando yarn start).

Para saber la lista de los micrófonos que se recomiendan, en el video se menciona que si eres premium puedes acceder a esa lista. Soy premium y no esta ☹️

Una forma más "fácil" que considero yo para hacer que una imagen este al lado opuesto de la otra es que teniendo las clases grid, section (para el padre) e img-banner (para el hijo: contenedor de la imagen) es suficiente; solo hay que hacer uso de la pseudoclase nth-child(odd) y/o pseudoclase nth-child(even).

Ejemplo:

1.grid.section:nth-child(odd) .img-banner{
2   grid-row-start: 1;
3}

En el vídeo Beto implementa ~~~html.setInscritos([...html.getInscritos(), maria]);~~~ pero se me ocurrio primero mandar a traer el array y después con el método push pasar al nuevo estudiante

1
2Mi pregunta es ¿sería correcto?

La imagen al inicio tiene un width="50" height="50" x="75" y="50" . Cuando agregamos el transform="scale(2)" pasa a tener los siguientes valores width="100" height="100" x="150" y="100" por eso se posiciona en la esquina inferior derecha. Ahora, una forma para volver a centrarla es modificar sus coordenadas ¿cómo? La imagen mide 100x100, el viewBox 200x150. Hay que restar el ancho del elemento con el ancho del contenedor padre y el alto del elemento padre con el alto de la imagen para que tengamos el espacio disponible que existe entre ellos. 200 - 100 = 100 150 - 100 = 50 Bien. Ya tenemos la diferencia, ahora hay que dividir entre dos (porque queremos tengan el mismo espacio de diferencia) 100 / 2 = 50 50 / 2 = 25 Una vez terminado, hay que volver a dividir entre dos (porque tenemos una escala en dos) 50 / 2 = 25 25/ 2 = 12.5 ¡Listo! tenemos las coordenadas nuevas, x= 25, y=12.5
Espero me haya dado a entender y ha alguien le sirva.

En la clase, Álvaro comenta que se pronto harán un curso de animaciones con JavaScript con propiedades que no se pueden animar con CSS puro. La pregunta es ¿ya está o todavía no?

Gracias.