diff --git a/README.md b/README.md index 1e9c75e..f57de11 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,47 @@ -# web_peliculas -Web de consulta de películas con la API de OMDB -# Objetivos proyecto: -al menos una llamada a API -al menos un elemento de DOM creado dinámicamente -guardar algo en local/sessionStorage +# Películas API Web + +Este proyecto web permite buscar películas utilizando la API OMDB. Puedes ingresar el título de una película, año y tipo (si lo deseas) y obtener resultados de películas relacionadas. + +## Funcionalidades + +- Búsqueda de películas por título, año y tipo. +- Visualización de detalles de películas, como título, año, tipo y más. +- Posibilidad de marcar películas como favoritas. +- Eliminación de resultados de búsqueda. +- Visualización de calificaciones y otros datos de la película. + +## Cómo funciona + +Este proyecto está construido utilizando HTML, CSS y JavaScript. Hace uso de la API OMDB para obtener información sobre películas. Aquí hay una breve descripción de cómo funciona el código: + +- Cuando se envía el formulario de búsqueda, se recopilan los datos de título, año y tipo de película. +- Se realiza una solicitud a la API OMDB con los parámetros de búsqueda. +- Los resultados se muestran en forma de tarjetas en la página web. +- Puedes hacer clic en una tarjeta para ver más detalles de la película, incluyendo calificaciones y otra información relevante. +- También puedes marcar películas como favoritas haciendo clic en una estrella. + +## Cómo usar + +1. Clona o descarga este repositorio en tu máquina local. +2. Abre el archivo `index.html` en tu navegador web. +3. Ingresa el título de una película en el formulario de búsqueda y opcionalmente el año y tipo. +4. Haz clic en "Buscar" para ver los resultados. +5. Haz clic en una tarjeta de película para obtener detalles adicionales. +6. Marca películas como favoritas haciendo clic en la estrella. + +## Contribución + +Si deseas contribuir a este proyecto, siéntete libre de abrir un problema o enviar una solicitud de extracción. Estamos abiertos a mejoras y nuevas características. + +## Autores + +- David Ramos +- Olatz Goti +- Alex Basurto + +## Licencia + +Sin licencia. + +¡Esperamos que disfrutes utilizando este proyecto! + diff --git a/assets/fav.png b/assets/fav.png new file mode 100644 index 0000000..7836d9d Binary files /dev/null and b/assets/fav.png differ diff --git a/assets/nofav.png b/assets/nofav.png new file mode 100644 index 0000000..f8ed9c0 Binary files /dev/null and b/assets/nofav.png differ diff --git a/assets/placeholder-vertical.jpg b/assets/placeholder-vertical.jpg new file mode 100644 index 0000000..3bcb4c5 Binary files /dev/null and b/assets/placeholder-vertical.jpg differ diff --git a/assets/star.png b/assets/star.png new file mode 100644 index 0000000..7462772 Binary files /dev/null and b/assets/star.png differ diff --git a/assets/star_fav.png b/assets/star_fav.png new file mode 100644 index 0000000..61682dc Binary files /dev/null and b/assets/star_fav.png differ diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..27acba5 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,43 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index e69de29..ffc89ad 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,247 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,500;0,700;1,100;1,200&display=swap'); + +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,500;0,700;1,100;1,200&family=Young+Serif&display=swap'); + +body{ + font-family: 'Montserrat', sans-serif; + background: #2a2a2a; + background: linear-gradient(90deg, rgba(42,42,42,1) 0%, rgba(144,151,153,1) 50%, rgba(42,42,42,1) 100%); +} + +#titulo-header{ + font-size: 65px; + text-align: center; + margin: 20px; + color: #FFC007; + font-family: 'Young Serif', sans-serif; +} + +.movie-title-h2{ + padding-top: 15px; + font-weight: 900; + font-size: 22px; + text-align: center; + color: rgb(37, 37, 37); +} + +input[type=text]{ + text-align: center; + padding: 15px 0; + width: 15%; + margin: 10px 0; + border-radius: 10px; + color: rgb(37, 37, 37); + font-size: 18px; + border: none; + background-color: #B8B8B8; + color: #2a2a2a; +} + +#submit{ + padding: 5px 15px; + margin: 10px 0; + border-radius: 10px; + background-color: #FFC007; + color: rgb(37, 37, 37); + font-size: 20px; + border: none; + width: 150px; +} + +#submit:hover{ + background: #B8B8B8; + color: rgb(37, 37, 37); + font-weight: 500; +} + +#clear-elements{ + padding: 5px 15px; + margin: 10px 0; + border-radius: 10px; + background-color: #FFC007; + color: rgb(37, 37, 37); + font-size: 20px; + border: none; + width: 150px; +} + +#clear-elements:hover{ + background: #B8B8B8; + color: rgb(37, 37, 37); + font-weight: 500; +} + +#movie-search-form{ + text-align: center; + padding: 20px; + +} + +#movie-year-p, #movie-type-p{ + font-weight: 500; + padding-top: 10px; + font-size: 18px; + text-align: center; + color: rgb(37, 37, 37); + +} + +#main-container{ + width: 80%; + display: flex; + margin: 0 auto; + justify-content: center; +} + +.clBusqueda{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + margin-left: 50px; +} + +.movie-details{ + width: 16%; + padding-bottom: 25px; + background-color: #b8b8b8; + margin-bottom: 60px; + border-radius: 10px; + padding-left: 10px; + padding-right: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#movie-details-container { + margin-left: 0; +} + +.movie-image:hover{ + cursor: pointer; +} + +.movie-image{ + height: 400px; + width: 90%; + overflow: hidden; + border-radius: 10px; + display: block; + margin-top: 60px; + +} + +.clFicha +{ + + border: 1px solid rgb(107, 90, 90); + padding: 20px; + background-color: #A8A8A8; + border-radius: 10px; + align-items: center; + width: 100%; + position: relative; +} + +.title-style +{ +color: "red"; +font-size: 80px; +text-align: center; +color:rgb(37, 37, 37); + +} + +.article-principal{ + + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + padding: 20px; +} + +.article-text +{ +width: 65%; +display: block; +text-align: left; +} + +.article-image +{ + width: 35%; + border-radius: 10px; + overflow: hidden; +} + +img{ + object-fit: cover; + width:400px; + border-radius: 10px; +} + +img.favorite { + width: 48px; + height: 48px; +} + +.clFicha > img.favorite { + position: absolute; + top: 40px; + right: 40px; + width: 60px; + height: 60px; +} + +h1 +{ + line-height: 1.6; +} + +p +{ + padding:10px; + margin-top: 5px; + padding-top: 5px; + padding-bottom: 5px; + line-height: 1.5; + font-size: 23px; + color:rgb(37, 37, 37); +} + + +.article-more-info{ + + justify-content: space-evenly; + align-items: center; + padding-bottom: 20px; + margin: auto 5%; + padding-top: 0; + margin-top: 0; + +} + +.article-ratings{ + + + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + padding: 20px; +} + +.article-rating1{ + + display: flex; + +} + +.favorite{ + width: 35px; + height: 35px; + margin-top: 10px; +} \ No newline at end of file diff --git a/ficha_pelicula.html b/ficha_pelicula.html index 444162e..dfbdea5 100644 --- a/ficha_pelicula.html +++ b/ficha_pelicula.html @@ -1,2 +1,13 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 9d04b6d..afc1444 100644 --- a/index.html +++ b/index.html @@ -3,20 +3,26 @@ - Web Películas + Document +
-

