No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Mi cuenta

10/22
Recursos

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.

edit.png

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

Aportes 48

Preguntas 14

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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">

Un atajo para escribir una etiqueta junto con una clase o un ID es usar emmet abbreviations. Por ejemplo:

p.value

Presiona la tecla tab:

<p class="value"></p>

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
            </h1>
            
            <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" >
                    [email protected]
                </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>

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

Segundo, 鈥榩ico par茅ntesis鈥 deber铆a pasar a formar parte de la documentaci贸n oficial. 馃槂

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

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

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

si teff copia y pega , porque yo no馃檲馃檲馃槉

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 馃.

Js

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");
}


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!!

*En esta clase, puedes utilizar la Clase 04 para variar los inputs de los textos.

Con este comando en Windows seleccionas todas las l铆neas de VScode

ctrl + a 
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; ... }

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

Esto de reutilizar c贸digo, me est谩 gustando

Comparto mis resultados:

Gracias profe por la clase鈥

<!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=Montserrat+Alternates:wght@300&family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>
        :root {
            --white: #ffffff;
            --black: #000000;
            --very-light-pink: #c7c7c7;
            --text-input-field: #f7f7f7;
            --hospital-green: #acd9b2;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }
        body {
            margin: 0;
            font-family: 'Quicksand', sans-serif;
        }
        .login {
            width: 100%;
            height: 100vh;
            display: grid;
            place-items: center;
        }
        .form-container {
            display: grid;
            grid-template-rows: auto 1fr auto;
            width: 300px;
        }
        /*.logo {
            width: 150px;
            margin-bottom: 50px;
            justify-self: center;
            display: none;
        }*/
        .title {
            font-size: var(--lg);
            margin-bottom: 48px;
            text-align: start;
            color: var(--black);
        } 
        .form {
            display: flex;
            flex-direction: column;
                   
        }
        .form div {
            display: flex;
            flex-direction: column;
                     
        }
        .label {
            font-size: var(--sm);
            font-weight: bold;
            margin-bottom: 4px;
        }
        .input {
          background-color: var(--withe);
          border: none;
          /* border-radius: 8px; */
          height: 30px;
          font-size: var(--md);
          padding: 6px;
          margin-bottom: 30px;
        }
        .secundary-button{
            background-color: var(--white);
            border-radius: 8px;
            border: 1px solid var(--hospital-green);
            height: 50px;
            color: var(--hospital-green);
            cursor: pointer;
            font-size: var(--md);
            font-weight: bold;
        }
        .login-button {
            margin-top: 14px;
            margin-bottom: 30px;
        }
        @media (max-width:640px) {
            /*.logo {
                display: block;
            }*/
            .form-container{
                height: 100%;
            } 
            .form{
                height: 98%;
                justify-content: space-between;
            }    
        }
    </style>
</head>
<body>
    <div class="login">
        <div class="form-container">
                <h1 class="title">My account</h1>
            <form action="/" class="form">
                <div>
                    <label for="name" class="label">Name</label>
                    <!-- /*<input type="text" id="name" placeholder="Alejandro Parra" class="input input-name">*/ -->
                    <p class="input">Alejandro Parra</p>
                    <label for="email" class="label">Email Address</label>
                    <!-- <input type="text" id="email" placeholder="ejemp[email protected]" class="input input-email"> -->
                    <p class="input">[email protected]</p>
                    <label for="password" class="label">Password</label>
                    <!-- <input type="password" id="password" placeholder="***************" class="input input-password"> -->
                    <p class="input">**********</p>
                </div>
                <input type="submit" value="Edit" class="secundary-button">
            </form>
                
        </div>
    </div>
</body>
</html> 

Excelente profesora

.

Yo en lugar de poner parrafos deje los input con el atributo booleando 鈥渄isabled鈥 y le agregue la clase disabled

<input disabled type="text" id="name" class="input disabled" placeholder="Camila Yokoo">

Luego en CSS especifique que los elementos que tengan ambas clases 鈥渋nput鈥 y 鈥渄isabled鈥 el fondo fuera de color blanco.

.input.disabled{
            background-color: var(--white);
        }

Lo hice antes de ver la clase, el resultado es el mismo, hay alg煤n problema con hacerlo de este modo?

Que bien, me entusiasma mucho ver como se reestructura todo esto en el curso de react 馃檲

Comparto los apuntes que he tomado hasta ahora.

Que bueno es reutilizar el c贸digo para var铆as p谩ginas, ya veo un poco el sentido de componentes de los frameworks.

#B谩sicamente ! Genial =D

respecto a la regla del margin pueden usar como dijo la profe, tanto espec铆ficamente a donde los van a asignar. Bottom, left, right, top, o con el general e el sentido de las manecillas del reloj, todo depender谩 de como lo trabaja cada uno.

Para agregar el favicon se puede agregar lo siguiente dentro del head

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

Esta excelente el tip de las manecillas del reloj para dar tama帽o al margin, para tener muy en cuenta

Super todo, me gusta como se hace de rapido cada pantalla solo es cambiar algunas cositas pero porque tiene una barra de navegacion y nosotros aun no :c

Cambien los estilos de los colores, ya que no se ven!!

"Margin Top and Bottom en la etiqueta 搂"
Para los que resulte raro/extra帽o que las etiquetas 鈥減鈥 tengan un margen predeterminado, simplemente se debe al motor del navegador. Estos agregan estilos predeterminados y cada navegador es distinto.

Chrome webkit: agrega un margin top y bottom de 1 em
Firefox Gecko: agrega un margin bottom de 1em

Para estos casos (Se ver谩 en los futuros cursos) se deber谩 resetear los estilos. Un ejemplo muy b谩sico seria en la etiqueta 鈥淏ody鈥 poner:

margin: 0px;
padding:0px;

https://stackoverflow.com/questions/20850594/what-is-the-default-margin-value-of-p-tag
https://meyerweb.com/eric/tools/css/reset/
Les recomiendo a este youtuber:
https://www.youtube.com/watch?v=Foieq2jTajE&ab_channel=EduardoFierro

Puedes cambiar los estilos cuando el mouse est谩 encima de de los p谩rrafos y el secundary boton con estos estilos:

.secondary-button:hover
    {
        border: none;
        width: 100%;
        height: 60px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 12px;
        background-color: var(--hospital-green);
        font-size: var(--medium);
        color: var(--white);
        margin-bottom: 32px;
    }
 .value:hover
    {
        background-color: gray;
        color: var(--text-input-field);
    }


Y si al .value original le agregas esta l铆nea te c贸digo te queda mucho mejor:

transition: 0.5s all;

Mi resultado desktop:

Resultado mobile:

<!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 {
      --white: #FFFFFF;
      --black: #000000;
      --very-light-pink: #C7C7C7;
      --text-input-field: #F7F7F7;
      --hospital-green: #ACD9B2;
      --sm: 14px;
      --md: 16px;
      --lg: 18px;
    }
        body{
            margin: 0;
        }

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

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

        }
        .logo{

         width: 150px;
         margin-bottom: 48px;
         justify-self: center;

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

        }
        .subtitle{

            color:var(--very-light-pink);
            font-size:var(--md);
            font-weight: 300;
            margin-top: 0;
            margin-bottom:32px;
            text-align: center;
        }
        .form{

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

            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;

        }
        .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;

        }
        .login-button{
            margin-top: 14px;
            margin-bottom: 30px;

        }

        @media(max-width:640px){
           
            .form-container{

        height: 100%;
        
            }
           
           
            .form{

                height: 100%;
                justify-content: space-between;
            }

        }
    </style>
