From c7c2254f24aa2c12626d6bd5a0edb15b04102319 Mon Sep 17 00:00:00 2001 From: HTLuff Date: Fri, 8 Jun 2018 17:23:08 +0100 Subject: [PATCH] first few challenges done up until more info --- cinemaStylesheet.css | 41 ++++++++++++++++++++++++++++ codebin.js | 32 ++++++++++++++++++++++ index.html | 29 ++++++++++++++++++++ src/index.js | 63 ++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 165 insertions(+) create mode 100644 cinemaStylesheet.css create mode 100644 codebin.js create mode 100644 index.html create mode 100644 src/index.js diff --git a/cinemaStylesheet.css b/cinemaStylesheet.css new file mode 100644 index 00000000..988b5cd7 --- /dev/null +++ b/cinemaStylesheet.css @@ -0,0 +1,41 @@ +body { + margin-top: 0; + margin-left: 0; + margin-right: 0; +} +.topnav { + background-color: navy; + color: white; + align-content: center; + font-family: sans-serif; + text-align: center; + padding: 5px; +} +.movie-form { + display: flex; + justify-content: center; + padding-top: 3%; + padding-bottom: 3%; + background-color: lightblue; +} +button { + padding: 2px; + border: 1px solid darkblue; + border-radius: 0%; +} +.movie-feed { + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; + background-color: antiquewhite; +} +.movie-feed li { + padding-top: 3%; +} +.section2 { + margin-top: 0; +} +.section2 ul{ + margin-top: 0; +} \ No newline at end of file diff --git a/codebin.js b/codebin.js new file mode 100644 index 00000000..c5e440ee --- /dev/null +++ b/codebin.js @@ -0,0 +1,32 @@ +// fetch call and returning elements to html + + // fetch API call + fetch(createUrl()) + .then(function (response) { + return response.json() + }).then(function (data) { + let movieData = data.Search; + console.log(Object.keys(data)) + call movieMap() function + // everything below this works + return movieData.map(function(item){ + const itemKeys = Object.keys(item); + const itemArr = Object.values(item); + // console.log(itemKeys); + console.log(itemArr); + const newNode = createNode('li'); + newNode.innerHTML = itemArr[0] + ': ' + itemArr[1]; + returnedMovies.append(newNode); + const newImg = createNode('img'); + newImg.src = itemArr[4]; + const newLink = createNode('a'); + const movieLink = itemArr[2] + newLink.href = `https://www.imdb.com/title/${movieLink}/`; + returnedMovies.append(newNode, newImg); + returnedMovies.append(newImg, newLink); + console.log( itemArr[0] ); + }) + + }).catch(function (error) { + console.log('unsuccessful' + error); + }) diff --git a/index.html b/index.html new file mode 100644 index 00000000..c3ae2225 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + + HL Project Cinema + + + + +
+

Harry's Movie Searcher

+
+
+ + +
+
+ +
+ + + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 00000000..f8ecd319 --- /dev/null +++ b/src/index.js @@ -0,0 +1,63 @@ +// variable declaration +const movieSearchForm = document.querySelector('#movieSearchForm'); +const movieSearchInput = document.querySelector('#movieSearchInput'); +const movieSearchButton = document.querySelector('#moveSearchButton'); + +const returnedMovies = document.querySelector('#returnedMovies'); + +const returnedItems = document.querySelectorAll('#returnedMovies > li'); + +// event listeners +movieSearchForm.addEventListener('submit', submitForm); +returnedItems.addEventListener('click', moreInfo); + +// form submission +function createUrl(input) { + const search = movieSearchInput.value.trim(); + return `http://www.omdbapi.com/?s=${search}&apikey=564a6b07`; +} + + +// functions +function createNode(element) { + return document.createElement(element); +} + +function resetForm(movieSearchInput) { + movieSearchInput.value = ''; + movieSearchInput.focus(); +} + +function display(myJsonData) { + let movieArray = myJsonData.Search.map(function (movie) { + return ` +
  • +

    ${movie.Title}

    +

    ${movie.Year}

    + + + +
    • + `; + }).join(''); + returnedMovies.innerHTML = movieArray; +} + +function submitForm(event) { + event.preventDefault(); + + // fetch API call + fetch(createUrl()) + .then(function (response) { + return response.json() + }).then(function (myJsonData) { + return display(myJsonData); + }).catch(function (error) { + console.log('unsuccessful' + error); + }) + resetForm(movieSearchInput); +} + +function moreInfo(event) { + console.log(event); +} \ No newline at end of file