From cbb90f67dfe90ff588aa6ff049883775b9843a86 Mon Sep 17 00:00:00 2001 From: DanGRT Date: Fri, 21 Sep 2018 11:49:56 +0100 Subject: [PATCH 01/12] basic search functionality --- index.html | 25 ++++++++++++++ scripts/scripts.js | 83 ++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 35 +++++++++++++++++++ 3 files changed, 143 insertions(+) create mode 100644 index.html create mode 100644 scripts/scripts.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..c8354a4e --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + + + Project Cinema + + +
+
+ + +
+
+
+
+ +
+
+ + + + diff --git a/scripts/scripts.js b/scripts/scripts.js new file mode 100644 index 00000000..4bf29a38 --- /dev/null +++ b/scripts/scripts.js @@ -0,0 +1,83 @@ +//API key: 210776d9 + +//http://www.omdbapi.com/?apikey=210776d9&[searchparameters] + + +const bodyElement = document.querySelector("body") +const searchTextElement = document.querySelector(".search__text") +const searchResultsElement = document.querySelector(".results") + +bodyElement.addEventListener("submit", event => { + event.preventDefault() + if (event.target.matches(".search")){ + apiUrls.updateURL("s", searchTextElement.value) + apiUrls.fetchResults(apiUrls.getURL()) + } +}) + +bodyElement.addEventListener("click", event => { + console.log(event.target) + if (event.target.matches(".search__result")){ + console.log("clicked on film") + } +}) + +const apiUrls = { + searchParameters: { + s: "", + type: "", + page: "" + }, + + movieParameters: { + i: "", + plot: "" + }, + + + + updateURL: function(parameter, update) { + this.searchParameters[parameter] = `&${parameter}=${update}`; + + }, + + getURL: function() { + const customURL = `http://www.omdbapi.com/?apikey=210776d9${this.searchParameters.s}` + return customURL +}, + + fetchResults: function(apiURL){ + fetch(apiURL) + .then(response => response.json()) + .then(body => { + console.log(body.Search) + body.Search.forEach(result => { + searchResultsElement.appendChild(searchTemplate(result)) + + }) + }) + + } + +}; + + +const pageHandlers = { + +} + +function searchTemplate (result){ + const searchResultElement = document.createElement("div") + const template = ` +
+ +

${result.Title}

+
(${result.Year})
+
${result.Type}
+
+ ` + searchResultElement.innerHTML = template + return searchResultElement + + +} diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..dea16299 --- /dev/null +++ b/styles.css @@ -0,0 +1,35 @@ +body { + margin: 0; + display: flex; + flex-direction: column; + box-sizing: border-box; + width: 100vw; + +} + +.search__result{ + display: flex; + flex-direction: row; + background-color: grey; + margin: 1rem; + height: 10vh; + width: 30vw; +} + +.result__poster{ + height: 90%; + width: auto; + +} + +.result__title{ + +} + +.result__year{ + +} + +.result__type{ + +} From bb1d891f2bcfb43d50991d97d01505fffc342114 Mon Sep 17 00:00:00 2001 From: DanGRT Date: Fri, 21 Sep 2018 12:56:05 +0100 Subject: [PATCH 02/12] have basic functionality for displaying full film details --- index.html | 3 +++ scripts/scripts.js | 52 +++++++++++++++++++++++++++++++++++++--------- 2 files changed, 45 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index c8354a4e..0fef056b 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,9 @@
+
+
+
diff --git a/scripts/scripts.js b/scripts/scripts.js index 4bf29a38..40865e9d 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -6,6 +6,7 @@ const bodyElement = document.querySelector("body") const searchTextElement = document.querySelector(".search__text") const searchResultsElement = document.querySelector(".results") +const filmDisplayElement = document.querySelector(".film-display") bodyElement.addEventListener("submit", event => { event.preventDefault() @@ -15,10 +16,11 @@ bodyElement.addEventListener("submit", event => { } }) +//closest instead of matches, pay attention in case of bugs bodyElement.addEventListener("click", event => { - console.log(event.target) - if (event.target.matches(".search__result")){ - console.log("clicked on film") + if (event.target.closest(".search__result")){ + apiUrls.updateMovieURL("i", event.target.dataset.id) + apiUrls.fetchMovie(apiUrls.getMovieURL()) } }) @@ -41,11 +43,20 @@ const apiUrls = { }, + updateMovieURL: function(parameter, update){ + this.movieParameters[parameter] = `&${parameter}=${update}`; + + }, + getURL: function() { const customURL = `http://www.omdbapi.com/?apikey=210776d9${this.searchParameters.s}` return customURL }, + getMovieURL: function(){ + return `http://www.omdbapi.com/?apikey=210776d9${this.movieParameters.i}` + }, + fetchResults: function(apiURL){ fetch(apiURL) .then(response => response.json()) @@ -57,11 +68,21 @@ const apiUrls = { }) }) - } + }, -}; + fetchMovie: function(apiURL){ + fetch(apiURL) + .then(response => response.json()) + .then(body => { + filmDisplayElement.appendChild(fullFilmTemplate(body)) + }) + +} + +} + const pageHandlers = { } @@ -70,14 +91,25 @@ function searchTemplate (result){ const searchResultElement = document.createElement("div") const template = `
- -

${result.Title}

-
(${result.Year})
-
${result.Type}
+ +

${result.Title}

+
(${result.Year})
+
${result.Type}
` searchResultElement.innerHTML = template return searchResultElement +} - +function fullFilmTemplate (result){ + const filmInfoElement = document.createElement("div") + const template = ` +
+

${result.Title}

+

${result.Actors}

+

${result.Plot}

+

