Edición de Cuenta: Cambios en Inputs y Botones en Pantalla

Clase 10 de 22 • Curso Práctico de Frontend Developer

Resumen

Esta vez te enseñaré a maquetar la pantalla que permitirá al usuario editar su cuenta. Como puedes ver, esta vista contiene otros datos relevantes como el email, la contraseña y el nombre de la persona.

Cómo enseñar al usuario los datos ingresados

Para mostrarle a usuario los datos que ingresó en su registro, usaremos el código de la sección “crear cuenta”. Teniendo presente que la función de esta vista es mostrar información, no obtenerla. Es necesario que modifiquemos lo siguiente al formulario.

Los inputs los dejamos como párrafos

<div>
          <label for="name" class="label">Name</label>
          <p class="value">Camila Yokoo</p>

          <label for="email" class="label">Email</label>
          <p class="value">camilayokoo@gmail.com</p>

          <label for="password" class="label">Password</label>
          <p class="value">*********</p>
        </div>

Estilizamos el texto

.value {
      color: var(--very-light-pink);
      font-size: var(--md);
      margin: 8px 0 32px 0;
    }

Al botón le aplicamos la clase secondary-button

.secondary-button {
      background-color: var(--white);
      border-radius: 8px;
      border: 1px solid var(--hospital-green);
      color: var(--hospital-green);
      width: 100%;
      cursor: pointer;
      font-size: var(--md);
      font-weight: bold;
      height: 50px;
    }

Cómo continuar con el proyecto

Hemos finalizado el módulo de creación de las pantallas de autenticación. Ahora solo nos falta construir las vistas principales. Recuerda que en el Curso Práctico de React.js uniremos todas las pantallas terminando nuestro frontend.

Si crees que sería bueno darle dinamismo a estas vistas con JavaScript, también lo haremos en el curso Práctico de JavaScript.

Contribución creada por Guadalupe Monge Barale

Miguelangel Soto Tovar

student•

No se si me adelanto pero si quieren colocar el logo del proyecto en el titulo de la pestaña solo tiene que añadir un link en el <head> con la ruta de la imagen en el caso del proyecto es la

<link rel="shortcut icon" href="./logos/favicon_bota_fora.png.svg" type="img">

Joel Dominguez Merino

student•

Muy buen aporte, igual yo desde que se creo el proyecto coloque el favicon de la página y lo he añadido a todas. Prefiero ver un icono antes que el icono por defecto 😅

Francisco Antonio Rivera Viveros

student•

buen aporte!

Luis Alejandro Vera Hernandez

student•

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    
    <title>Document</title>
    <style>
        :root {
            --black: #000000;
            --white: #ffffff;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --hospital-green: #acd0b2;
            --primary-button-hover: #5ab865;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }

        body {
            font-family: 'Quicksand', sans-serif;
            margin:0;
            padding:0
        }

        .login{
            width:100%;
            height: 100vh;
            display: grid;
            place-items: center ;
        }

        .container{  
            display: grid;
            grid-template-rows: auto 1fr auto;
            width: 300px;
        }

       

        .title{
            font-size: var(--lg);
            margin-bottom: 40px;
            text-align: start;
        }


        .form{
            display: flex;
            flex-direction: column ;
        }

        .label {
            font-size: var(--sm);
            font-weight: bold;
            margin-bottom: 4px;
        }

        .value{
            color: var(--very-light-pink);
            font-size: var(--md);
            margin: 8px 0 32px 0;
        }
        
        .primary-button{
            margin-top: 24px;
            
            height: 40px;
            width: 300px;
            border: 1px solid var(--hospital-green);
            border-radius: 12px;
            

            color: var(--hospital-green);
            font-size: var(--md);
            font-weight: bold;

            background-color: var(--white);

            cursor: pointer;


        }

        .primary-button:hover{
            background-color: var(--primary-button-hover);
            color: var(--white);
        }

        @media (max-width: 640px){
            .logo{
                display: block;
            }

            .primary-button{
                position: absolute;
                bottom: 0;
                margin-bottom: 24px;
            }
        }
        
    </style>
</head>
<body>
    <div class="login">
        <div class="container">
            <h1 class="title">
                My account
            </h2>
            
            <form action="" class="form">
                <label for="name" class="label">
                    Name
                </label>
                <p class="value">
                    Camila Yokoo
                </p>

                <label for="email" class="label">
                    Email address
                </label>
                <p class="value" >
                    camilayokoo@gmail.com
                </p>

                <label for="password" class="label">
                    Password
                </label>
                <p class="value">
                    ***********
                </p>
                
                <input type='submit' value="Edit" class="primary-button login-button" />
            </form>
        </div>
    </div>
</body>
</html>

Edixon javier Pabon Lizcano

student•

Genial se ve muy ordenado.

Alan Muñoz Badillo

student•

Primero, agradecido de todo el conocimiento adquirido hasta el momento.

Segundo, 'pico paréntesis' debería pasar a formar parte de la documentación oficial. :)

