Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Mi cuenta

10/22
Recursos

Aportes 28

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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">

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:[email protected];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, ‘pico paréntesis’ debería pasar a formar parte de la documentación oficial. 😃

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>

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

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

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

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

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

Esto de reutilizar código, me está gustando

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


Comparto mis resultados:

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 “p” 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 “Body” 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:[email protected];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:[email protected];400;500;600;700&family=Roboto:[email protected]&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=“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:[email protected];500;700&display=swap” rel=“stylesheet”>
<title>Document</title>
<style>
:root {
–white: #ffffff;
–black: #000000;
–dark: #232830;
–very-light-pink: #c7c7c7;
–text-input-field: #f7f7f7;
–hospital-green: #acd9b2;
–sm: 14px;
–md: 16px;
–lg: 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=“login”>
<div class=“container”>
<h1 class=“title”>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: