Scribd
Cargar
85 vistas

Proyecto JavaScript

Este proyecto consiste en construir un sitio web para comprar móviles de forma interactiva mediante JavaScript. Los usuarios podrán añadir móviles individuales de una lista a su pedido, eliminarlos, comprar el pedido completo y limpiarlo. Se implementarán funciones para actualizar el precio total y la cantidad de cada producto al realizar estas acciones.

Cargado por

crispissss
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
85 vistas

Proyecto JavaScript

Este proyecto consiste en construir un sitio web para comprar móviles de forma interactiva mediante JavaScript. Los usuarios podrán añadir móviles individuales de una lista a su pedido, eliminarlos, comprar el pedido completo y limpiarlo. Se implementarán funciones para actualizar el precio total y la cantidad de cada producto al realizar estas acciones.

Cargado por

crispissss
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

Lenguaje de Marcas 1º DAW

Proyecto JavaScript
Este proyecto consiste en construir el siguiente sitio web:

En Aules encontraréis el proyecto inicial del cual debéis partir.

Es un proyecto HTML, donde los móviles que podemos seleccionar para comprar vienen dados
en un array de objetos. Tenéis disponible el fichero html, el css, las imágenes y un fichero del que
partir en JavaScript.

¡Importante!: No podéis usar innerHTML y los eventos que añadáis deben ser con
addEventListener.

¿Qué vamos a hacer?


Vamos a implementar una web donde el usuario pueda realizar la compra de móviles. Vamos a
implementar las siguientes funcionalidades:

1. Comprar un móvil (a través de su botón “Mover a Mi Pedido”) (4 puntos)


• Cada vez que pulsemos el botón comprar de cada móvil, se añadirá a la tabla.

1
Lenguaje de Marcas 1º DAW

• Deberemos actualizar el precio final (input “Precio”)

• (OPCIONAL) Si ese móvil ya estaba en nuestra tabla de pedidos, lo que haremos será
incrementar la cantidad, y actualizar el precio total de esa fila. Lo tenéis reflejado en la
siguiente imagen (hemos añadido 2 Samsung a nuestro pedido).

Si nos fijamos en el html que se proporciona, aparece un elemento en la tabla comentado, os


servirá de ejemplo para saber qué etiquetas y atributos debéis insertar a la hora de comprar un
producto.

2. Eliminar un móvil de nuestro pedido (papelera roja que en cada fila) (2


puntos)
Cada vez que pulsemos el icono de la papelera roja que está en la columna de “¿Borrar?”,
debemos mostrar un diálogo confirm que nos pregunte si estamos seguros/as de que queremos
eliminar el producto de nuestra lista de pedidos, en el caso de decir que sí, entonces
eliminaremos ese móvil de la lista.

2
Lenguaje de Marcas 1º DAW

3. Comprar pedido (2 puntos)

• Cuando hagamos clic en el botón de “Comprar”, mostraremos un alert que diga


“¡Enhorabuena por tu compra!”
• Luego, mostraremos un confirm para saber si quieres vaciar tu pedido (ítems de la tabla)
o no. Si se pulsa en sí, habrá que borrar los ítems de la tabla y habrá que vaciar también
el input de Precio.

4. Limpiar pedido (2 puntos)

Cuando pulsemos en el botón de “Limpiar”, mostraremos un confirm donde preguntaremos


“¿Desea borrar su lista de pedidos?”. Si el usuario pulsa “Aceptar”, se eliminarán todas la
filas de la tabla y el input de “Precio” se vaciará.

Partimos de esto:

3
Lenguaje de Marcas 1º DAW

Así se quedará nuestra web si decidimos borra limpiar el pedido:

También podría gustarte