WEB PELÍCULAS

+

FilmFinder

-
- -
- - -
-
- +
+ + + +
+ + +
+
+
+
+ + \ No newline at end of file diff --git a/js/index.js b/js/index.js index ecd2b5f..8b2d2a0 100644 --- a/js/index.js +++ b/js/index.js @@ -1,55 +1,529 @@ -const resultadosBusqueda = document.getElementById('resultadosBusqueda'); +//const resultadosBusqueda = document.getElementById('resultadosBusqueda'); const fichaPelicula = document.getElementById('fichaPelicula'); +const movieDetailsContainer = document.getElementById('movie-details-container'); -async function getFilmsFromApi(title, year, type) { - /* - encargado David. - Esta función recogerá los datos del formulario enviados por el usuario. - Con esos datos, construirá la URL de consulta de la API, - ejemplo: - http://www.omdbapi.com/?s=the_lord_of_the_rings&y=2002&type=movie&apikey=66dfa7cd - si separamos por partes se nos queda: - - http://www.omdbapi.com/? - s=the_lord_of_the_rings - &y=2002 - &type=movie - &apikey=66dfa7cd - podemos prescindir de plot ya que no afecta a los resultados. - - una vez construida la URL,llamamos a la URL y guardamos el resultado en una variable y la devolvemos (return). - será otra función la que se encargue de dibujar en pantalla (es decir, de hacer el DOM) - */ -} +document.getElementById('movie-search-form').addEventListener('submit', async function getFilmsFromApi(movieInfo) { + //prevent default para no generar un article cada vez que submit + movieInfo.preventDefault(); -async function createResultsTable(recogeReturnFngetFilmsFromApi) { - /* - encargado David. + //variables para el nombre,año y tipo de la pelicula + const movieTitle = document.getElementById('movie-title').value; + const movieYear = document.getElementById('movie-year').value; + const movieType = document.getElementById('movie-type').value; + //variable para la apikey + const apiKey = 'ddcc8d85'; - */ + document.getElementById('movie-search-form').reset(); + movieDetailsContainer.innerHTML = ''; + + + //alerta si no meten ningún título + if (movieTitle === "") { + //Utilizo esto por si quiero decir que metan algo en el form, pero si le doy al refrescar tambien me sale, solucionar el problema + alert('Insert movie title'); + return; + } + + //variable con la url y entrada de las variables de nombre y apikey en forma de template string + const apiUrl = `https://www.omdbapi.com/?s=${movieTitle}&y=${movieYear}&type=${movieType}&apikey=${apiKey}`; + + // try & catch + try { + //variable con la respuesta que recojo con un fetch + const response = await fetch(apiUrl); + if (!response.ok) { + throw new Error('Error al obtener información de la película desde la API'); + } + + //recojo la respuesta y mediante json los formateo para javascript + const data = await response.json(); + + if (data.Error) { + throw new Error(data.Error); + } + + // creo article para mostrar resultados + + //recojo los datos que recibo en array y los separo + const results = data['Search']; + /* console.log(results); */ + + results.map((result) => { + renderMovie(result); + }) + + } catch (error) { + console.error('Error:', error); + } +}); + + +//función de pintar en HTML +function renderMovie(result){ + const movieDetailsArticle = document.createElement('article'); + movieDetailsContainer.className = 'clBusqueda'; + movieDetailsArticle.className = 'movie-details'; + + // agrego detalles de la película al elemento article + + const imgElement = document.createElement('img'); + imgElement.className = 'movie-image'; + if(result.Poster === 'N/A'){ + imgElement.src = "../assets/placeholder-vertical.jpg"; + }else{ + imgElement.src = ` ${result.Poster}`; + } + movieDetailsArticle.appendChild(imgElement); + + const movieTitleElement = document.createElement('h2'); + movieTitleElement.className = 'movie-title-h2'; + movieTitleElement.textContent = result.Title; + movieDetailsArticle.appendChild(movieTitleElement); + + const yearElement = document.createElement('p'); + yearElement.setAttribute("id", "movie-year-p"); + yearElement.textContent = `Year: ${result.Year}`; + movieDetailsArticle.appendChild(yearElement); + + const typeElement = document.createElement('p'); + typeElement.setAttribute("id", "movie-type-p"); + typeElement.textContent = `Type: ${result.Type}`; + movieDetailsArticle.appendChild(typeElement); + + //favs (ALEX) + const favElement = document.createElement('img'); + if (isThisFilmFav(result.imdbID)) { + favElement.setAttribute("src", "../assets/star_fav.png"); + } else { + favElement.setAttribute("src", "../assets/star.png"); + } + favElement.className = 'favorite'; + favElement.addEventListener('click', () => { + const currentSrc = favElement.getAttribute('src'); + if (currentSrc === '../assets/star_fav.png') { + favElement.setAttribute("src", "../assets/star.png"); + } else if (currentSrc === '../assets/star.png') { + favElement.setAttribute("src", "../assets/star_fav.png"); + } + + addOrRemoveFavs(result.imdbID); +}); + movieDetailsArticle.appendChild(favElement); + + + // agrego el elemento article a la section movieDetailsContainer + movieDetailsContainer.appendChild(movieDetailsArticle); + + + + //click en la imágen y pinto con la función getSingleFilm que recoge con el imdbId toda al info de la película + imgElement.addEventListener('click', function() { + + //el IMDb ID de la película + const imdbID = result.imdbID; + //llamo a la función getSingleFilm para obtener los detalles de la película + getSingleFilm(imdbID); + }); + } + + //declaro variable para el boton de refrescar + const clearButton = document.getElementById('clear-elements'); + + //función de refrescar + clearButton.addEventListener("click", function(event){ + //si hago click en este boton no le llega info al formulario de que se ha hecho click + //event.stopPropagation(); + // lista de todos los elementos con class movie-details + const movieDetailsElements = document.querySelectorAll('.movie-details'); + + // Itera sobre la lista y elimina cada elemento + movieDetailsElements.forEach(function (element) { + element.remove(); + }); +}); + +function createResultsTable(result) { + movieDetailsArticle = document.createElement('article'); + movieDetailsArticle.className = 'movie-details'; + + // agrego img,title, type y año al elemento article + + const imgElement = document.createElement('img'); + imgElement.className = 'movie-img'; + if(result.Poster === 'N/A'){ + imgElement.src = "../assets/placeholder-vertical.jpg"; + }else{ + imgElement.src = ` ${result.Poster}`; + } + movieDetailsArticle.appendChild(imgElement); + + const movieTitleElement = document.createElement('h2'); + movieTitleElement.className = 'movie-title-h2'; + movieTitleElement.textContent = result.Title; + movieDetailsArticle.appendChild(movieTitleElement); + + const yearElement = document.createElement('p'); + yearElement.setAttribute("id", "movie-year-p"); + yearElement.textContent = `Año: ${result.Year}`; + movieDetailsArticle.appendChild(yearElement); + + const typeElement = document.createElement('p'); + typeElement.setAttribute("id", "movie-type-p"); + typeElement.textContent = `Tipo: ${result.Type}`; + movieDetailsArticle.appendChild(typeElement); + + // agrego el elemento article a la section movieDetailsContainer + movieDetailsContainer.appendChild(movieDetailsArticle); } async function getSingleFilm(imdbID) { - /* - encargados Alex y Olatz - Cada tarjeta tendrá un addEventLIstener que activará esta función, recogiendo el ID de IMDB de la película o serie. - con ese Id construimos la URL de la API de esa peli concreta, p.e.: - http://www.omdbapi.com/?i=tt0167261&apikey=66dfa7cd separamos por partes: - - http://www.omdbapi.com/ inicio URL - ?i=tt0167261 i = id de IMDB - &apikey=66dfa7cd apiKey - - llamamos a la URL y recogemos los datos, guardandolos en una variable. - devolvemos esa variable (return) para probar, un console.log - otra función recogerá esa variable para construir el DOM. - */ + const urlStart = 'http://www.omdbapi.com/'; + const filmId = '?i=' + imdbID; + const apiKey = '&apikey=66dfa7cd'; + const urlFilm = urlStart + filmId + apiKey; + + try { + const response = await fetch(urlFilm); + if (!response.ok) { + throw new Error("Fallo en la llamada."); + } + const film = await response.json(); + console.log(film); + createFilmFile(film); /*recibidos datos de la API, + llamamos a la fn que crea el DOM*/ + } catch (e) { + console.log(e); + alert('Error llamando a la API.'); + return null; + } + + /* + encargados Alex y Olatz + getSingleFilm('tt0167261'); pruebas + Cada tarjeta tendrá un addEventLIstener que activará esta función, recogiendo el ID de IMDB de la película o serie. + con ese Id construimos la URL de la API de esa peli concreta, p.e.: + http://www.omdbapi.com/?i=tt0167261&apikey=66dfa7cd separamos por partes: + + http://www.omdbapi.com/ inicio URL + ?i=tt0167261 i = id de IMDB + &apikey=66dfa7cd apiKey + + llamamos a la URL y recogemos los datos, guardandolos en una variable. + devolvemos esa variable (return) para probar, un console.log + otra función recogerá esa variable para construir el DOM. + */ } -async function createFilmFile(recogeReturnFngetSingleFilm) { +async function createFilmFile(filmData) { /* - encargados Olatz y Alex - + encargados Olatz y Alex */ + //1º vaciar .innerHTML="" + //2º sacar la info + // + movieDetailsContainer.innerHTML = ""; + + //Creo clase para la sección + //const movieSection = document.createElement("section"); + //movieSection.className = 'movieSection'; + + + movieDetailsContainer.className = 'clFicha'; + + //Meto la nueva sección en la que ya existía + //movieDetailsContainer.appendChild(movieSection); + + //Titulo + + // const title = filmData.Title; + // console.log(title); + const tituloElem = document.createElement("h1"); + tituloElem.className = "title-style"; + tituloElem.innerHTML = filmData.Title.toUpperCase(); + movieDetailsContainer.appendChild(tituloElem); + + //Creo ARTICULO PRINCIPAL, contendrá articulo de texto y otro de imagen en FLEXBOX + + const articlePrincipal = document.createElement("article"); + articlePrincipal.className = "article-principal"; + movieDetailsContainer.appendChild(articlePrincipal); + + //Creo ARTICULO de texto dentro de la sección y del ARTICULO PRINCIPAL + const articleText = document.createElement('article'); + articleText.className = 'article-text'; + articlePrincipal.appendChild(articleText); + + //Año + //const year = filmData.Year; + // console.log(year); + const yearElem = document.createElement("p"); + const textY = document.createTextNode("Year: "); + textY.className = 'title-style'; + yearElem.appendChild(textY); + yearElem.innerHTML += filmData.Year; + articleText.appendChild(yearElem); + + + + //Runtime + const runElem = document.createElement("p"); + const textRunE = document.createTextNode("Runtime: "); + + runElem.appendChild(textRunE); + runElem.innerHTML += filmData.Runtime; + articleText.appendChild(runElem); + + + //Rated + const ratedElem = document.createElement("p"); + const textRatedE = document.createTextNode("Certification: "); + ratedElem.appendChild(textRatedE); + const certificationElem = document.createElement("p"); + const certification = document.createTextNode(filmData.Rated); + certificationElem.appendChild(certification); + ratedElem.appendChild(certificationElem) + articleText.appendChild(ratedElem); + //Estilos de certification (rated) + const certficationsColors = { + 'R': '#D30000', + 'PG-13': '#A0A500', + 'G': '#199500', + 'PG': '#199500', + 'N/A': '#737373', + 'Not Rated': '#737373', + }; + const certificationBGColors = { + 'R': '#FF7474', + 'PG-13': '#F7FC5A', + 'G': '#8BFF74', + 'PG': '#8BFF74', + 'N/A': '#BFBFBF', + 'Not Rated': '#BFBFBF', + }; + if (filmData.Rated === 'R' || filmData.Rated === 'PG-13' || filmData.Rated === 'PG' || filmData.Rated === 'G' || filmData.Rated === 'N/A' || filmData.Rated === 'Not Rated') { + certificationElem.style.color = certficationsColors[filmData.Rated]; + certificationElem.style.backgroundColor = certificationBGColors[filmData.Rated]; + certificationElem.style.display = 'inline'; + certificationElem.style.borderRadius = '25px'; + } + + //Country + + const countryElem = document.createElement("p"); + const textC = document.createTextNode("Country: ") + countryElem.appendChild(textC); + countryElem.innerHTML += filmData.Country; + articleText.appendChild(countryElem); + + + //Direction + + const direElem = document.createElement("p"); + const textDir = document.createTextNode("Direction: "); + direElem.appendChild(textDir); + direElem.innerHTML += filmData.Director; + articleText.appendChild(direElem); + + + //Writer + + const writerElem = document.createElement("p"); + const textW = document.createTextNode("Writer: "); + writerElem.appendChild(textW); + writerElem.innerHTML += filmData.Writer; + articleText.appendChild(writerElem); + + + //Cast + + const castElem = document.createElement("p"); + const textAct = document.createTextNode("Cast: ") + castElem.appendChild(textAct); + castElem.innerHTML += filmData.Actors; + articleText.appendChild(castElem); + + + //Type + + const typElem = document.createElement("p"); + const textoTyp = document.createTextNode("Type: ") + typElem.appendChild(textoTyp); + typElem.innerHTML += filmData.Type; + articleText.appendChild(typElem); + + //Boxoffice + + const boxOffice = document.createElement("p"); + const textBox = document.createTextNode("BoxOffice: ") + boxOffice.appendChild(textBox); + boxOffice.innerHTML += filmData.BoxOffice; + articleText.appendChild(boxOffice); + + //Genre + const generElem = document.createElement("p"); + const textGen = document.createTextNode("Genre: "); + + generElem.appendChild(textGen); + generElem.innerHTML += filmData.Genre; + articleText.appendChild(generElem); + + + //Premios + + const awardsElem = document.createElement("p"); + const textAward = document.createTextNode("Awards: ") + awardsElem.appendChild(textAward); + awardsElem.innerHTML += filmData.Awards; + articleText.appendChild(awardsElem); + //articleMoreInfo.appendChild(punto); + + //Language + + const languaElem = document.createElement("p"); + const textLangua = document.createTextNode("Language: "); + languaElem.appendChild(textLangua); + languaElem.innerHTML += filmData.Language; + articleText.appendChild(languaElem); + + //Imagen + //const mainContainer = document.getElementById("main-container"); + + const imagenElem = document.createElement("img"); + if(filmData.Poster !== 'N/A'){ + imagenElem.src = filmData.Poster; + } else{ + imagenElem.src = "../assets/placeholder-vertical.jpg"; + } + + const articleImage = document.createElement("article"); + articleImage.className = 'article-image'; + articlePrincipal.appendChild(articleImage); + articleImage.appendChild(imagenElem); + + //Create article with moreinfo + + + const articleMoreInfo = document.createElement("article"); + articleMoreInfo.className = 'article-more-info'; + movieDetailsContainer.appendChild(articleMoreInfo); + + + + //Plot + + const plotElem = document.createElement("p"); + const textPlot = document.createTextNode('Plot: '); + plotElem.appendChild(textPlot); + plotElem.innerHTML += filmData.Plot; + articleMoreInfo.appendChild(plotElem); + + + //Creo un articulo articleRatings dentro de MoreInfo para que contenga 2 articulos: Rating1 y Rating2 para ponerlos en flexbox + + const articleRatings = document.createElement("article"); + articleRatings.className = 'article-ratings'; + + //Ratings + const ratings = filmData.Ratings; //Asigno una variable a la info de la pagina + + const textRatings = document.createTextNode("Ratings: "); + const ratingElem = document.createElement("p"); //Creo elemento para el texto q traje + + + + + articleMoreInfo.appendChild(articleRatings); + + + const articleRating1 = document.createElement("article"); + articleRating1.className = "article-rating1"; + + + ratingElem.appendChild(textRatings); + + for(let i = 0; i < ratings.length; i++) + { + const RatingObj = ratings[i]; + + + ratingElem.innerHTML += `
${RatingObj.Source}: ${RatingObj.Value} `; + + articleRating1.appendChild(ratingElem); + + } + + articleRatings.appendChild(articleRating1); + + + + + //Creacion article rating2 + + const articleRating2 = document.createElement("article"); + articleRating2.className = 'article-rating2'; + articleRatings.appendChild(articleRating2); + // + + + //IMDB Rating + const imdbRatElem = document.createElement("p"); + const textImdbR = document.createTextNode("IMDB Rating: ") + imdbRatElem.appendChild(textImdbR); + imdbRatElem.innerHTML += filmData.imdbRating; + articleRating2.appendChild(imdbRatElem); + + + + + //imdbVotes + + const imdbVotElem = document.createElement("p"); + const textV = document.createTextNode("IMDB Votes: "); + imdbVotElem.appendChild(textV); + imdbVotElem.innerHTML += filmData.imdbVotes; + articleRating2.appendChild(imdbVotElem) + + //favs (código de ALEX) + const favElement = document.createElement('img'); + if (isThisFilmFav(filmData.imdbID)) { + favElement.setAttribute("src", "../assets/star_fav.png"); + } else { + favElement.setAttribute("src", "../assets/star.png"); + } + favElement.className = 'favorite'; + + favElement.addEventListener('click', () => { + const currentSrc = favElement.getAttribute('src'); + if (currentSrc === '../assets/star_fav.png') { + favElement.setAttribute("src", "../assets/star.png"); + } else if (currentSrc === '../assets/star.png') { + favElement.setAttribute("src", "../assets/star_fav.png"); + } + + addOrRemoveFavs(filmData.imdbID); +}); + + movieDetailsContainer.appendChild(favElement); + +} + + +//función para añadir o quitar películas de favoritos en localStorage +function addOrRemoveFavs(imdbID) { + + if (localStorage.getItem(imdbID) === null) { + localStorage.setItem(imdbID, 'favoritos'); + } else { + localStorage.removeItem(imdbID); + } + //pruebas: addOrRemoveFavs('tt0167261'); } +//función para comprobar si es fav o no +function isThisFilmFav(imdbID) { + if (localStorage.getItem(imdbID) === null) { + return false; + } else { + return true; + } +} \ No newline at end of file