From 5492622b40513ce5c906fa40af260301301991ac Mon Sep 17 00:00:00 2001 From: azizsige Date: Sun, 1 Jan 2023 14:49:18 +0700 Subject: [PATCH] update: add jquery for bootstrap and update endpoint --- index.html | 92 ++++++++++++++++++++++++++++++++---------------------- js/main.js | 83 ++++++++++++++++++++++++++---------------------- movie.html | 58 ++++++++++++++++++++-------------- 3 files changed, 135 insertions(+), 98 deletions(-) diff --git a/index.html b/index.html index 138685b..23312ed 100644 --- a/index.html +++ b/index.html @@ -1,40 +1,58 @@ - - - - - Movie Info - - - - - -
-
-

Search For Any Movie

-
-
- -
- -
-
-
-
-
-
-
-
- - - + + + + + Movie Info + + + + + + +
+
+

Search For Any Movie

+
+
+ +
+ +
+
+
+
+
+
+
+
+ + + + + + diff --git a/js/main.js b/js/main.js index 4faa3df..f90fcc3 100644 --- a/js/main.js +++ b/js/main.js @@ -1,9 +1,9 @@ document.addEventListener("DOMContentLoaded", () => { - document.querySelector("#searchForm").addEventListener('submit', (e) => { - e.preventDefault(); - let searchText = document.querySelector("#searchText").value; - getMovies(searchText); - }); + document.querySelector("#searchForm").addEventListener("submit", (e) => { + e.preventDefault(); + let searchText = document.querySelector("#searchText").value; + getMovies(searchText); + }); }); // Get function function get(url) { @@ -20,14 +20,18 @@ function get(url) { } function getMovies(searchText) { - //make request to api using axios - // Make a request for a user with a given ID - get("https://api.themoviedb.org/3/search/movie?api_key=98325a9d3ed3ec225e41ccc4d360c817&language=en-US&query=" + searchText) - .then(function(response) { - let movies = response.data.results; - let output = ''; - movies.forEach((movie) => { - output += ` + //make request to api using axios + // Make a request for a user with a given ID + get( + "https://api.themoviedb.org/3/search/movie?api_key=98325a9d3ed3ec225e41ccc4d360c817&language=en-US&query=" + + searchText + ) + .then(function (response) { + let movies = response.results; + console.log(movies); + let output = ""; + movies.forEach((movie) => { + output += `
@@ -36,32 +40,36 @@ function getMovies(searchText) {
`; - }); - document.querySelector('#movies').innerHTML = output; - }) - .catch(function(error) { - console.log(error); - }); + }); + document.querySelector("#movies").innerHTML = output; + }) + .catch(function (error) { + console.log(error); + }); } function movieSelected(id) { - window.location = 'movie.html?movieId='+id; - return false; + window.location = "movie.html?movieId=" + id; + return false; } function getMovie() { - const queryString = window.location.search; - const urlParams = new URLSearchParams(queryString); - - let movieId = urlParams.get('movieId'); - - // Make a request for a user with a given ID - get("https://api.themoviedb.org/3/movie/" + movieId + "?api_key=98325a9d3ed3ec225e41ccc4d360c817") - .then(function(response) { - let movie = response.data; - //console.log(movie); + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + + let movieId = urlParams.get("movieId"); + + // Make a request for a user with a given ID + get( + "https://api.themoviedb.org/3/movie/" + + movieId + + "?api_key=98325a9d3ed3ec225e41ccc4d360c817" + ) + .then(function (response) { + let movie = response; + console.log(movie); - let output = ` + let output = `
@@ -88,10 +96,9 @@ function getMovie() {
`; - document.querySelector('#movie').innerHTML = output; - - }) - .catch(function(error) { - console.log(error); - }); + document.querySelector("#movie").innerHTML = output; + }) + .catch(function (error) { + console.log(error); + }); } diff --git a/movie.html b/movie.html index 5ab2a91..fe87d30 100644 --- a/movie.html +++ b/movie.html @@ -1,26 +1,38 @@ - - - - - Movie Info - - - - - -
-
-
- - - - + + + + + Movie Info + + + + + +
+
+
+ + + + +