55 |
56 |
57 |
72 |
73 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/js/cargar_peliculas_index.js:
--------------------------------------------------------------------------------
1 | const API_SERVER = 'https://api.themoviedb.org/3';
2 | const options = {
3 | method: 'GET', // Método de la petición (GET)
4 | headers: {
5 | accept: 'application/json', // Tipo de respuesta esperada (JSON)
6 | Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhYTJjYTAwZDYxZWIzOTEyYjZlNzc4MDA4YWQ3ZmNjOCIsInN1YiI6IjYyODJmNmYwMTQ5NTY1MDA2NmI1NjlhYyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.4MJSPDJhhpbHHJyNYBtH_uCZh4o0e3xGhZpcBIDy-Y8'
7 |
8 | }
9 | };
10 |
11 | // Función para cargar películas en la cuadrícula de tendencias
12 | const cargarPeliculasTendencia = async (page = 1) => {
13 | // Realizamos una petición fetch a la API para obtener las películas populares
14 | const response = await fetch(`${API_SERVER}/movie/popular?page=${page}`, options);
15 | const data = await response.json(); // Convertimos la respuesta a JSON
16 | const movies = data.results;// Extraemos las películas de la respuesta
17 | console.log(movies);
18 | const tendenciasContainer = document.querySelector('.peliculasTendencia .peliculas');// Seleccionamos el contenedor de películas de tendencia en el DOM, la section que tiene dentro el div peliculas
19 | tendenciasContainer.innerHTML = '';// Limpiamos el contenido previo del contenedor
20 |
21 | //* Iteramos sobre cada película obtenida y creamos los elementos HTML para mostrar la película teniendo que en cuenta que se debe respetar la siguiente estructura por los estilos:
22 | /*
23 |
29 | */
30 | movies.forEach(movie => {
31 | // creo el ancla
32 | const ancla = document.createElement('a');
33 | ancla.href = './pages/detalle.html';
34 | // creo el div pelicula
35 | const pelicula = document.createElement('div');
36 | pelicula.classList.add('pelicula');
37 | // creo la imagen
38 | const img = document.createElement('img');
39 | img.classList.add('imgTendencia');
40 | img.src = `https://image.tmdb.org/t/p/w500/${movie.poster_path}`;
41 | img.alt = movie.title;
42 | img.loading = 'lazy';
43 | // creo el div tituloPelicula
44 | const tituloPelicula = document.createElement('div');
45 | tituloPelicula.classList.add('tituloPelicula');
46 | // creo el h4
47 | const titulo = document.createElement('h4');
48 | titulo.textContent = movie.title;
49 | // relaciono los elementos
50 | ancla.appendChild(pelicula);
51 | pelicula.appendChild(img);
52 | pelicula.appendChild(tituloPelicula);
53 | tituloPelicula.appendChild(titulo);
54 | tendenciasContainer.appendChild(ancla);
55 |
56 | });
57 |
58 | // Actualizamos el atributo data-page con el número de página actual
59 | tendenciasContainer.parentElement.setAttribute('data-page', page);
60 | };
61 |
62 | // Función para cargar películas en el carrusel de películas aclamadas
63 | const cargarPeliculasAclamadas = async () => {
64 | // Realizamos una petición fetch a la API para obtener las películas más aclamadas
65 | const response = await fetch(`${API_SERVER}/movie/top_rated`, options);
66 | const data = await response.json();// Convertimos la respuesta a JSON
67 | const movies = data.results; // Extraemos las películas de la respuesta
68 | const aclamadasContainer = document.querySelector('.aclamadas'); // Seleccionamos el contenedor de películas aclamadas en el DOM
69 |
70 | // Iteramos sobre cada película obtenida para lograr la estructura de html que pongo a continuación:
71 | /*
72 |
73 |
*/
74 | movies.forEach(movie => {
75 | // creo el div peliculaItem
76 | const peliculaItem = document.createElement('div');
77 | peliculaItem.classList.add('peliculaItem');
78 | // creo la imagen
79 | const img = document.createElement('img');
80 | img.classList.add('imgAclamada');
81 | img.src = `https://image.tmdb.org/t/p/w500/${movie.poster_path}`;
82 | img.alt = movie.title;
83 | img.loading = 'lazy';
84 | // relaciono los elementos
85 | peliculaItem.appendChild(img);
86 | aclamadasContainer.appendChild(peliculaItem);
87 | });
88 | };
89 |
90 | const botonAnterior = document.getElementById('botonAnterior');
91 | const botonSiguiente = document.getElementById('botonSiguiente');
92 | const seccionTendencias = document.getElementById('tendencias');
93 |
94 | // Event listener para el botón "Anterior"
95 | botonAnterior.addEventListener('click', () => {
96 | // Obtener el número de página actual
97 | let currentPage = Number(seccionTendencias.getAttribute('data-page'));
98 | // Si es la primera página, no hacemos nada
99 | if (currentPage <= 1) return;
100 | // Cargar las películas de la página anterior
101 | cargarPeliculasTendencia(currentPage - 1);
102 | });
103 |
104 | // Event listener para el botón "Siguiente"
105 | botonSiguiente.addEventListener('click', () => {
106 | // Obtener el número de página actual
107 | let currentPage = Number(seccionTendencias.getAttribute('data-page'));
108 | // Cargar las películas de la página siguiente
109 | cargarPeliculasTendencia(currentPage + 1);
110 | });
111 |
112 | // Ejecutamos las funciones de carga de películas al cargar la página
113 | document.addEventListener('DOMContentLoaded', () => {
114 | // Cargamos las películas en la cuadrícula de tendencias
115 | cargarPeliculasTendencia();
116 | // Cargamos las películas en el carrusel de películas aclamadas
117 | cargarPeliculasAclamadas();
118 | });
--------------------------------------------------------------------------------
/js/valida_registrarse.js:
--------------------------------------------------------------------------------
1 | /*Esta línea añade un evento al documento que se activa cuando el contenido HTML ha sido completamente cargado y parseado. En otras palabras, se ejecuta cuando el DOM está listo para ser manipulado.*/
2 | document.addEventListener('DOMContentLoaded', () => {
3 | const form = document.querySelector('form');
4 | /*Aquí se agrega un evento de escucha al formulario que se activa cuando se intenta enviar el formulario. */
5 | form.addEventListener('submit', (event) => {
6 | if (!validateForm()) {
7 | console.log('El formulario no es válido. Por favor, corrige los errores.');
8 | event.preventDefault(); // Esta línea evita que el formulario se envíe si hay errores de validación
9 | } else {
10 | console.log('El formulario es válido. Enviar datos...');
11 | // Aquí puedes enviar los datos del formulario o realizar otras acciones
12 | }
13 | });
14 |
15 | const validateForm = () => {
16 | let isValid = true;
17 |
18 | // Validar campo de nombre
19 | isValid = validateField('nombre', 'El nombre es obligatorio') && isValid;
20 |
21 | // Validar campo de apellido
22 | isValid = validateField('apellido', 'El apellido es obligatorio') && isValid;
23 |
24 | // Validar campo de email
25 | isValid = validateEmailField('email', 'El correo electrónico no es válido') && isValid;
26 |
27 | // Validar campo de contraseña
28 | isValid = validateField('password', 'La contraseña es obligatoria') && isValid;
29 |
30 | // Validar campo de fecha de nacimiento
31 | isValid = validateField('fechaNacimiento', 'La fecha de nacimiento es obligatoria') && isValid;
32 |
33 | // Validar campo de país
34 | isValid = validateField('pais', 'El país es obligatorio') && isValid;
35 |
36 | // Validar checkbox de términos y condiciones
37 | const terminos = document.getElementById('terminos').checked;
38 | if (!terminos) {
39 | isValid = false;
40 | setErrorFor(document.getElementById('terminos'), 'Debes aceptar los términos y condiciones');
41 | } else {
42 | setSuccessFor(document.getElementById('terminos'));
43 | }
44 |
45 | return isValid;
46 | };
47 | // recibe el id del campo y el mensaje de error y valida si el campo está vacío
48 | const validateField = (fieldId, errorMessage) => {
49 | const field = document.getElementById(fieldId);// levanta el elemento por su id
50 | const value = field.value.trim(); // al value se le quitan los espacios en blanco al principio y al final
51 | //valida si el campo está vacío
52 | if (value === '') {
53 | //invoca la función setErrorFor y le pasa el campo y el mensaje de error
54 | setErrorFor(field, errorMessage);
55 | return false;
56 | } else {
57 | //invoca la función setSuccessFor y le pasa el campo
58 | setSuccessFor(field);
59 | return true;
60 | }
61 | };
62 | // recibe el campo y el mensaje de error y valida si el campo está vacío o si el email no es válido
63 | const validateEmailField = (fieldId, errorMessage) => {
64 | const field = document.getElementById(fieldId);
65 | const email = field.value.trim();
66 | if (email === '') {
67 | setErrorFor(field, 'El correo electrónico es obligatorio');
68 | return false;
69 | } else if (!isEmail(email)) {
70 | setErrorFor(field, errorMessage);
71 | return false;
72 | } else {
73 | setSuccessFor(field);
74 | return true;
75 | }
76 | };
77 |
78 | // recibe el campo y el mensaje de error y agrega la clase error al div padre del campo y muestra el mensaje de error
79 | const setErrorFor = (input, message) => {
80 | // Obtiene el div padre del campo
81 | const formControl = input.closest('div');
82 | //levanta por su clase el elemento que contiene el mensaje de error
83 | const errorText = formControl.querySelector('.error-text');
84 | //agrega la clase error al div padre del campo
85 | formControl.classList.add('error');
86 | //muestra el mensaje de error
87 | errorText.innerText = message;
88 | //pone el foco en el campo
89 | input.focus();
90 | };
91 |
92 | // recibe el campo y elimina la clase error del div padre del campo y el mensaje de error
93 | const setSuccessFor = (input) => {
94 | // Obtiene el div padre del campo
95 | const formControl = input.closest('div');
96 | //quita la clase error al div padre del campo
97 | formControl.classList.remove('error');
98 | //levanta por su clase el elemento que contiene el mensaje de error
99 | const errorText = formControl.querySelector('.error-text');
100 | //elimina el mensaje de error
101 | errorText.innerText = '';
102 | };
103 | // funcion que valida si es un mail valido con una expresion regular
104 | const isEmail = (email) => {
105 | const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
106 | return re.test(email);
107 | };
108 | // Agrega eventos para borrar las clases de error cuando se completa el input o se presiona Tab
109 | form.querySelectorAll('input').forEach(input => {
110 | input.addEventListener('input', () => {
111 | // Obtiene el valor del campo y elimina los espacios en blanco al principio y al final
112 | const value = input.value.trim();
113 | // Si el campo no está vacío, elimina cualquier mensaje de error
114 | if (value !== '') {
115 | setSuccessFor(input);
116 | }
117 | });
118 | });
119 | // Agrega eventos para borrar las clases de error cuando se selecciona una opción del select
120 | form.querySelectorAll('select').forEach(select => {
121 | select.addEventListener('change', () => {
122 | // Obtiene el valor seleccionado del campo de selección
123 | const value = select.value;
124 | // Si se selecciona una opción, elimina cualquier mensaje de error
125 | if (value !== '') {
126 | setSuccessFor(select);
127 | }
128 | });
129 | });
130 | });
131 |
--------------------------------------------------------------------------------
/pages/detalle.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Detalle | CAC-MOVIES
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
26 |
27 |
28 |
29 |
While working underground to fix a water main, Brooklyn plumbers—and brothers—Mario and Luigi are transported down a mysterious pipe and wander into a magical new world. But when the brothers are separated, Mario embarks on an epic quest to find Luigi.
38 |
39 |
40 |
Aaron Horvath
41 |
Director
42 |
43 |
44 |
Michael Jelenic
45 |
Director
46 |
47 |
48 |
Matthew Fogel
49 |
Writer
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
Ver trailer
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
Info
78 |
79 |
80 |
81 |
82 |
Status
83 |
Released
84 |
85 |
86 |
Original Language
87 |
English
88 |
89 |
90 |
Budget
91 |
$100.000.000,00
92 |
93 |
94 |
Revenue
95 |
$1.347.013.866,00
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
121 |
122 |
125 |
126 |
--------------------------------------------------------------------------------
/js/valida_iniciosesion.js:
--------------------------------------------------------------------------------
1 | // Espera a que el DOM se cargue completamente
2 | document.addEventListener('DOMContentLoaded', () => {
3 | // Selecciona el formulario en el DOM
4 | const form = document.querySelector('form');
5 | // Agrega un evento de escucha para cuando se envía el formulario
6 | form.addEventListener('submit', (event) => {
7 | // Si la validación del formulario no es exitosa
8 | if (!validateForm()) {
9 | // Muestra un mensaje en la consola indicando que el formulario no es válido
10 | console.log('El formulario no es válido. Por favor, corrige los errores.');
11 | // Evita que el formulario se envíe
12 | event.preventDefault(); // Evita que el formulario se envíe si hay errores de validación
13 | } else {
14 | // Si la validación del formulario es exitosa, muestra un mensaje en la consola
15 | console.log('El formulario es válido. Enviar datos...');
16 | // Aquí puedes enviar los datos del formulario o realizar otras acciones
17 | }
18 | });
19 |
20 | // Función para validar todo el formulario
21 | const validateForm = () => {
22 | let isValid = true;
23 | isValid = validateEmailField('email', 'El correo electrónico no es válido') && isValid; // Validar campo de email
24 | isValid = validateField('password', 'La contraseña es obligatoria') && isValid; // Validar campo de contraseña
25 | return isValid;
26 | };
27 |
28 | // Función para validar un campo específico
29 | const validateField = (fieldId, errorMessage) => {
30 | const field = document.getElementById(fieldId); // Obtiene el elemento del campo mediante su ID
31 | const value = field.value.trim(); // Obtiene el valor del campo y elimina los espacios en blanco al principio y al final
32 | // Si el valor del campo está vacío
33 | if (value === '') {
34 | setErrorFor(field, errorMessage); // Establece un mensaje de error para el campo
35 | return false; // Devuelve false indicando que la validación ha fallado
36 | } else {
37 | setSuccessFor(field); // Si el valor del campo no está vacío, elimina cualquier mensaje de error anterior
38 | return true; // Devuelve true indicando que la validación ha tenido éxito
39 | }
40 | };
41 |
42 | // Función para validar el campo de correo electrónico
43 | const validateEmailField = (fieldId, errorMessage) => {
44 | // Obtiene el elemento del campo de correo electrónico mediante su ID
45 | const field = document.getElementById(fieldId);
46 | // Obtiene el valor del campo y elimina los espacios en blanco al principio y al final
47 | const email = field.value.trim();
48 | // Si el campo de correo electrónico está vacío
49 | if (email === '') {
50 | // Establece un mensaje de error para el campo de correo electrónico
51 | setErrorFor(field, 'El correo electrónico es obligatorio');
52 | // Devuelve false indicando que la validación ha fallado
53 | return false;
54 | // Si el campo de correo electrónico no está vacío pero no es válido
55 | } else if (!isEmail(email)) {
56 | // Establece un mensaje de error para el campo de correo electrónico
57 | setErrorFor(field, errorMessage);
58 | // Devuelve false indicando que la validación ha fallado
59 | return false;
60 | } else {
61 | // Si el campo de correo electrónico es válido, elimina cualquier mensaje de error anterior
62 | setSuccessFor(field);
63 | // Devuelve true indicando que la validación ha tenido éxito
64 | return true;
65 | }
66 | };
67 |
68 | // Función para establecer un mensaje de error en un campo
69 | const setErrorFor = (input, message) => {
70 | // Encuentra el elemento padre del campo de entrada
71 | const formControl = input.closest('div');
72 | // Encuentra el elemento de texto de error dentro del elemento padre
73 | const errorText = formControl.querySelector('.error-text');
74 | // Agrega la clase de error al elemento padre para resaltar el campo
75 | formControl.classList.add('error');
76 | // Establece el texto del mensaje de error
77 | errorText.innerText = message;
78 | // Establece el foco en el campo de entrada para una corrección rápida
79 | input.focus();
80 | };
81 |
82 | // Función para eliminar un mensaje de error de un campo
83 | const setSuccessFor = (input) => {
84 | // Encuentra el elemento padre del campo de entrada
85 | const formControl = input.closest('div');
86 | // Elimina la clase de error del elemento padre
87 | formControl.classList.remove('error');
88 | // Encuentra el elemento de texto de error dentro del elemento padre
89 | const errorText = formControl.querySelector('.error-text');
90 | // Establece el texto de error como vacío
91 | errorText.innerText = '';
92 | };
93 |
94 | // Función para validar si una cadena es una dirección de correo electrónico válida
95 | const isEmail = (email) => {
96 | // Expresión regular para validar el formato de correo electrónico
97 | const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
98 | // Verifica si el correo electrónico cumple con el formato
99 | return re.test(email);
100 | };
101 | // Agrega eventos para borrar las clases de error cuando se completa el input o se presiona Tab
102 | form.querySelectorAll('input').forEach(input => {
103 | input.addEventListener('input', () => {
104 | // Obtiene el valor del campo y elimina los espacios en blanco al principio y al final
105 | const value = input.value.trim();
106 | // Si el campo no está vacío, elimina cualquier mensaje de error
107 | if (value !== '') {
108 | setSuccessFor(input);
109 | }
110 | });
111 | });
112 | // Agrega eventos para borrar las clases de error cuando se selecciona una opción del select
113 | form.querySelectorAll('select').forEach(select => {
114 | select.addEventListener('change', () => {
115 | // Obtiene el valor seleccionado del campo de selección
116 | const value = select.value;
117 | // Si se selecciona una opción, elimina cualquier mensaje de error
118 | if (value !== '') {
119 | setSuccessFor(select);
120 | }
121 | });
122 | });
123 |
124 |
125 | });
126 |
127 |
128 |
--------------------------------------------------------------------------------
/index_fijo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | CAC-MOVIES
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
26 |
27 |
28 |
29 |
Películas y series ilimitadas en un solo lugar
30 |
Disfruta donde quieras. Cancela en cualquier momento.
25 | 
73 | 
32 | 
61 |
62 | 
72 |
73 | 
83 |
84 | 
94 |
95 | 
105 |
106 | 
116 |
117 | 
127 |
128 | 
138 |
139 | 
149 |
150 | 
160 |
161 | 
171 |
172 | 
191 | 
194 | 
197 | 
200 | 
203 | 
206 | 
209 | 
212 | 
215 | 
218 | 
221 |