+ ` + filmInfoElement.innerHTML = template + return filmInfoElement } From 84ba401b7921460496d6692c5493b3a4d351ef05 Mon Sep 17 00:00:00 2001 From: DanGRT Date: Fri, 21 Sep 2018 15:58:21 +0100 Subject: [PATCH 03/12] navbar added --- index.html | 15 ++++++++++++- scripts/scripts.js | 27 ++++++++++++++++++++-- styles.css | 56 ++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 93 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 0fef056b..43996cba 100644 --- a/index.html +++ b/index.html @@ -9,18 +9,31 @@
+
-
+
+ + +
+
+
diff --git a/scripts/scripts.js b/scripts/scripts.js index 40865e9d..67f705ba 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -7,10 +7,16 @@ const bodyElement = document.querySelector("body") const searchTextElement = document.querySelector(".search__text") const searchResultsElement = document.querySelector(".results") const filmDisplayElement = document.querySelector(".film-display") +const modal = document.querySelector(".modal") +const displaySearchButton = document.querySelector(".search__display-bar") +const searchBarElement = document.querySelector(".nav__search") +const homeNavBar = document.querySelector(".nav__home") + bodyElement.addEventListener("submit", event => { event.preventDefault() if (event.target.matches(".search")){ + modal.style.display = "block" apiUrls.updateURL("s", searchTextElement.value) apiUrls.fetchResults(apiUrls.getURL()) } @@ -19,11 +25,30 @@ bodyElement.addEventListener("submit", event => { //closest instead of matches, pay attention in case of bugs bodyElement.addEventListener("click", event => { if (event.target.closest(".search__result")){ + modal.style.display = "none" + searchResultsElement.innerHTML = "" + filmDisplayElement.innerHTML = "" + toggleNavBar() apiUrls.updateMovieURL("i", event.target.dataset.id) apiUrls.fetchMovie(apiUrls.getMovieURL()) } + if (event.target.matches(".search__display-bar")){ + toggleNavBar() + + } }) +//look into actual toggle functionality with BEM +function toggleNavBar(){ + if (homeNavBar.style.display === "flex"){ + searchBarElement.style.display = "flex" + homeNavBar.style.display = "none" + }else{ + searchBarElement.style.display = "none" + homeNavBar.style.display = "flex" + } +} + const apiUrls = { searchParameters: { s: "", @@ -61,13 +86,11 @@ const apiUrls = { fetch(apiURL) .then(response => response.json()) .then(body => { - console.log(body.Search) body.Search.forEach(result => { searchResultsElement.appendChild(searchTemplate(result)) }) }) - }, fetchMovie: function(apiURL){ diff --git a/styles.css b/styles.css index dea16299..49423dea 100644 --- a/styles.css +++ b/styles.css @@ -7,13 +7,65 @@ body { } +nav > div { + height: 10vh; + background-color: black; +} + +.nav__home{ + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.logo{ + color: yellow; +} + + + +.nav__search{ + display: none; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + + + +.modal{ + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + height: 100%; + width: 100%; + overflow: auto; + background-color: rgba(0,0,0,0.5) +} + +.modal__content{ + background-color: #f4f4f4; + margin: 20% auto; + padding: 2em; + width: 70%; + box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.17); + border: 1px solid black; + display: flex; + flex-direction: column; + align-content: center; +} + .search__result{ display: flex; flex-direction: row; - background-color: grey; + justify-content: center; margin: 1rem; height: 10vh; - width: 30vw; + width: 95%; + border: 1px black solid; + background-color: white; } .result__poster{ From b1c0db105ddaf307bb9e6569b93f334e98c8d1bb Mon Sep 17 00:00:00 2001 From: DanGRT Date: Fri, 21 Sep 2018 17:28:15 +0100 Subject: [PATCH 04/12] started to make accomodations for API returning errors, final commit of day --- scripts/scripts.js | 163 ++++++++++++++++++++++----------------------- styles.css | 24 ++++++- 2 files changed, 104 insertions(+), 83 deletions(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index 67f705ba..1a62cd61 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -2,50 +2,49 @@ //http://www.omdbapi.com/?apikey=210776d9&[searchparameters] +//feature idea: News API to check for stories about film -const bodyElement = document.querySelector("body") -const searchTextElement = document.querySelector(".search__text") -const searchResultsElement = document.querySelector(".results") -const filmDisplayElement = document.querySelector(".film-display") -const modal = document.querySelector(".modal") -const displaySearchButton = document.querySelector(".search__display-bar") -const searchBarElement = document.querySelector(".nav__search") -const homeNavBar = document.querySelector(".nav__home") - +const bodyElement = document.querySelector("body"); +const searchTextElement = document.querySelector(".search__text"); +const searchResultsElement = document.querySelector(".results"); +const filmDisplayElement = document.querySelector(".film-display"); +const modal = document.querySelector(".modal"); +const displaySearchButton = document.querySelector(".search__display-bar"); +const searchBarElement = document.querySelector(".nav__search"); +const homeNavBar = document.querySelector(".nav__home"); bodyElement.addEventListener("submit", event => { - event.preventDefault() - if (event.target.matches(".search")){ - modal.style.display = "block" - apiUrls.updateURL("s", searchTextElement.value) - apiUrls.fetchResults(apiUrls.getURL()) + event.preventDefault(); + if (event.target.matches(".search")) { + modal.style.display = "block"; + apiUrls.updateURL("s", searchTextElement.value); + apiUrls.fetchResults(apiUrls.getURL()); } -}) +}); //closest instead of matches, pay attention in case of bugs bodyElement.addEventListener("click", event => { - if (event.target.closest(".search__result")){ - modal.style.display = "none" - searchResultsElement.innerHTML = "" - filmDisplayElement.innerHTML = "" - toggleNavBar() - apiUrls.updateMovieURL("i", event.target.dataset.id) - apiUrls.fetchMovie(apiUrls.getMovieURL()) + if (event.target.closest(".search__result")) { + modal.style.display = "none"; + searchResultsElement.innerHTML = ""; + filmDisplayElement.innerHTML = ""; + toggleNavBar(); + apiUrls.updateMovieURL("i", event.target.dataset.id); + apiUrls.fetchMovie(apiUrls.getMovieURL()); } - if (event.target.matches(".search__display-bar")){ - toggleNavBar() - + if (event.target.matches(".search__display-bar")) { + toggleNavBar(); } -}) +}); //look into actual toggle functionality with BEM -function toggleNavBar(){ - if (homeNavBar.style.display === "flex"){ - searchBarElement.style.display = "flex" - homeNavBar.style.display = "none" - }else{ - searchBarElement.style.display = "none" - homeNavBar.style.display = "flex" +function toggleNavBar() { + if (homeNavBar.style.display === "flex") { + searchBarElement.style.display = "flex"; + homeNavBar.style.display = "none"; + } else { + searchBarElement.style.display = "none"; + homeNavBar.style.display = "flex"; } } @@ -61,78 +60,78 @@ const apiUrls = { plot: "" }, - - updateURL: function(parameter, update) { this.searchParameters[parameter] = `&${parameter}=${update}`; - }, - updateMovieURL: function(parameter, update){ + updateMovieURL: function(parameter, update) { this.movieParameters[parameter] = `&${parameter}=${update}`; - }, getURL: function() { - const customURL = `http://www.omdbapi.com/?apikey=210776d9${this.searchParameters.s}` - return customURL -}, + const customURL = `http://www.omdbapi.com/?apikey=210776d9${ + this.searchParameters.s + }`; + return customURL; + }, - getMovieURL: function(){ - return `http://www.omdbapi.com/?apikey=210776d9${this.movieParameters.i}` + getMovieURL: function() { + return `http://www.omdbapi.com/?apikey=210776d9${this.movieParameters.i}`; }, - fetchResults: function(apiURL){ + fetchResults: function(apiURL) { fetch(apiURL) - .then(response => response.json()) - .then(body => { - body.Search.forEach(result => { - searchResultsElement.appendChild(searchTemplate(result)) - - }) - }) + .then(response => response.json()) + .then(body => { + if (body.hasOwnProperty("Error")) { + //TODO: needs to be filled out + console.log("error"); + } else { + body.Search.forEach(result => { + searchResultsElement.appendChild(searchTemplate(result)); + }); + } + }); }, - fetchMovie: function(apiURL){ + fetchMovie: function(apiURL) { fetch(apiURL) - .then(response => response.json()) - .then(body => { - filmDisplayElement.appendChild(fullFilmTemplate(body)) - - - }) - -} - -} - -const pageHandlers = { + .then(response => response.json()) + .then(body => { + filmDisplayElement.appendChild(fullFilmTemplate(body)); + }); + } +}; -} +const pageHandlers = {}; -function searchTemplate (result){ - const searchResultElement = document.createElement("div") +function searchTemplate(result) { + const searchResultElement = document.createElement("div"); const template = `
- -