Antoni Bassols Lopez

student•

Pico paréntesis derecho y pico paréntesis izquierdo jajajaja

Platzi Team

student•

Por andar diciendo estas cosas, se extinguieron los dinosaurios

Joel Dominguez Merino

student•

Otra pantalla más terminada! Realmente esta siendo muy sencillo ya que una vez tienes una pantalla, la siguiente cambia una que otra cosa. 🌐 Les comparto mi código: https://github.com/iJCode1/frontend_practico_platzi

Reinaldo Mendoza

student•

Si senor

Celestino Guerrero

student•

Una pregunta, Que es más recomendable para CSS, el uso de clases o combinadores?Evitó poner clases si puedo usar combinadores?

Estefany Aguilar

teacher•

Hola, Celestino ! Qué buena pregunta...

En ejercicios pequeños, el uso de combinadores está bien. El problema de ellos es cuando ya tienes un proyecto enorme porque estos se empiezan a combinar con todos los elementos que ya tenemos en el sitio (ya que son globales). Por esta razón, se recomienda usar más las clases o clases + combinadores para evitar que se "sobreescriban" los estilos de todo tu sitio. 😊

Eduardo Peña Ramos

student•

Tiene sentido lo que dice Teff. Otra ventaja de las clases es que puedes ponerle nombres específicos que te ayuden en la legibilidad del código.

Emilio Ariel Santos Mateo

student•

Kevin Zavala

student•

Hasta aquí mi reporte, he realizado este proyecto con Angular, por si alguien quiera tener una base, lo único que le veo de malo hasta ahora es que realizo un copy-paste de varios estilos en los individuales de cada componente, eso se puede solucionar agregando los estilos en el archivo de styles.sccs y agregar los diferentes en cada hoja de estilos de los componentes. https://github.com/KevinZav/Frontend-Basic

Rodrigo Rodriguez

student•

Yo tambien utilice angular para maquetar y crear componentes en otro proyecto, me surgio un problema que no pude resolver hasta ahora, es que quiero utilizar Scss , para utilizar variables , mixins ,etc, el tema es que las variables y mixin no los puedo "ver" dentro de los componentes. Para no atascarme lo que hice fue crear todos los estilos en el styles.scss , inclui ahi las variables y mixins y practicamente no tengo css en los componentes, lo cual no me gusta porque va contra la idea de componente mismo.

Reinaldo Mendoza

student•

No he usado angular pero con react me ahorraria un monton de copy paste

Juan Roberto González León

student•

se puede hacer una especie de función o variable para los botones, es decir hacer cada botón con sus labels como si fuera una función que se invoca o una variable?

Omar García Betanzos

student•

En React podrías hacerlo pero acá no, ya que no es como funciona html, ni CSS.

Juan Castro

teacher•

En este curso nos enfocamos únicamente en HTML y CSS. Usando JavaScript ya podemos encargarnos de este tipo de eventos. Durante la Escuela de JavaScript aprenderemos a hacerlo usando React.js.

Ernán Alexander Velásquez Ramírez

student•

Prefiero hacerlo con la opción disabled que la etiqueta <p> \

Obed isai Rodríguez

student•

hola. como se llama el tema del codigo

Rodrigo Ramos Xochiteotzin

student•

¿Cómo haces para mover una línea de código a otra sin tener que copiar y pegar?

Christopher Andrés Guano Valencia

student•

Con Alt + flecha arriba o flecha abajo

Jorge Rodríguez Bugallo

student•

Feliz de ver como cada avance que hacemos en el proyecto ayuda a asentar los conocimientos. Cuando empecé pensé que sería mucho más complejo, ahora con cada clase lo veo más simple!!! Esto es adictivo!!

