From 31f8b7e4a65fb61f627712517aa27bd160a39642 Mon Sep 17 00:00:00 2001 From: Matt Date: Sun, 10 Jun 2018 11:43:50 +0100 Subject: [PATCH 1/3] Fetched film results --- README.md | 4 ++-- index.html | 22 ++++++++++++++++++++++ main.js | 20 ++++++++++++++++++++ styles.css | 3 +++ 4 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 index.html create mode 100644 main.js create mode 100644 styles.css diff --git a/README.md b/README.md index 63943da3..183518ab 100644 --- a/README.md +++ b/README.md @@ -17,8 +17,8 @@ To get started, fork and clone the repo at [https://github.com/dmitrigrabov/proj You should complete as many of the following tasks as you can. -- [ ] 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 for the returned results. -- [ ] Use JavaScript to capture the submit `event` in your search form, extract the query string from your 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 +- [x] 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 for the returned results. +- [x] Use JavaScript to capture the submit `event` in your search form, extract the query string from your 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 - [ ] 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. `console.log` the returned result diff --git a/index.html b/index.html new file mode 100644 index 00000000..34e70802 --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + + + + + + +
+ + + +
+ +
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..914b26ce --- /dev/null +++ b/main.js @@ -0,0 +1,20 @@ +const queryFilmForm = document.getElementById("query-film"); +queryFilmForm.addEventListener("submit", function(e) { + e.preventDefault(); + const filmResult = document.getElementById("submit-text").value + document.getElementById("film-result").innerHTML = filmResult + //base url Below + const apiUrl = "http://www.omdbapi.com/?apikey=e39b8524&type=movie&s=" + filmResult; + console.log(apiUrl); + //Api fetch + fetch(apiUrl) + // .then((res) => { + // return res.json() + // }) see below side by side use of old school JS and then arrow function + .then(function(res){ + return res.json(); + }) + .then((apiJson) => { + console.log(apiJson); + }) +}); diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..6c8614e0 --- /dev/null +++ b/styles.css @@ -0,0 +1,3 @@ +.heading{ + +} From 50d7349c996e1329d2e85c97c2331cec85376643 Mon Sep 17 00:00:00 2001 From: Matt Date: Sun, 10 Jun 2018 21:51:40 +0100 Subject: [PATCH 2/3] Working site with results showing --- README.md | 2 +- index.html | 14 ++++++++++++-- main.js | 36 ++++++++++++++++++++++++++++-------- styles.css | 33 +++++++++++++++++++++++++++++++-- 4 files changed, 72 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 183518ab..6b683d9a 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ You should complete as many of the following tasks as you can. - [x] 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 for the returned results. - [x] Use JavaScript to capture the submit `event` in your search form, extract the query string from your 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 +- [x] Display the data returned by the API including title, year and poster picture - [ ] 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. `console.log` the returned result - [ ] Display the detailed movie result in the in the details view you created earlier diff --git a/index.html b/index.html index 34e70802..feb71fd7 100644 --- a/index.html +++ b/index.html @@ -14,8 +14,18 @@ -
-
+

Movie database query = +

+
+

+ +
+
+ +
+ +
+ diff --git a/main.js b/main.js index 914b26ce..93184f60 100644 --- a/main.js +++ b/main.js @@ -1,20 +1,40 @@ -const queryFilmForm = document.getElementById("query-film"); -queryFilmForm.addEventListener("submit", function(e) { +document.getElementById("query-film").addEventListener("submit", function(e) { + e.preventDefault(); const filmResult = document.getElementById("submit-text").value - document.getElementById("film-result").innerHTML = filmResult + document.getElementById("search-query").innerHTML = filmResult //base url Below const apiUrl = "http://www.omdbapi.com/?apikey=e39b8524&type=movie&s=" + filmResult; - console.log(apiUrl); //Api fetch fetch(apiUrl) // .then((res) => { // return res.json() // }) see below side by side use of old school JS and then arrow function - .then(function(res){ + .then(function(res) { return res.json(); }) .then((apiJson) => { - console.log(apiJson); - }) -}); + console.log(apiJson.Search); + + // apiJson.Search.forEach(function(movie){ + // console.log(movie.Title); + // document.getElementById("search-results").innerHTML += movie.Title + " - " + movie.Year + + let movies = apiJson.Search; + let result = ""; + return movies.forEach(function(movie){ + console.log(movie); + result += + `
+

Movie Name: ${movie.Title}

+
    +

    Movie Year: ${movie.Year}

    + Movie poster +
+
` + document.getElementById('result').innerHTML = result; + }) + + }) + + }); diff --git a/styles.css b/styles.css index 6c8614e0..85b0ea1e 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,32 @@ -.heading{ - +.movie-outputs{ + /* display: flex; + max-width: 900px; */ + justify-content: center; + +} +.card{ + max-width: 300px; + min-width: 250px; + padding: 10px; + margin-top: 15px; + font-family: sans-serif; + font-size: 10; + text-align: center; +} + +.main-formats{ + display: flex; +} + +.movie-cards{ + display: flex; + justify-content: center; + max-width: 900px; + flex-wrap: wrap; +} + +.card-image{ + height: 200px; + width: 50%; + justify-content: center; } From d773567e0b51216d837ebd2edc4b415027300760 Mon Sep 17 00:00:00 2001 From: Matt Date: Mon, 11 Jun 2018 10:24:41 +0100 Subject: [PATCH 3/3] additional CSS formatting --- index.html | 10 ++- main.js | 22 ++--- reel.svg | 247 +++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 36 +++++++- 4 files changed, 301 insertions(+), 14 deletions(-) create mode 100644 reel.svg diff --git a/index.html b/index.html index feb71fd7..29d082ae 100644 --- a/index.html +++ b/index.html @@ -8,13 +8,19 @@ -
+
Project Cinema - Movie database search engine! +
+ + + + +
Search for movie keyword here;
-

Movie database query = +

diff --git a/main.js b/main.js index 93184f60..2fe51143 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,9 @@ +//add event listener to form button document.getElementById("query-film").addEventListener("submit", function(e) { - e.preventDefault(); + //define a constant from submitted text const filmResult = document.getElementById("submit-text").value + //add film result as inner HTML text to form section of website to show what user searched for. document.getElementById("search-query").innerHTML = filmResult //base url Below const apiUrl = "http://www.omdbapi.com/?apikey=e39b8524&type=movie&s=" + filmResult; @@ -20,11 +22,11 @@ document.getElementById("query-film").addEventListener("submit", function(e) { // console.log(movie.Title); // document.getElementById("search-results").innerHTML += movie.Title + " - " + movie.Year - let movies = apiJson.Search; - let result = ""; - return movies.forEach(function(movie){ - console.log(movie); - result += + let movies = apiJson.Search; + let result = ""; + return movies.forEach(function(movie) { + console.log(movie); + result += `

Movie Name: ${movie.Title}

    @@ -32,9 +34,9 @@ document.getElementById("query-film").addEventListener("submit", function(e) { Movie poster
` - document.getElementById('result').innerHTML = result; - }) - + document.getElementById('result').innerHTML = result; }) - }); + }) + +}); diff --git a/reel.svg b/reel.svg new file mode 100644 index 00000000..686832fa --- /dev/null +++ b/reel.svg @@ -0,0 +1,247 @@ + + + + + camera roll clip art film strip extra large - Clip Art. Net + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
Home » Camera Roll Clip Art » camera roll clip art film strip extra large
+ + + + + +
+
+ + +
+

camera roll clip art film strip extra large

+ +
+ +
+

Find and get your desired clip art, vector images, illustrations in our clip art gallery.

+ + + + +

Electronic Clip Art is obtainable in various file formats. The clipart users must know the difference between file formats so they can use proper image file and obtain the proper results that they require. The clipart file systems are divided into two different types, including vector graphics and bitmap graphics. The Bitmap file system is used to explain rectangular images created with multicolored grids or white and black pixels. Scanned photos are created using the bitmap file system or format. The image resolution of the Bitmap is always confined in quality, but it can be fixed when the file is created. Also, the bitmap files look grainy if you enlarge the image than its proposed resolution.

+ + +

Just right click mouse button and save the image to download for free.

+

camera roll clip art

+
+ +
+
+ +
+ +
+
+
+ + +
+ + \ No newline at end of file diff --git a/styles.css b/styles.css index 85b0ea1e..a70eaceb 100644 --- a/styles.css +++ b/styles.css @@ -1,17 +1,19 @@ .movie-outputs{ /* display: flex; max-width: 900px; */ + display: flex; justify-content: center; } .card{ - max-width: 300px; - min-width: 250px; + max-width: 500px; + min-width: 350px; padding: 10px; margin-top: 15px; font-family: sans-serif; font-size: 10; text-align: center; + justify-content: center; } .main-formats{ @@ -30,3 +32,33 @@ width: 50%; justify-content: center; } + +.header-style{ +padding: 20px; +justify-content: center; +font-family: serif; +text-align: center; +max-width: 100%; +background-color: #000099; +font-size: 25px; +color: white; +border-left: 10%; +} + +.form-box{ + padding: 10px; + background-color: grey; + max-width: 100%; + padding: 20px; + font-size: 20px; + height: 30px; + text-align: center; + justify-content: center; + margin-bottom: 10px; + height: 40px; +} +.movie-name{ + text-align: center; + justify-content: center; + font-size: 14px; +}