Desafío 4 - Inmobiliaria

En este desafío validaremos nuestros conocimientos en los contenidos de arreglos y objetos,

modificándolos con DOM.

Lee todo el documento antes de comenzar el desarrollo individual, para asegurarte de tener
el máximo de puntaje y enfocar bien los esfuerzos.

Descripción

Aplicando los conceptos y herramientas aprendidas hasta ahora, en este desafío deberás
programar la renderización dinámica de propiedades inmobiliarias y aplicar estilos a partir
de condicionales.

A continuación te mostramos una referencia de lo que debes maquetar:

Puedes utilizar el código del Apoyo Desafío - Inmobiliaria, el cual contiene la

página de inicio con sus respectivos estilos, cabe destacar que eres libre de
utilizar este apoyo o crear tu propio estilo

En la página de inicio se deben renderizar máximo 3 propiedades en venta y 3 propiedades

en alquiler, además se deben incluir botones en cada sección para poder visualizar todas las
propiedades en venta o alquiler, tal como lo muestra la imagen de referencia mostrada en la
siguiente página.

_ 1

www.desafiolatam.com
 Imagen 1. Maqueta general del desafío
Fuente: Desafío Latam

_ 2

www.desafiolatam.com
En el menú de navegación se deben agregar enlaces los cuales dirigirán a dos páginas:
● propiedades_venta.html
● propiedades_alquiler.html

En cada página del sitio deberás llamar al arreglo de objetos que corresponda renderizando
todas las propiedades que se encuentran en el arreglo.

En el caso del atributo smoke y pets, utilizar un condicional que muestre un mensaje o
alerta, además de modificar el ícono en caso de que sea true || false, para mostrar si está
permitido o prohibido fumar o tener mascotas, tal como lo muestra la siguiente imagen:

_ 3

www.desafiolatam.com
Requerimientos

1. Crear las páginas solicitadas para las propiedades en alquiler y venta. Además, cada
una se conecta al script con el arreglo de propiedades que corresponda. Considerar,
además, que existirá una página index.html que será la principal.(1 punto).

2. Generar dos arreglos de propiedades (Uno para venta y otro para alquiler) que
cumplan la siguiente estructura que se muestra de ejemplo. Una vez generados los
arreglos de objetos para las propiedades en alquiler y en venta, añade al menos 4
objetos en cada arreglo.(2 puntos).

const propiedades_alquiler = [
{
nombre: '',
src: '',
descripcion: '',
ubicacion: '',
habitaciones: 0,
costo: 0,
smoke: false,
pets: true
}
]

3. Utilizar ciclos para recorrer el arreglo de con los objetos de propiedades y la

interpolación y el innerHTML para generar templates y agregar la de las propiedades
en su respectiva página HTML. (4 Puntos).

4. Utilizar condicionales para realizar la lógica asociada en caso de que se permitan

mascotas y fumar en la propiedad.
(2 Puntos).

5. En la página index.html, mostrar solo 3 propiedades en venta y 3 propiedades en

alquiler. Tal como se muestra en la imagen 1, enlaza el botón a su respectiva página
web para ver más propiedades. (1 punto).

¡Mucho éxito!

_ 4

www.desafiolatam.com