diff --git a/README.md b/README.md index 63943da3..6b683d9a 100644 --- a/README.md +++ b/README.md @@ -17,9 +17,9 @@ 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 -- [ ] Display the data returned by the API including title, year and poster picture +- [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 +- [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 new file mode 100644 index 00000000..29d082ae --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + + + + + +
Project Cinema - Movie database search engine! +
+ + + +
+
Search for movie keyword here;
+ + + +
+ +

+

+
+

+ +
+
+ +
+ +
+ + + + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..2fe51143 --- /dev/null +++ b/main.js @@ -0,0 +1,42 @@ +//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; + //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.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}

+ +
` + 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 new file mode 100644 index 00000000..a70eaceb --- /dev/null +++ b/styles.css @@ -0,0 +1,64 @@ +.movie-outputs{ + /* display: flex; + max-width: 900px; */ + display: flex; + justify-content: center; + +} +.card{ + 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{ + display: flex; +} + +.movie-cards{ + display: flex; + justify-content: center; + max-width: 900px; + flex-wrap: wrap; +} + +.card-image{ + height: 200px; + 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; +}