Alondra Cruz

A continuación el código de:

Login.jsx

import React from "react";
import Axios from "axios";

const authentication = (e) => {
  e.preventDefault();

  const form = e.target;
  const data = {
    email: form.email.value,
    password: form.password.value,
  };

  Axios.post(`${process.env.REACT_APP_API_USER}/login`, data)
    .then((response) => {
      localStorage.setItem("token", response.data.token);
      window.location = "/";
    })
    .catch((error) => console.log(error));
};

const Login = () => {
  return (
    <div className="ed-grid">
      <div className="l-block"></div>
      <div className="m-to-center m-60 lg-30">
        <h1 className="center">Iniciar sesión</h1>
        <form onSubmit={authentication.bind()}>
          <div className="form__item">
            <label htmlFor="email">
              Correo electrónico
              <input
                type="email"
                id="email"
                placeholder="Ingrese su e-mail"
                required
                name="email"
              />
            </label>
          </div>
          <div className="form__item">
            <label htmlFor="password">
              Contraseña
              <input
                type="password"
                id="password"
                placeholder="Ingrese su contraseña"
                name="password"
              />
            </label>
          </div>
          <div className="form_item">
            <input
              type="submit"
              value="Iniciar sesión"
              className="button full"
              required
            />
          </div>
        </form>
      </div>
    </div>
  );
};

export default Login;

Register.jsx

import React from "react";
import Axios from "axios";

const registration = (e) => {
  e.preventDefault();
  const form = e.target;

  const data = {
    email: form.email.value,
    name: form.fullname.value,
    password: form.password.value,
  };

  Axios.post(`${process.env.REACT_APP_API_USER}/signup`, data)
    .then(() => {
      alert("Usuario creado");
      window.location = "/login";
    })
    .catch(() => alert("Error al crear el usuario"));
};

const Register = () => {
  return (
    <div className="ed-grid">
      <div className="l-block"></div>
      <div className="m-to-center m-60 lg-30">
        <h1 className="center">Crear cuenta</h1>
        <form onSubmit={registration.bind()}>
          <div className="form__item">
            <label htmlFor="fullname">
              Nombre completo
              <input
                type="text"
                id="fullname"
                placeholder="Ingrese su nombre"
                required
                name="fullname"
              />
            </label>
          </div>
          <div className="form__item">
            <label htmlFor="email">
              Correo electrónico
              <input
                type="email"
                id="email"
                placeholder="Ingrese su e-mail"
                required
                name="email"
              />
            </label>
          </div>
          <div className="form__item">
            <label htmlFor="password">
              Contraseña
              <input
                type="password"
                id="password"
                placeholder="Ingrese su contraseña"
                name="password"
              />
            </label>
          </div>
          <div className="form_item">
            <input
              type="submit"
              value="Iniciar sesión"
              className="button full"
              required
            />
          </div>
        </form>
      </div>
    </div>
  );
};

export default Register;

.env.local

# Variables de entorno 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:

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

En el vídeo Beto implementa

.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

.getInscritos().push(maria);

Mi 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.