Treehouse Code Adventures > Panel de Configuración

Panel de Configuración

Un panel de configuración que permite a los usuarios administrar varias preferencias de cuenta incluyendo sincronización, visibilidad en línea, controles de privacidad y la opción de eliminar su cuenta.

Comienza la Aventura

Creado: 11/06/2023 por Dustin Usey

Nivel de habilidad: principiante

Temas utilizados:

Tiempo estimado de finalización: 1 Hora

Diseño de Diseño CSS Flexbox

Flexbox es un conjunto de propiedades de CSS que te proporciona una forma flexible de diseñar contenido.

Diseño de Cuadrícula CSS

CSS Grid Layout proporciona una forma integrada y más eficiente de diseñar diseños basados en cuadrículas en el navegador.

Fundamentos de JavaScript

En este curso, aprenderás los conceptos fundamentales de programación y la sintaxis del lenguaje de programación JavaScript.

Interactuando con el DOM

Junto con la selección de elementos DOM en JavaScript, también podemos escribir código que les dé comportamiento a los elementos. En este curso, primero exploraremos cómo observar la interacción y responder usando el método addEventListener.

Usando Almacenamiento Local con JavaScript

Local Storage es parte de la API de Almacenamiento Web y te permite, como desarrollador, almacenar datos en el navegador del usuario.

0
Para comenzar, haz clic en Comienza la Aventura en la parte superior de la página y luego descarga tus archivos de inicio.
1
Usa CSS Flexbox o Grid para diseñar los elementos en la página.
2
Usa JavaScript para agregar oyentes de eventos a los interruptores de alternancia y el botón eliminar.
3
Usa localStorage para guardar y cargar el estado de los interruptores de alternancia.
4
Si se hace clic en "eliminar", borra localStorage y establece todos los interruptores de alternancia en la posición apagada.
5
Desafío Extra: Añade otra configuración para alternar un modo oscuro y crea los estilos que lo acompañen.
6
Desafío Extra: Si se hace clic en "eliminar", pide al usuario que lo confirme nuevamente y que verifique que realmente desea eliminar su cuenta. Esto podría ser un elemento emergente modal o podría ser un campo de entrada que requiera que escriban "eliminar" para confirmar. Luego aparece un mensaje de éxito y el menú de configuración se borra.
7
Desafío Extra: Muestra una vista de "crear una cuenta" en el menú si la cuenta fue eliminada.