├── script.js ├── style.css ├── index.html ├── README.md └── ciudades.js /script.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | ul { 6 | list-style-type: none; 7 | margin: 0; 8 | padding: 0; 9 | width: 25%; 10 | background-color: #f1f1f1; 11 | position: fixed; 12 | height: 100%; 13 | overflow: auto; 14 | } 15 | 16 | li a { 17 | display: block; 18 | color: #000; 19 | padding: 8px 16px; 20 | text-decoration: none; 21 | } 22 | 23 | li a.active { 24 | background-color: #04AA6D; 25 | color: white; 26 | } 27 | 28 | li a:hover:not(.active) { 29 | background-color: #555; 30 | color: white; 31 | } 32 | 33 | 34 | .contenedor { 35 | margin-left: 25%; 36 | padding: 1px 16px; 37 | height: 1000px; 38 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Navegación con Javascript 9 | 10 | 11 | 12 | 13 | 14 | 20 | 21 |
22 |

23 |

24 |

25 |
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Link al curso completo de Javascript en Youtube: 2 | [VIDEO CURSO GRATIS COMPLETO: JavaScript Desde Cero por Sergie Code](https://youtu.be/N8Xt5rP_DUo) 3 | 4 | 5 | # Tutorial de Aplicación de Venta de Viajes en JavaScript 6 | 7 | Link para ver resultado: [VENTA VIAJES FINALIZADO](https://venta-viajes-curso-javascript.netlify.app/) 8 | 9 | Este es un tutorial que te guiará a través del proceso de creación de una aplicación de venta de viajes utilizando JavaScript. La aplicación mostrará información sobre diferentes ciudades turísticas y sus precios asociados. 10 | 11 | ## Requisitos previos 12 | 13 | - Conocimientos básicos de HTML y CSS. 14 | - Un entorno de desarrollo para escribir y ejecutar código JavaScript. 15 | 16 | ## Configuración inicial 17 | 18 | 1. Clona o descarga los archivos HTML y CSS necesarios para este proyecto desde el repositorio en GitHub. 19 | 20 | ## Funcionamiento del código JavaScript 21 | 22 | El código JavaScript proporcionado se encarga de actualizar la información mostrada en la página web cuando se hace clic en un enlace de ciudad. 23 | 24 | ### Importación de datos de las ciudades 25 | 26 | Las variables `barcelona`, `roma`, `paris` y `londres` se importan desde el archivo `ciudades.js`, que contiene la información de cada ciudad. Asegúrate de que este archivo esté disponible en el repositorio junto con el código JavaScript. 27 | 28 | ### Obtención de elementos del DOM 29 | 30 | El código utiliza el método `document.getElementById` para obtener los elementos del DOM necesarios para actualizar la información de la página. Estos elementos se asignan a las siguientes variables: 31 | 32 | - `enlaces`: una colección de todos los elementos de ancla (``) en la página. 33 | - `tituloElemento`: el elemento de título (`

`) donde se mostrará el título de la ciudad seleccionada. 34 | - `subTituloElemento`: el elemento de subtítulo (`

`) donde se mostrará el subtítulo de la ciudad seleccionada. 35 | - `parrafoElemento`: el elemento de párrafo (`

`) donde se mostrará la descripción de la ciudad seleccionada. 36 | - `precioElemento`: el elemento donde se mostrará el precio de la ciudad seleccionada. 37 | 38 | ### Agregar evento CLICK a los enlaces 39 | 40 | Se agrega un evento `click` a cada enlace mediante un bucle `forEach`. Cuando se hace clic en un enlace, se ejecuta la función de devolución de llamada proporcionada. El código dentro de esta función realiza las siguientes acciones: 41 | 42 | - Remueve la clase `active` de todos los enlaces utilizando otro bucle `forEach`. 43 | - Agrega la clase `active` al enlace actual (`this`). 44 | - Obtiene el contenido correspondiente a la ciudad seleccionada utilizando la función `obtenerContenido` y el texto del enlace actual. 45 | - Actualiza los elementos del DOM con la información de la ciudad seleccionada. 46 | 47 | ### Función para obtener contenido de la ciudad 48 | 49 | La función `obtenerContenido` toma el texto del enlace como parámetro y devuelve el contenido correspondiente de la ciudad desde el archivo `ciudades.js`. Utiliza un objeto `contenido` para mapear el texto del enlace con el contenido de la ciudad. 50 | 51 | ## Personalización del contenido 52 | 53 | Puedes personalizar el contenido de las ciudades modificando el archivo `ciudades.js`. Cada ciudad es representada por un objeto con propiedades como `titulo`, `subtitulo`, `parrafo` y `precio`. 54 | 55 | ## Conclusiones 56 | 57 | Con este tutorial, has aprendido a crear una aplicación de venta de viajes utilizando JavaScript. Ahora puedes personalizar el contenido y expandir la funcionalidad de la aplicación según tus necesidades. ¡Diviértete programando! 58 | -------------------------------------------------------------------------------- /ciudades.js: -------------------------------------------------------------------------------- 1 | const barcelona = { 2 | titulo: 'Descubre Barcelona: La joya de Cataluña', 3 | subtitulo: 'Sumérgete en la historia, cultura y belleza de esta vibrante ciudad', 4 | parrafo: "Bienvenidos a Barcelona, una ciudad cautivadora que combina a la perfección la riqueza histórica con una atmósfera moderna y dinámica. Situada en la región de Cataluña, al noreste de España, Barcelona es conocida por su arquitectura icónica, su vibrante escena artística, su deliciosa gastronomía y sus hermosas playas mediterráneas.

Nuestro recorrido por Barcelona comienza en su corazón histórico: el Barrio Gótico.Perdiéndote en sus estrechas calles empedradas, descubrirás impresionantes edificios medievales, iglesias antiguas y encantadoras plazas llenas de vida.No puedes dejar de visitar la majestuosa Catedral de Barcelona, un magnífico ejemplo de la arquitectura gótica.

A medida que te adentras en la ciudad, te maravillarás con las obras maestras arquitectónicas de Antoni Gaudí, uno de los más grandes exponentes del modernismo catalán.La Sagrada Familia, su obra maestra inacabada, te dejará sin palabras con su diseño único y sus detalles ornamentales.Otros tesoros de Gaudí incluyen el Parque Güell, con sus coloridos mosaicos y vistas panorámicas de la ciudad, y la Casa Batlló, un edificio modernista que parece salido de un cuento de hadas.

Barcelona también es famosa por su pasión por el fútbol.Si eres amante de este deporte, no puedes perderte el Camp Nou, el estadio del FC Barcelona.Sumérgete en la atmósfera apasionada de un partido y descubre la historia del club en su museo.

Pero Barcelona no se trata solo de arquitectura y deporte.La ciudad cuenta con una escena cultural bulliciosa, con una gran variedad de museos, galerías de arte y eventos culturales.El Museo Picasso alberga una impresionante colección de obras del famoso pintor español, mientras que el MACBA y el CCCB son espacios dedicados al arte contemporáneo y la cultura urbana.

Cuando necesites un descanso, dirígete a las playas de Barcelona.Relájate bajo el sol mediterráneo, disfruta de un refrescante baño en el mar y prueba las delicias locales en los chiringuitos de playa.

Barcelona también es conocida por su animada vida nocturna.Desde bares tradicionales y tabernas hasta clubes nocturnos y discotecas de renombre mundial, la ciudad ofrece opciones para todos los gustos.Pasea por las calles del animado barrio de El Born o disfruta de una copa en los bares de la playa.

En resumen, Barcelona es una ciudad fascinante que ofrece una combinación perfecta de historia, cultura, arquitectura y entretenimiento.Prepárate para perderse en sus encantos, saborear su gastronomía, disfrutar de su energía y llevarte recuerdos inolvidables. ¡Descubre Barcelona y déjate cautivar por su magia!" 5 | } 6 | 7 | const roma = { 8 | titulo: 'Roma: Tesoros eternos en la Ciudad Eterna', 9 | subtitulo: 'Sumérgete en la grandeza histórica, el arte y la cultura de la capital italiana', 10 | parrafo: "Bienvenidos a Roma, una ciudad que respira historia y que te transportará a través de los siglos. Conocida como la Ciudad Eterna, Roma es el hogar de una riqueza inigualable de monumentos antiguos, arte renacentista y una cultura vibrante que te cautivará desde el primer momento.

Nuestro viaje por Roma comienza en el corazón de la antigua Roma: el Coliseo. Este imponente anfiteatro es una de las maravillas arquitectónicas más emblemáticas del mundo y te dejará sin aliento con su magnificencia. Imagina los emocionantes combates de gladiadores y las representaciones teatrales que una vez tuvieron lugar en este legendario lugar.

A pocos pasos del Coliseo, descubrirás el Foro Romano, el centro político y social de la antigua Roma. Recorre las ruinas de antiguos templos, arcos triunfales y basílicas, y déjate llevar por la majestuosidad de este lugar lleno de historia.

Continuando nuestro recorrido, nos dirigimos al Vaticano, el enclave independiente más pequeño del mundo y el corazón espiritual del catolicismo. La Basílica de San Pedro, con su icónica cúpula diseñada por Miguel Ángel, te impresionará con su belleza y esplendor. No olvides visitar también los Museos Vaticanos, donde podrás admirar una impresionante colección de arte, incluyendo la famosa Capilla Sixtina, con sus frescos creados por grandes artistas renacentistas.

Roma también es conocida por sus encantadoras plazas y fuentes. La Piazza Navona, con su arquitectura barroca y su famosa Fuente de los Cuatro Ríos, te invita a relajarte y disfrutar del ambiente romano. La Fontana di Trevi, la fuente más famosa de la ciudad, es un lugar de visita obligada para lanzar una moneda y asegurarte de volver a Roma en el futuro.

Pasear por las calles adoquinadas del Trastevere te sumergirá en la auténtica vida romana. Descubre sus encantadoras plazas, sus coloridas fachadas y sus animados bares y restaurantes, donde podrás probar la deliciosa cocina italiana.

Roma también es famosa por sus catacumbas, vastos sistemas subterráneos de túneles y cámaras funerarias. Explora las catacumbas de San Calixto o las catacumbas de San Sebastián y descubre este fascinante legado de la Roma antigua.

En resumen, Roma es una ciudad que te transportará en el tiempo y te sumergirá en una riqueza inigualable de historia, arte y cultura. Desde sus monumentos antiguos hasta sus plazas encantadoras y su deliciosa gastronomía, cada rincón de Roma tiene una historia que contar. Prepárate para maravillarte con la grandeza de la Ciudad Eterna y déjate cautivar por su encanto eterno." 11 | } 12 | 13 | const paris = { 14 | titulo: 'París: La Ciudad de la Luz y el Romance', 15 | subtitulo: 'Explora la elegancia, la cultura y el encanto de la capital francesa', 16 | parrafo: "Bienvenidos a París, una ciudad que ha cautivado a visitantes de todo el mundo con su belleza, elegancia y romance. Conocida como la Ciudad de la Luz, París ofrece una mezcla única de historia, arte, cultura y gastronomía que la convierte en un destino verdaderamente inolvidable.

Nuestro viaje por París comienza en el corazón de la ciudad, en la icónica Torre Eiffel. Esta estructura emblemática, construida para la Exposición Universal de 1889, te brindará una vista panorámica impresionante de la ciudad. Ya sea que decidas subir a la cima o simplemente admirarla desde el suelo, la Torre Eiffel es un símbolo inconfundible de París.

Continuando nuestro recorrido, nos adentramos en el encantador barrio de Montmartre, conocido por su atmósfera bohemia y su belleza pintoresca. Explora sus estrechas calles empedradas y llega a la imponente Basílica del Sagrado Corazón, que ofrece vistas panorámicas de la ciudad. No olvides visitar el famoso cabaret Moulin Rouge y disfrutar de un espectáculo lleno de energía y glamour.

El siguiente destino es el Louvre, uno de los museos más grandes y famosos del mundo. Admira obras maestras como la Mona Lisa y la Venus de Milo, mientras te maravillas con la grandiosidad del Palacio del Louvre, una joya arquitectónica en sí misma. Recorrer sus galerías es sumergirse en la historia del arte y la cultura.

Cruzar el río Sena nos lleva al encantador barrio de Saint-Germain-des-Prés, conocido por sus librerías, cafés históricos y ambiente intelectual. Sumérgete en la cultura parisina mientras disfrutas de un café en el famoso Café de Flore o exploras las tiendas de moda y galerías de arte de la zona.

El encanto de París se extiende a sus exquisitos jardines. El Jardín de Luxemburgo y el Jardín de las Tullerías son oasis de paz y belleza, donde puedes relajarte y disfrutar de la serenidad en medio de la bulliciosa ciudad. Da un paseo romántico por sus senderos bordeados de flores o disfruta de un tranquilo picnic bajo la sombra de los árboles.

No puedes visitar París sin explorar la encantadora isla de la Cité, donde se encuentra la famosa Catedral de Notre Dame. Esta obra maestra gótica, con su impresionante arquitectura y hermosas vidrieras, te transportará a tiempos pasados. Aunque la catedral sufrió un incendio en 2019, su grandeza sigue siendo cautivadora y su reconstrucción está en marcha.

En resumen, París es una ciudad que te envuelve con su elegancia, cultura y romance. Desde sus monumentos icónicos hasta sus encantadores barrios, la capital francesa ofrece una experiencia única llena de historia y encanto." 17 | } 18 | 19 | const londres = { 20 | titulo: 'Londres: Descubre la magia de la Ciudad del Támesis', 21 | subtitulo: 'Sumérgete en la historia, la diversidad y la energía de la capital británica', 22 | parrafo: "Bienvenidos a Londres, una ciudad vibrante que fusiona su rica historia con una escena contemporánea y diversa. Conocida como la Ciudad del Támesis, Londres te cautivará con su encanto, su patrimonio cultural y su espíritu cosmopolita.

Nuestro recorrido por Londres comienza en el icónico Palacio de Buckingham, la residencia oficial de la Reina de Inglaterra. Si tienes suerte, podrás presenciar el cambio de guardia, una ceremonia tradicional llena de pompa y color. Desde allí, podrás pasear por el cercano Parque de St. James y disfrutar de la serenidad de sus jardines.

Continuando nuestro viaje, llegamos al corazón histórico de Londres: la Torre de Londres. Este emblemático castillo es testigo de siglos de historia y alberga las joyas de la Corona británica. Explora sus muros fortificados y descubre las historias de intrigas, traiciones y misterios que envuelven a este lugar.

Cruzando el Tower Bridge, uno de los símbolos más reconocidos de la ciudad, nos adentramos en el bullicioso Southbank. Aquí encontrarás una amplia gama de atracciones culturales, como el Tate Modern, un museo de arte contemporáneo, y el London Eye, una noria gigante que ofrece vistas panorámicas impresionantes de la ciudad.

Londres es también famosa por sus museos de clase mundial. El Museo Británico, con su impresionante colección de artefactos y antigüedades de todo el mundo, es un tesoro imperdible. No puedes perderte la oportunidad de visitar el Museo de Historia Natural, con su famoso esqueleto de dinosaurio y su impactante colección de especímenes.

Si te apasiona el arte, la Tate Britain y la National Gallery te deleitarán con obras maestras de artistas como Turner, Van Gogh y Rembrandt. Además, los amantes del teatro no pueden perderse el famoso West End, el distrito de los musicales y las obras de teatro, donde encontrarás espectáculos de renombre mundial.

Londres es conocida por su diversidad y su ambiente multicultural. Explora los barrios de Camden Town y Notting Hill, donde encontrarás mercados callejeros, tiendas vintage y una amplia oferta gastronómica internacional. No olvides probar los famosos fish and chips británicos, disfrutar de un té en una tradicional casa de té y visitar los encantadores pubs londinenses.

En resumen, Londres es una ciudad que combina historia, cultura y modernidad de una manera única. Desde sus icónicos monumentos hasta sus barrios llenos de vida, la capital británica te invita a descubrir su magia y a sumergirte en su energía contagiosa. ¡Explora Londres y déjate llevar por su fascinante encanto!" 23 | } 24 | 25 | export { 26 | barcelona, 27 | roma, 28 | paris, 29 | londres 30 | }; 31 | 32 | // const { barcelona, roma, paris, londres } = require('./ciudades'); 33 | 34 | //ES6 35 | // export { objeto1, objeto2 }; 36 | //import { objeto1, objeto2 } from './ciudades'; 37 | --------------------------------------------------------------------------------