Edición de Cuenta: Cambios en Inputs y Botones en Pantalla
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.
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.
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 52
Preguntas 14
Ordenar por:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
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
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
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!!
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);
functionavailableToChangeData() {
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");
} elseif (i === "1") {
loginInput.setAttribute("value", dataValue);
loginInput.setAttribute("type", "email");
loginInput.setAttribute("id", "email");
loginInput.setAttribute("autocomplete", "email");
} elseif (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);
}
}
functionchangeButtonValue() {
button.value = "Save";
button.classList.replace("button__secondary", "login__button");
}
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
Revisando la pagina en mi telefono con la herramienta de VScode para reenviar puertos, me di cuenta que en celular tenia un scroll que en desktop no, ni usando la herramienta del inspector para ver la parte responsive me salia ese scroll, esto se debe a que en los telefonos tenemos la barra de navegacion que en muchos casos nunca desaparece. Mi solucion fue algo muy siemple y es que en vez de usar la medida **vh** (**viewport height**), la cambie por **dvh** (**dynamic viewport height)**, que si toma en cuenta la barra de navegacion que tenemos en el telefono, con eso me deshice de ese scroll todo molesto
Hello Platzi, Ya tengo my Account\_Details on GreenScreen\n me gusta mucho, \nSiempre es bueno hacer de curiosos con mas \\'Features'\ en CSS para mejorar el Dieseno base, ademas que ese --light-pink color no me gusta para Nada \n

Aqui dejo mi aporte sobre la maquetación de la sección "Mi cuenta".
[Yard Sale - My account (laumartinez-code.github.io)](https://laumartinez-code.github.io/yard-sale-FE/my-account.html)
Repo: [LauMartinez-Code/yard-sale-FE at e68fad10961fe (github.com)](https://github.com/LauMartinez-Code/yard-sale-FE/tree/e68fad10961fe531fdb712ce5dcc944de583025b)
Le agregué la funcionalidad para que edite y guarde los cambios desde la misma página si hacer una redirección y que los cambios se persistan en el localStorage.
Desde aquí se puede probar el resto del sitio [Yard Sale - Login](https://laumartinez-code.github.io/yard-sale-FE/login.html)
```Por que cambiar los input por etiquetas de párrafos, tiene alguna ventaja a futuro o solo sería por temas de la clase y el uso de las etiquetas.
Desde mi punto de vista sería mejor trabajar con input debido a que ya la información puedo editar en la misma página.
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.
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
"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:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?