Treehouse Code Adventures > Modal de Detalles del Producto

Modal de Detalles del Producto

Crea un modal de detalles del producto para una ficticia compañía de relojes inteligentes del futuro. Al presentar efectivamente el producto, responder preguntas de clientes y abordar preocupaciones potenciales planteadas en reseñas, la página de detalles del producto juega un papel directo en la conversión de visitantes en compradores.

Comienza la Aventura

Creado: 12/14/2023 por Dustin Usey

Nivel de habilidad: avanzado

Temas utilizados:

Tiempo estimado de finalización: 10 horas

Conceptos Básicos de HTML

Aprende HTML (Lenguaje de Marcas de Hipertexto), el idioma común de todos los sitios web. HTML describe la estructura básica y el contenido de una página web.

Formularios HTML

Aprende sobre todos los elementos de formulario más importantes que los profesionales web utilizan a diario.

Conceptos Básicos de CSS

Aprende los conceptos básicos de CSS, una de las tecnologías principales para diseñar y construir sitios web y aplicaciones.

Diseño CSS

Cubre cómo el Modelo de Caja de CSS impacta la presentación de cada elemento HTML, aprende a controlar la posición de cada elemento en pantalla e incluso comienza a ajustar nuestros diseños para diferentes tamaños de pantalla y entornos.

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 Diseño CSS Móvil Primero

Practica el uso de técnicas de diseño de CSS como CSS Reset con Normalize, un contenedor de diseño, un pie de página fijo y contenido centrado con un encabezado de ancho completo.

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.

Funciones de JavaScript

Las funciones de JavaScript te permiten crear fragmentos de código reutilizables. Hacen que la programación sea más rápida, fácil y menos propensa a errores.

Bucles en JavaScript

Los bucles son una forma de repetir código -- son útiles para tareas repetitivas. Los bucles se usan frecuentemente para acciones que necesitan ejecutarse un número particular de veces o hasta que se cumpla una cierta condición.

JavaScript y el DOM

JavaScript te permite crear páginas web interactivas que pueden responder a las acciones del usuario. En este curso, aprenderás a dar vida a las páginas web usando el poder de 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.

DOM Scripting por Ejemplo

Usa JavaScript para construir una aplicación web RSVP. Muchas de las características que construirás son comunes a otras aplicaciones web.

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.

Métodos de Iteración de Arrays en JavaScript

Aprende cómo acceder y transformar datos en arrays con los métodos de iteración de arrays de JavaScript.

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
Desafío Extra: Haz que el modal sea completamente responsivo.
2
Desafío Extra: Habilita la capacidad de agregar una reseña agregando un botón "Agregar Reseña" en la pestaña de reseñas. Esto debe mostrar un formulario que permita al usuario ingresar su nombre y reseña. Al hacer clic en el botón "Enviar" se agregará la reseña a la lista de reseñas. Almacena las reseñas en el almacenamiento local para que persistan cuando se actualice la página.
3
Desafío Extra: Habilita la capacidad de hacer una pregunta agregando un botón "Hacer una Pregunta". Esto debe mostrar un formulario que permita al usuario ingresar su nombre y pregunta. Al hacer clic en el botón "Enviar" se agregará la pregunta a la lista de preguntas. Almacena las preguntas en el almacenamiento local para que persistan cuando se actualice la página.
4
Desafío Extra: Habilita la capacidad de responder a una pregunta agregando un botón "Responder" a cada pregunta. Esto debe mostrar un formulario que permita al usuario ingresar su nombre y respuesta. Al hacer clic en el botón "Enviar" se agregará la respuesta a la lista de respuestas. Almacena las respuestas en el almacenamiento local para que persistan cuando se actualice la página.
5
Desafío Extra: Habilita la funcionalidad del botón "Guardar en una Lista". Esto debe mostrar un formulario que permita al usuario ingresar un nombre para la lista. Al hacer clic en el botón "Guardar" se agregará el producto a la lista. Almacena las listas en el almacenamiento local para que persistan cuando se actualice la página.