${result.Title}

-
(${result.Year})
-
${result.Type}
+ +

${result.Title}

+
(${result.Year})
+
${result.Type}
- ` - searchResultElement.innerHTML = template - return searchResultElement + `; + searchResultElement.innerHTML = template; + return searchResultElement; } -function fullFilmTemplate (result){ - const filmInfoElement = document.createElement("div") +function fullFilmTemplate(result) { + const filmInfoElement = document.createElement("div"); const template = `
-

${result.Title}

-

${result.Actors}

-

${result.Plot}

+

+

${result.Title}

+

(${result.Year})

+
+ +

Cast: ${result.Actors}

+

${result.Plot}

- ` - filmInfoElement.innerHTML = template - return filmInfoElement + `; + filmInfoElement.innerHTML = template; + return filmInfoElement; } diff --git a/styles.css b/styles.css index 49423dea..ee490e4b 100644 --- a/styles.css +++ b/styles.css @@ -61,7 +61,8 @@ nav > div { display: flex; flex-direction: row; justify-content: center; - margin: 1rem; + align-items: center; + margin: 0.5rem; height: 10vh; width: 95%; border: 1px black solid; @@ -71,10 +72,12 @@ nav > div { .result__poster{ height: 90%; width: auto; + align-self: flex-start; } .result__title{ + align-self: center; } @@ -85,3 +88,22 @@ nav > div { .result__type{ } + +.film-display{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.film-display__header{ + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.film-display__poster{ + width: 60%; + height: auto; + align-self: center; +} From e188850592869d858ebe5bd8494cae1c80478860 Mon Sep 17 00:00:00 2001 From: DanGRT Date: Sat, 22 Sep 2018 12:56:04 +0100 Subject: [PATCH 05/12] formatted film display, started work on getting related news --- index.html | 2 +- scripts/scripts.js | 40 +++++++++++++++++++++++++++++++++++----- styles.css | 41 ++++++++++++++++++++++++++++++++++++++++- 3 files changed, 76 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 43996cba..2ec65a9d 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@ -
+
diff --git a/scripts/scripts.js b/scripts/scripts.js index 1a62cd61..874d9ea2 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -7,7 +7,7 @@ const bodyElement = document.querySelector("body"); const searchTextElement = document.querySelector(".search__text"); const searchResultsElement = document.querySelector(".results"); -const filmDisplayElement = document.querySelector(".film-display"); +const filmDisplayElement = document.querySelector(".film-container"); const modal = document.querySelector(".modal"); const displaySearchButton = document.querySelector(".search__display-bar"); const searchBarElement = document.querySelector(".nav__search"); @@ -76,7 +76,7 @@ const apiUrls = { }, getMovieURL: function() { - return `http://www.omdbapi.com/?apikey=210776d9${this.movieParameters.i}`; + return `http://www.omdbapi.com/?apikey=210776d9${this.movieParameters.i}&plot=long`; }, fetchResults: function(apiURL) { @@ -98,8 +98,18 @@ const apiUrls = { fetch(apiURL) .then(response => response.json()) .then(body => { + console.log(body) filmDisplayElement.appendChild(fullFilmTemplate(body)); }); + }, + + + fetchNews: function(apiURL){ + fetch(apiURL) + .then(response => response.json()) + .then(body => { + + }) } }; @@ -124,12 +134,32 @@ function fullFilmTemplate(result) { const template = `
-

${result.Title}

+

${result.Title}

(${result.Year})

- -

Cast: ${result.Actors}

+
+ +
${result.Genre} | ${result.Runtime} | ${result.Rated} + Director: ${result.Director} + Written By: ${result.Writer} +
+
+ Cast: ${result.Actors}

${result.Plot}

+

+
Ratings & Awards
+ ${result.Awards} + ${result.Ratings[0].Source}: ${result.Ratings[0].Value} + ${result.Ratings[1].Source}: ${result.Ratings[1].Value} + ${result.Ratings[2].Source}: ${result.Ratings[2].Value} +
+
+
Miscellaneous
+ Released: ${result.Released}, Box Office: ${result.BoxOffice}. DVD: ${result.DVD} + ${result.Country} | ${result.Language} | ${result.Production} + ${result.Website} +

`; filmInfoElement.innerHTML = template; diff --git a/styles.css b/styles.css index ee490e4b..21d5f548 100644 --- a/styles.css +++ b/styles.css @@ -94,16 +94,55 @@ nav > div { flex-direction: column; justify-content: center; align-items: center; + border: 1px solid black; + padding: 0.5rem; + background-color: #F5FFFA + } .film-display__header{ + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.film-display__info{ display: flex; flex-direction: row; justify-content: space-around; } .film-display__poster{ - width: 60%; + width: 40%; height: auto; align-self: center; } + +.film-display__key-facts{ + display: flex; + flex-direction: column; + margin: 0.5rem; + justify-content: space-between; +} + + +.film-display__cast{ + margin-top: 1rem; +} + +.film-display__ratings{ + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: #FFFAFA; + padding: 0.25rem; +} + +.film-display__misc{ + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: #FFFAFA; + padding: 0.25rem; + +} From 1aac11b996dca5cc9284e8c41cea5772b5b03319 Mon Sep 17 00:00:00 2001 From: DanGRT Date: Sat, 22 Sep 2018 15:55:10 +0100 Subject: [PATCH 06/12] added Recent News functionality, needs further refining --- scripts/scripts.js | 36 ++++++++++++++++++++++++++++++++---- styles.css | 27 ++++++++++++++++++++++++++- 2 files changed, 58 insertions(+), 5 deletions(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index 874d9ea2..25700a67 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -98,18 +98,21 @@ const apiUrls = { fetch(apiURL) .then(response => response.json()) .then(body => { - console.log(body) + const newsApiString = `https://newsapi.org/v2/everything?q=${body.Title}&apiKey=9ed005ef4eb94baf913fce701c69972f` filmDisplayElement.appendChild(fullFilmTemplate(body)); + this.fetchNews(newsApiString) }); }, - +//tried writing this as pure but no luck fetchNews: function(apiURL){ - fetch(apiURL) + fetch(apiURL) .then(response => response.json()) .then(body => { - + filmNewsElement = filmNewsTemplate(body) + filmDisplayElement.appendChild(filmNewsElement) }) + } }; @@ -165,3 +168,28 @@ function fullFilmTemplate(result) { filmInfoElement.innerHTML = template; return filmInfoElement; } + +function filmNewsTemplate(body){ + const filmNewsElement = document.createElement("div") + filmNewsElement.className = "film-display__news-container" + filmNewsElement.innerHTML = `

Recent News

` + const newsStories = body.articles.map(story => { + return ` + ${story.title} + + ${convertDateForDisplay(story.publishedAt)} | + ${story.source.name} + + ` + }) + filmNewsElement.innerHTML += newsStories.join("") + return filmNewsElement + + +} + + +function convertDateForDisplay(date) { + const inputDate = new Date(date); + return inputDate.toLocaleString(); +} diff --git a/styles.css b/styles.css index 21d5f548..07b6b1a7 100644 --- a/styles.css +++ b/styles.css @@ -141,8 +141,33 @@ nav > div { .film-display__misc{ display: flex; flex-direction: column; - justify-content: space-between; + justify-content: space-between; background-color: #FFFAFA; padding: 0.25rem; } + +.film-display__news-container{ + display: flex; + flex-direction: column; + align-items: space-between; + +} + +.film-display__news-item{ + display: flex; + flex-direction: column; +} + + +a:link{ + color: #136CB2; + text-decoration: none; +} +a:hover{ + color: black; +} + +a:visited{ + color: #70579D; +} From cc5586c23fc66677e296283f5286b418d0cb78f1 Mon Sep 17 00:00:00 2001 From: DanGRT Date: Sat, 22 Sep 2018 18:32:04 +0100 Subject: [PATCH 07/12] added some styling, made a landing page --- index.html | 12 ++++++++-- scripts/scripts.js | 8 +++++-- styles.css | 59 +++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 72 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 2ec65a9d..0c0f01ee 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,16 @@ + + Project Cinema
+
+ + +

Welcome to Project Cinema

+
+
diff --git a/scripts/scripts.js b/scripts/scripts.js index 25700a67..bd9df39a 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -98,12 +98,16 @@ const apiUrls = { fetch(apiURL) .then(response => response.json()) .then(body => { - const newsApiString = `https://newsapi.org/v2/everything?q=${body.Title}&apiKey=9ed005ef4eb94baf913fce701c69972f` + console.log(body.Title) filmDisplayElement.appendChild(fullFilmTemplate(body)); - this.fetchNews(newsApiString) + this.fetchNews(this.getNewsURL(body.Title)) }); }, + getNewsURL: function(searchString){ + return `https://newsapi.org/v2/everything?q="${searchString}"&sortBy=relevancy&pageSize=6&apiKey=9ed005ef4eb94baf913fce701c69972f` + }, + //tried writing this as pure but no luck fetchNews: function(apiURL){ fetch(apiURL) diff --git a/styles.css b/styles.css index 07b6b1a7..792b6903 100644 --- a/styles.css +++ b/styles.css @@ -9,7 +9,11 @@ body { nav > div { height: 10vh; - background-color: black; + background-color: #FBFBFC; + background:url( + + data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKklEQVQoU2P8/fvPfwYiAOMgUvjr108GNjZ2DFdT7kZ0kyk3Ed2RRJsIAKsgLXVT7f82AAAAAElFTkSuQmCC + ) repeat; } .nav__home{ @@ -19,7 +23,25 @@ nav > div { } .logo{ - color: yellow; + margin-left: 1rem; + color: #E10703; + font-family: 'Six Caps', sans-serif; + align-self: center; + letter-spacing: 0.8rem; + font-size: 2rem; + font-weight:bold; +} + +.search__display-bar{ + color: #F89B0A; + font-size: 1.5rem; + align-self: center; + margin-right: 1rem; +} + +.search__display-bar:hover{ + color: #050505; + } @@ -28,10 +50,39 @@ nav > div { display: none; flex-direction: row; justify-content: space-between; - align-items: center; } +main{ + background-color: #696969; + height: 90vh; + display: flex; + flex-direction: column + +} + +.landing-page{ + background-color: #E10703; + height: 90vh; + display: flex; + flex-direction: column +} + +.landing-icon{ + font-size: 6rem; + align-self: center; + margin-top: 5rem; + color: #FBFBFC; + + +} + +.landing-text{ + color: #FBFBFC; + align-self: center; + font-size: 1.5rem; +} + .modal{ display: none; @@ -157,6 +208,8 @@ nav > div { .film-display__news-item{ display: flex; flex-direction: column; + background-color: snow; + margin: 0.5em; } From 95d62f7641f029b40579fce6eb3567236eb6b816 Mon Sep 17 00:00:00 2001 From: DanGRT Date: Sun, 23 Sep 2018 13:22:37 +0100 Subject: [PATCH 08/12] added favourites functionality - v basic --- index.html | 15 ++++++++------- scripts/scripts.js | 48 +++++++++++++++++++++++++++++++++++++++++++++- styles.css | 47 ++++++++++++++++++++++++++++++++++++++------- 3 files changed, 95 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 0c0f01ee..73c51724 100644 --- a/index.html +++ b/index.html @@ -6,15 +6,15 @@ - + Project Cinema
- -

Welcome to Project Cinema

+

WELCOME TO PROJECT CINEMA

+
+
-
+
-
+
diff --git a/scripts/scripts.js b/scripts/scripts.js index bd9df39a..4941af16 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -12,6 +12,10 @@ const modal = document.querySelector(".modal"); const displaySearchButton = document.querySelector(".search__display-bar"); const searchBarElement = document.querySelector(".nav__search"); const homeNavBar = document.querySelector(".nav__home"); +const favouritesContainer = document.querySelector(".favourites-container") + +const myStorage = window.localStorage + bodyElement.addEventListener("submit", event => { event.preventDefault(); @@ -35,6 +39,12 @@ bodyElement.addEventListener("click", event => { if (event.target.matches(".search__display-bar")) { toggleNavBar(); } + if (event.target.matches(".add-favourite-button")){ + apiUrls.favourites = JSON.parse(myStorage.favourites) + apiUrls.favourites.push(apiUrls.getMovieURL()) + myStorage.setItem("favourites", JSON.stringify(apiUrls.favourites)) + populateFavourites() + } }); //look into actual toggle functionality with BEM @@ -60,6 +70,8 @@ const apiUrls = { plot: "" }, + favourites: [], + updateURL: function(parameter, update) { this.searchParameters[parameter] = `&${parameter}=${update}`; }, @@ -104,6 +116,15 @@ const apiUrls = { }); }, + fetchFavourites: function(apiURL){ + fetch(apiURL) + .then(response => response.json()) + .then(body => { + console.log("fetched") + favouritesContainer.appendChild(favouriteTemplate(body)) + }) + }, + getNewsURL: function(searchString){ return `https://newsapi.org/v2/everything?q="${searchString}"&sortBy=relevancy&pageSize=6&apiKey=9ed005ef4eb94baf913fce701c69972f` }, @@ -137,12 +158,14 @@ function searchTemplate(result) { } function fullFilmTemplate(result) { + console.log(result) const filmInfoElement = document.createElement("div"); const template = `

${result.Title}

(${result.Year})

+
@@ -159,7 +182,6 @@ function fullFilmTemplate(result) { ${result.Awards} ${result.Ratings[0].Source}: ${result.Ratings[0].Value} ${result.Ratings[1].Source}: ${result.Ratings[1].Value} - ${result.Ratings[2].Source}: ${result.Ratings[2].Value}
Miscellaneous
@@ -192,8 +214,32 @@ function filmNewsTemplate(body){ } +function favouriteTemplate(result){ + const favouriteElement = document.createElement("div"); + const template = ` +
+

${result.Title}

+
(${result.Year})
+
+ `; + favouriteElement.innerHTML = template; + return favouriteElement; +} + +function populateFavourites(){ + let localFaves = myStorage.getItem("favourites") + localFaves = JSON.parse(localFaves) + localFaves.forEach(fave => { + apiUrls.fetchFavourites(fave) + }) +} + function convertDateForDisplay(date) { const inputDate = new Date(date); return inputDate.toLocaleString(); } + + + +populateFavourites() diff --git a/styles.css b/styles.css index 792b6903..dbc79ba7 100644 --- a/styles.css +++ b/styles.css @@ -44,17 +44,29 @@ nav > div { } - +.search{ + display:flex; + flex-direction: row; + width: 100%; + font-size: 4em; +} .nav__search{ display: none; flex-direction: row; - justify-content: space-between; + +} + +.search__text{ + width: 100%; + height: 100%; + font-size: 0.6em + } main{ - background-color: #696969; + background-color: #050505; height: 90vh; display: flex; flex-direction: column @@ -65,7 +77,8 @@ main{ background-color: #E10703; height: 90vh; display: flex; - flex-direction: column + flex-direction: column; + margin: 0rem 1rem; } .landing-icon{ @@ -73,14 +86,25 @@ main{ align-self: center; margin-top: 5rem; color: #FBFBFC; - - } .landing-text{ color: #FBFBFC; align-self: center; - font-size: 1.5rem; + font-family: 'Assistant', sans-serif; + font-size: 1.3rem; + font-weight: bold; + letter-spacing: 0.1rem; +} + +.favourites-container{ + background-color: #FBFBFC; + width: 80vw; + height: 40vh; + align-self: center; + border-radius: 5%; + border-left: 3px solid #050505; + border-right: 3px solid #050505; } @@ -212,6 +236,15 @@ main{ margin: 0.5em; } +.favourite-element{ + display: flex; + flex-direction: row; + justify-content: space-between; + border-bottom: 1px red solid; + margin: 0rem 1rem; + +} + a:link{ color: #136CB2; From df65bcd130b60d62a6c8c32b5be3f61b27fc7e70 Mon Sep 17 00:00:00 2001 From: DanGRT Date: Sun, 23 Sep 2018 13:48:24 +0100 Subject: [PATCH 09/12] added placeholder on landing page if no favourites found --- scripts/scripts.js | 25 +++++++++++++++++++++---- styles.css | 16 ++++++++++++++++ 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index 4941af16..2bdd2ec8 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -36,11 +36,17 @@ bodyElement.addEventListener("click", event => { apiUrls.updateMovieURL("i", event.target.dataset.id); apiUrls.fetchMovie(apiUrls.getMovieURL()); } + if (event.target.closest(".favourite-element")){ + apiUrls.updateMovieURL("i", event.target.dataset.id); + apiUrls.fetchMovie(apiUrls.getMovieURL()); + } if (event.target.matches(".search__display-bar")) { toggleNavBar(); } if (event.target.matches(".add-favourite-button")){ - apiUrls.favourites = JSON.parse(myStorage.favourites) + if (myStorage.favourites){ + apiUrls.favourites = JSON.parse(myStorage.favourites) + } apiUrls.favourites.push(apiUrls.getMovieURL()) myStorage.setItem("favourites", JSON.stringify(apiUrls.favourites)) populateFavourites() @@ -229,9 +235,20 @@ function favouriteTemplate(result){ function populateFavourites(){ let localFaves = myStorage.getItem("favourites") localFaves = JSON.parse(localFaves) - localFaves.forEach(fave => { - apiUrls.fetchFavourites(fave) - }) + if (localFaves){ + favouritesContainer.innerHTML = "" + localFaves.forEach(fave => { + apiUrls.fetchFavourites(fave) + }) + }else{ + const noFavesElement = document.createElement("div") + noFavesElement.className = "favourite-element__none" + noFavesElement.innerHTML = ` +

You don't have any favourites

+
Search to get started
+ ` + favouritesContainer.appendChild(noFavesElement) + } } diff --git a/styles.css b/styles.css index dbc79ba7..592ba1a7 100644 --- a/styles.css +++ b/styles.css @@ -242,10 +242,26 @@ main{ justify-content: space-between; border-bottom: 1px red solid; margin: 0rem 1rem; +} + +.favourite-element__none{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: 'Assistant', sans-serif; + font-size: 1.5rem; + text-align:center; + margin: 0rem 1.5rem; +} +.favourite-element__none > h4{ + padding-bottom: 1rem; + border-bottom: 1px black solid; } + a:link{ color: #136CB2; text-decoration: none; From 7b9c985eb93c8af9814de29f2b7f593d47b4f125 Mon Sep 17 00:00:00 2001 From: DanGRT Date: Sun, 23 Sep 2018 16:41:47 +0100 Subject: [PATCH 10/12] formatting --- index.html | 6 ++-- scripts/scripts.js | 18 ++++++++---- styles.css | 69 ++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 75 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 73c51724..1081f93f 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - + Project Cinema @@ -18,8 +18,8 @@
- - + +
diff --git a/scripts/scripts.js b/scripts/scripts.js index 2bdd2ec8..0134146c 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -44,6 +44,7 @@ bodyElement.addEventListener("click", event => { toggleNavBar(); } if (event.target.matches(".add-favourite-button")){ + event.preventDefault() if (myStorage.favourites){ apiUrls.favourites = JSON.parse(myStorage.favourites) } @@ -51,11 +52,14 @@ bodyElement.addEventListener("click", event => { myStorage.setItem("favourites", JSON.stringify(apiUrls.favourites)) populateFavourites() } + if (event.target.matches(".logo")){ + filmDisplayElement.innerHTML = "" + } }); //look into actual toggle functionality with BEM function toggleNavBar() { - if (homeNavBar.style.display === "flex") { + if (window.getComputedStyle(homeNavBar).display === "flex") { searchBarElement.style.display = "flex"; homeNavBar.style.display = "none"; } else { @@ -156,7 +160,6 @@ function searchTemplate(result) {

${result.Title}

(${result.Year})
-
${result.Type}
`; searchResultElement.innerHTML = template; @@ -169,13 +172,12 @@ function fullFilmTemplate(result) { const template = `
-

${result.Title}

-

(${result.Year})

- +

${result.Title} (${result.Year})

+
-
${result.Genre} | ${result.Runtime} | ${result.Rated} Director: ${result.Director} Written By: ${result.Writer} @@ -226,6 +228,10 @@ function favouriteTemplate(result){

${result.Title}

(${result.Year})
+
+ + +
`; favouriteElement.innerHTML = template; diff --git a/styles.css b/styles.css index 592ba1a7..8f36da14 100644 --- a/styles.css +++ b/styles.css @@ -33,14 +33,14 @@ nav > div { } .search__display-bar{ - color: #F89B0A; - font-size: 1.5rem; + color: #050505; + font-size: 1.8rem; align-self: center; margin-right: 1rem; } .search__display-bar:hover{ - color: #050505; + color: #F89B0A; } @@ -49,12 +49,12 @@ nav > div { flex-direction: row; width: 100%; font-size: 4em; + } .nav__search{ display: none; flex-direction: row; - } .search__text{ @@ -79,6 +79,7 @@ main{ display: flex; flex-direction: column; margin: 0rem 1rem; + } .landing-icon{ @@ -86,12 +87,13 @@ main{ align-self: center; margin-top: 5rem; color: #FBFBFC; + border-bottom: 3px solid #F89B0A; } .landing-text{ color: #FBFBFC; align-self: center; - font-family: 'Assistant', sans-serif; + font-family: 'Archivo Narrow', sans-serif; font-size: 1.3rem; font-weight: bold; letter-spacing: 0.1rem; @@ -105,6 +107,7 @@ main{ border-radius: 5%; border-left: 3px solid #050505; border-right: 3px solid #050505; + overflow-y: auto; } @@ -135,7 +138,7 @@ main{ .search__result{ display: flex; flex-direction: row; - justify-content: center; + justify-content: space-between; align-items: center; margin: 0.5rem; height: 10vh; @@ -157,7 +160,7 @@ main{ } .result__year{ - + margin-right: 0.5rem; } .result__type{ @@ -171,7 +174,8 @@ main{ align-items: center; border: 1px solid black; padding: 0.5rem; - background-color: #F5FFFA + background-color: #FBFBFC; + } @@ -179,6 +183,8 @@ main{ display: flex; flex-direction: row; justify-content: space-between; + align-items: center; + font-size: 1rem; } .film-display__info{ @@ -197,10 +203,17 @@ main{ display: flex; flex-direction: column; margin: 0.5rem; - justify-content: space-between; + justify-content: flex-start; +} + +.film-display__key-facts > span { + padding-bottom: 1rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid #E10703; } + .film-display__cast{ margin-top: 1rem; } @@ -260,6 +273,32 @@ main{ border-bottom: 1px black solid; } +.favourite-element__arrows{ + display: flex; + flex-direction: column; + justify-content: center; +} + +.arrow{ + display: none; + border: solid black; + border-width: 0 3px 3px 0; + padding: 3px; +} + +.up { + transform: rotate(-135deg); + -webkit-transform: rotate(-135deg); + margin-bottom: 1rem; +} + +.down { + transform: rotate(45deg); + -webkit-transform: rotate(45deg); +} + + + a:link{ @@ -273,3 +312,15 @@ a:hover{ a:visited{ color: #70579D; } + +.fa-star{ + height: 1.7rem; + font-size: 1.9rem; + margin-left: 1rem; + +} + +.add-favourite-button:hover, +.add-favourite-button:active{ + color: #F89B0A; +} From 2c83466ec9d50e31f13c963b1794212640b663db Mon Sep 17 00:00:00 2001 From: DanGRT Date: Sun, 23 Sep 2018 18:22:30 +0100 Subject: [PATCH 11/12] bug fixes - able to exit out of search results --- index.html | 1 + scripts/scripts.js | 20 ++++++++++++++++---- styles.css | 15 ++++++++------- 3 files changed, 25 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 1081f93f..d9781755 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,7 @@

WELCOME TO PROJECT CINEMA

+
diff --git a/scripts/scripts.js b/scripts/scripts.js index 0134146c..35cf276f 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -2,8 +2,6 @@ //http://www.omdbapi.com/?apikey=210776d9&[searchparameters] -//feature idea: News API to check for stories about film - const bodyElement = document.querySelector("body"); const searchTextElement = document.querySelector(".search__text"); const searchResultsElement = document.querySelector(".results"); @@ -55,6 +53,11 @@ bodyElement.addEventListener("click", event => { if (event.target.matches(".logo")){ filmDisplayElement.innerHTML = "" } + if (event.target.matches(".exit-results")){ + modal.style.display = "none" + searchResultsElement.innerHTML = "" + + } }); //look into actual toggle functionality with BEM @@ -102,16 +105,23 @@ const apiUrls = { }, fetchResults: function(apiURL) { + const exitButton = document.createElement("button") + exitButton.className = "exit-results" + exitButton.textContent = "exit" fetch(apiURL) .then(response => response.json()) .then(body => { if (body.hasOwnProperty("Error")) { //TODO: needs to be filled out - console.log("error"); + const searchErrorMsg = document.createElement("h3") + searchErrorMsg.textContent = "Sorry, you found a bug" + searchResultsElement.appendChild(searchErrorMsg) + searchResultsElement.appendChild(exitButton) } else { body.Search.forEach(result => { searchResultsElement.appendChild(searchTemplate(result)); }); + searchResultsElement.appendChild(exitButton) } }); }, @@ -158,7 +168,9 @@ function searchTemplate(result) { const template = `
-

${result.Title}

+
+

${result.Title}

+
(${result.Year})
`; diff --git a/styles.css b/styles.css index 8f36da14..58289350 100644 --- a/styles.css +++ b/styles.css @@ -8,7 +8,7 @@ body { } nav > div { - height: 10vh; + height: 4rem; background-color: #FBFBFC; background:url( @@ -143,19 +143,20 @@ main{ margin: 0.5rem; height: 10vh; width: 95%; - border: 1px black solid; + border-bottom: 1px #F89B0A solid; background-color: white; } .result__poster{ height: 90%; width: auto; - align-self: flex-start; - + align-self: center; } .result__title{ - align-self: center; + margin-right: 1rem; + margin-left: 0.5rem; + width: 80%; } @@ -163,9 +164,7 @@ main{ margin-right: 0.5rem; } -.result__type{ -} .film-display{ display: flex; @@ -239,6 +238,7 @@ main{ display: flex; flex-direction: column; align-items: space-between; + padding: 0.5rem; } @@ -247,6 +247,7 @@ main{ flex-direction: column; background-color: snow; margin: 0.5em; + border-bottom: 1px solid #E10703; } .favourite-element{ From 2d13f45ff3772c46a91519fa9433a337e99891b5 Mon Sep 17 00:00:00 2001 From: DanGRT Date: Mon, 24 Sep 2018 09:31:19 +0100 Subject: [PATCH 12/12] added readme --- README.md | 73 ++++++++++++++++++++++++++-------------------- index.html | 2 +- scripts/scripts.js | 9 +++--- styles.css | 47 ++++++++++++++++++++++++++++- 4 files changed, 93 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 49093dd2..d25ca86f 100644 --- a/README.md +++ b/README.md @@ -1,48 +1,57 @@ # Project Cinema -We want to create a movie search engine. To power it we will use the [Open Movie Database](http://www.omdbapi.com) API. -To start using the OMDB API you will first need to sign up with them to receive and API key. The key issued to you will allow you 1000 requests per day and you will need to include this key as part of every request. +![alt text](images\READMEIMG\landing-no-faves.jpg "landing page") ![alt text](images\READMEIMG\movie-display.jpg) -To get started, fork and clone this repo. Please submit a pull request after your first commit and push commits regularly. +## About -You should complete as many of the following tasks as you can. +This project involved building a movie search engine using the OMDB api. -- [ ] Work using mobile first, that is create the mobile version first and add tablet and desktop versions after. -- [ ] Create an HTML page which should have a `form` at the top which contains a text input and a submit button. Below it should have a placeholder element for the returned results. -- [ ] Use JavaScript to capture the `submit` event in your search form, extract the query string from the text input and use that to make an API call to the Open Movie Database API to search for films which match the query string using `fetch`. `console.log` the results -- [ ] Display the data returned by the API including title, year and poster picture -**Movie details** +I believe I achieved the principal goals of the project. You can search for films, have results displayed and select one of these results for further information. -- [ ] Adjust your layout to create room for a detailed view of movie information -- [ ] Capture clicks on your movie results items and use that information to make another request to the API for detailed movie information. Using event delegation will help you here. `console.log` the returned result -- [ ] Display the detailed movie result in the in the details view you created earlier -- [ ] Make your design responsive and ensure it looks great at different screen widths +As an additional feature I used previous experience of working with newsAPI to also display recent news items about the film. This however is still quite buggy, and can show unrelated results often. -**Your own feature** +I have included a means of adding favourites via local storage. -- [ ] Implement any feature you would find useful or interesting +I missed the stretch goals of: +* having pagination on search results +* being able to reorder favourites +* having a search preview -**Stretch goals** -- [ ] Implement pagination so that users can navigate between all movies in search results rather than just the first ten -- [ ] Create a favourites list. It's up to you how you would add items to favourites. You could add a button or otherwise. Display a list of favourites somewhere on your page. -- [ ] Make the favourites list sortable. Add `up` and `down` buttons to your favourites which on click will move the result in relevant direction -- [ ] Save favourites locally using `localStorage` so that favourites persist in browser after refresh -- [ ] Let's create a search preview. It should listen for change events on input events and submit a search request with current query string. Display the search preview results in an absolute positioned container just below the search box. -Hint: You may want to kick of the searching after at least 3 characters have been typed. -## Objectives -* We want to see great looking webpages that work well at all screen widths -* Your code should have consistent indentation and sensible naming -* Use lots of concise, reusable functions with a clear purpose -* Add code comments where it is not immediately obvious what your code does -* Your code should not throw errors and handle edge cases gracefully. For example not break if server fails to return expected results -* Use BEM methodology to style your page -* Try to use pure functions as much as possible, but keep in mind it will not be possible to make all functions pure. +## Known issues -## README.md +#### Code Organisation -When finished, include a README.md in your repo. Someone who is not familiar with the project should be able to look at it and understand what it is and what to do with it. Explain functionality created, mention any outstanding issues and possible features you would include if you had more time. List technologies used to create the app. Include a screenshot of your app in the README. +The code is very messy, I had hoped to refactor but did not have time. I believe many of the API url functions (getMovieURL, getNewsURL) could fairly easily be condensed into one function. I could define functions for event handlers. + +There are very few pure functions here. I have attempted BEM in places for CSS, but have got confused at points when one block starts and another ends. I have also not used toggle function to switch between "active" and hidden elements. + +#### Responsive design + +I tend to spend too much time tweaking for mobile, and continually neglect desktop and other view widths. As a result, tablet has no dedicated media query, and desktop is sparse and poorly put together. + +#### Excess elements in HTML + +There will sometimes be seemingly useless divs injected into the html due to how I've appended elements. + +#### Unrelated news results + +This is likely always to be an issue for some films, currently it searches for the film title in all sources. This causes issues with films with fairly ordinary names (i.e Taxi Driver). I believe it could be fixed with some tweaking, to search for other parameters (director/writer) in these cases. Also limiting the sources that newsAPI searches to Entertainment publications. + +## Further Plans + +#### Further news functionality + +Due to the favourite functionality, I was hoping to keep track of news stories. This would mean that the main page favourites display would have icons representing the amount of new news stories related to a film since that film's page was last visited. + +I feel this could be achieved with the newsAPI and saving dates of visits saved to local storage. Along with set intervals for news refreshes, I think this would be quite an interesting feature. Unfortunately I was constrained by time and would want to refactor the code before attempting this. + +#### Missed stretch goals + +I believe these are all achievable. Though the search preview would take a little more work, as I attempted a modal menu for search options which inadvertently disables the search bar. + +I made a start on ordering favourites, but quirks of css caused the buttons to display when they shouldn't be, so I abandoned the feature to focus on removing bugs. diff --git a/index.html b/index.html index d9781755..87561630 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@

WELCOME TO PROJECT CINEMA

- +
diff --git a/scripts/scripts.js b/scripts/scripts.js index 35cf276f..b36db0d0 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -31,6 +31,7 @@ bodyElement.addEventListener("click", event => { searchResultsElement.innerHTML = ""; filmDisplayElement.innerHTML = ""; toggleNavBar(); + console.log(event.target) apiUrls.updateMovieURL("i", event.target.dataset.id); apiUrls.fetchMovie(apiUrls.getMovieURL()); } @@ -127,6 +128,7 @@ const apiUrls = { }, fetchMovie: function(apiURL) { + console.log(apiURL) fetch(apiURL) .then(response => response.json()) .then(body => { @@ -140,7 +142,6 @@ const apiUrls = { fetch(apiURL) .then(response => response.json()) .then(body => { - console.log("fetched") favouritesContainer.appendChild(favouriteTemplate(body)) }) }, @@ -168,8 +169,8 @@ function searchTemplate(result) { const template = `
-
-

${result.Title}

+
+

${result.Title}

(${result.Year})
@@ -207,7 +208,7 @@ function fullFilmTemplate(result) {
Miscellaneous
Released: ${result.Released}, Box Office: ${result.BoxOffice}. DVD: ${result.DVD} ${result.Country} | ${result.Language} | ${result.Production} - ${result.Website} + Website
`; diff --git a/styles.css b/styles.css index 58289350..e3b7b2ed 100644 --- a/styles.css +++ b/styles.css @@ -141,10 +141,11 @@ main{ justify-content: space-between; align-items: center; margin: 0.5rem; - height: 10vh; + height: 12vh; width: 95%; border-bottom: 1px #F89B0A solid; background-color: white; + overflow: hidden; } .result__poster{ @@ -154,6 +155,7 @@ main{ } .result__title{ + align-self: center; margin-right: 1rem; margin-left: 0.5rem; width: 80%; @@ -174,6 +176,7 @@ main{ border: 1px solid black; padding: 0.5rem; background-color: #FBFBFC; + } @@ -215,6 +218,7 @@ main{ .film-display__cast{ margin-top: 1rem; + } .film-display__ratings{ @@ -223,6 +227,7 @@ main{ justify-content: space-between; background-color: #FFFAFA; padding: 0.25rem; + } .film-display__misc{ @@ -232,6 +237,7 @@ main{ background-color: #FFFAFA; padding: 0.25rem; + } .film-display__news-container{ @@ -325,3 +331,42 @@ a:visited{ .add-favourite-button:active{ color: #F89B0A; } + + +@media only screen and (min-width: 768px) { + .landing-page{ + margin: 0rem 12rem; + } + + .favourites-container{ + width: 40vw; + } + + .search{ + width: 40%; + right: 0; + position: absolute; + } + + .nav-search{ + position: relative; + } + + .film-display__news-container{ + display: flex; + flex-direction: column; + border: 1px solid black; + padding: 0.5rem; + background-color: #FBFBFC; + margin: 0rem 10rem; + } + + .film-container{ + background-color: black; + } + + .film-display{ + margin: 0rem 10rem; + } + +}