Mauricio Carrasco

student•

Intenté implementar Javascript para cambiar los datos de la cuenta y este es el resultado. Aunque ahora me gustaría saber como se guardaría eso en una base de datos 🤔.

const button = document.querySelector(".button__secondary");

console.log(button);
button.addEventListener("click", availableToChangeData);
button.addEventListener("click", changeButtonValue);

function availableToChangeData() {
  let dataAccount = document.querySelectorAll(".value");
  dataAccount = Array.from(dataAccount);
  console.log(dataAccount);
  for (i in dataAccount) {
    let data = dataAccount[i];
    let dataValue = data.textContent;

    let loginInput = document.createElement("input");
    loginInput.classList.add("login__input");
    loginInput.setAttribute(
      "style",
      "height: 45px;margin-bottom: 20px;padding: 0 12px;border: none;border-radius: 10px;background: var(--text-input-field);color: var(--very-light-pink);font-size: var(--medium);font-weight: 300;outline: none;"
    );
    if (i === "0") {
      loginInput.setAttribute("value", dataValue);
      loginInput.setAttribute("type", "text");
      loginInput.setAttribute("id", "name");
      loginInput.setAttribute("autocomplete", "name");
    } else if (i === "1") {
      loginInput.setAttribute("value", dataValue);
      loginInput.setAttribute("type", "email");
      loginInput.setAttribute("id", "email");
      loginInput.setAttribute("autocomplete", "email");
    } else if (i === "2") {
      loginInput.setAttribute("value", dataValue);
      loginInput.setAttribute("type", "password");
      loginInput.setAttribute("id", "password");
      loginInput.setAttribute("autocomplete", "new-password");
    }

    let dadNode = data.parentNode;
    dadNode.replaceChild(loginInput, data);
  }
}

function changeButtonValue() {
  button.value = "Save";
  button.classList.replace("button__secondary", "login__button");
}

Reinaldo Mendoza

student•

Depende del lenguaje que quieras usar en el back y el middleware que quieras usar para la conexion

Charles Duck Castillo Rosas

student•

Apuntes de este curso en Notion

Fabiana Solmayra Rachi Montalvo

student•

Jorge Raúl Piscoya Calderón

student•

tengo un serio problema con las muletillas, es exagerado el uso del "basicamente" de la teacher.

Eduardo Peña Ramos

student•

En general conocer muchos tipos de personas, culturas, viajar y leer ayuda mucho. Yo también lo noto, pero sinceramente no es importante, me fijo más en el contenido o fondo de la clase. Saludos!

Daniel A. León Lovera

student•

Hola, tengo una inquietud con el código, por que cambiar el Primary-button por Secondary-button? ... hice la prueba y con Primary funciona, pero no se si es por higiene o por alguna funcionalidad mas adelante?

Platzi Team

student•

Es por la funcionalidad del botón secundario. Es por llamarlos por su nombre.

Juan Pablo Gaviria Salazar

student•

Adicional a lo que menciona Alexander, en un futuro la idea no es repetir código, sino tener un lugar centralizado donde se definan los estilos y que solo sea colocar la clase de secondary button y ya este tome las propiedades css

Alfredo Luis Racero Blanco

student•

En mi humilde opinión, a los formularios hay que dejarle los inputs, no reemplazarlos por párrafos. Y, en cambio, usar la propiedad disabled, y darle estilo específico para cuándo esa propiedad aparece sobre el input. Algo como:

.input[disabled] { border: none; ... }

Mauricio Miguel Rivera

student•

¿Puedes explicar más sobre dejar los inputs y no cambiarlos por <p>? A mi me confundió cuando hizo eso.

Yasmil Gonzalez

student•

Carmen Álvarez M.

student•

Esto de reutilizar código, me está gustando

Jesús Brito

student•

Agregue un pequeño cambio en mi pagina con el atributo disabled en los input para no cambiar a una etiqueta p .. Me parece que tambien viene bien mostrar los datos asi y ya cuando se presione el boton de editar habilitarlos

Alexis Corrales

student•

Realmente en la practica es mucho mejor, ya que después solo tienes que validar el atributo.

Te recomiendo también cambiar los estilos para que puedas diferenciar entre un input activo y uno disabled.