</head>
<body>
    <div class="login">
        <div class="form-container">
         
            <h1 class="title" >My account</h1>
           
        
    <form action="/" class="form">
        <div>
            <label for="name" class="label">Name</label>
           <p class="value">Camila Yokko</p>
            <label for="email" class="label">Email</label>
           <p class="value">[email protected]</p>
            <label for="password" class="label">Password</label>
            <p class="value">********</p>
        </div>
    
    <input type="submit" value="Edit" class="secondary-button login-button">
</form>
</div>
</div>
</body>
</html>

Dejo mi c贸digo 馃槃

<!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">
    <meta name="description" content="This is store of whatever">
    <meta name="robots" content="index, follow">
    <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;400;500;600;700&family=Roboto:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/style.css" type="text/css">
    <link rel="shortcut icon" href="./logos/favicon_bota_fora.svg" type="img">
        <title>Yard Sale</title>
    <style>
        .myaccount {
            display: grid;
            place-items: flex-start center;

            width: 100%;
            height: 100vh;
        }

        .myaccount__container {
            width: 100%;
            max-width: 42.5rem;
            height: 100%;
            padding: 2.4rem;
            display: grid;
            grid-template-rows: 10% 90%;
        }

        .myaccount__title {
            justify-self: flex-start;
            font-size: var(--lg);
        }

        .form {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .form_text-inputs{
            display: flex;
            flex-direction: column;
        }

        .myaccount__label {
            margin-bottom: 0.4rem;
            margin-top: .4rem;

            font-size: var(--sm);
            font-weight: bold;
        }

        .myaccount__text {
            margin-top: .4rem;
            margin-bottom: 4rem;

            font-size: var(--sm);
            color: var(--very-light-pink);
            font-weight: bold;
        }

        .myaccount__button--secondary{
            align-self: flex-end;

            width: 100%;
            height: 5rem;
            padding: 1.6rem;
            border: solid .1rem var(--hospital-green);
            border-radius: 0.8rem;
            margin-bottom: 1.2rem;
            margin-top: 2rem;

            font-weight: bold;
            background-color: var(--white);
            color: var(--hospital-green);
            font-size: var(--md);
            cursor: pointer;
        }

        .button--primary:hover {
            background-color: #73bf7d;
        }

        .button--primary:active {
            background-color: #4da859;
        }

    </style>
</head>
<body>
    <section class="myaccount">
        <div class="myaccount__container">
            <h1 class="myaccount__title">My account</h1>
            <div action="/" class="form">
                <div class="form_text-inputs">
                    <p class="myaccount__label">Name</p>
                    <p class="myaccount__name myaccount__text">Someone</p>
                    <p class="myaccount__label">Email</p>
                    <p class="myaccount__email myaccount__text">[email protected]</p>
                    <p class="myaccount__label">Password</p>
                    <p class="myaccount__password myaccount__text">********</p>
                </div>
            <input type="submit" value="Edit" class="myaccount__button--secondary">
            </div>
        </div>
    </section>
</body>
</html>

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<link rel=鈥減reconnect鈥 href=鈥https://fonts.googleapis.com鈥>
<link rel=鈥減reconnect鈥 href=鈥https://fonts.gstatic.com鈥 crossorigin>
<link href=鈥https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap鈥 rel=鈥渟tylesheet鈥>
<title>Document</title>
<style>
:root {
鈥搘hite: #ffffff;
鈥揵lack: #000000;
鈥揹ark: #232830;
鈥搗ery-light-pink: #c7c7c7;
鈥搕ext-input-field: #f7f7f7;
鈥揾ospital-green: #acd9b2;
鈥搒m: 14px;
鈥搈d: 16px;
鈥搇g: 18px;

    }
    body {
        font-family: "font-family: 'Quicksand', sans-serif;";
    }
    body {
        margin: 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:  45px;
        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;

    }
    .secundary-buttom {
        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;
    }
    .login-buttom {
        margin-top: 14px;
        margin-bottom: 30px;
    }
    @media (max-width: 640px) {
        .form-container{
            height: 100%;}
          
        .form {
            height: 100%;
            justify-content: space-between;
        }
        
    }

</style>

</head>
<body>
<div class=鈥渓ogin鈥>
<div class=鈥渃ontainer鈥>
<h1 class=鈥渢itle鈥>My account</h1>

        <form action="/" class="form">
            <div>

               <label for="name" class="label">Name</label>
               <p class="value">Camilo Yen </p>
            
               <label for="email" class="label">Email address</label>
               <p class="value">[email protected] </p>

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

            </div>
            

            <input type="submit"value="Edit"
            class="secundary-buttom login-buttom">

        </form>
    </div>
</div>

</body>
</html>

Resultado: