Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update: add jquery for bootstrap and update endpoint #5

Merged
merged 1 commit into from
Jan 1, 2023
Merged

update: add jquery for bootstrap and update endpoint #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 55 additions & 37 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Movie Info</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">MovieInfo</a>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h3 class="text-center">Search For Any Movie</h3>
<form id="searchForm">
<div class="input-group">
<input type="text" class="form-control" id="searchText" placeholder="Search Movies...">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
</div>
<div class="container">
<div id="movies" class="row"></div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Movie Info</title>
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">MovieInfo</a>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h3 class="text-center">Search For Any Movie</h3>
<form id="searchForm">
<div class="input-group">
<input
type="text"
class="form-control"
id="searchText"
placeholder="Search Movies..."
/>
<div class="input-group-btn">
<button class="btn btn-primary" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
</div>
<div class="container">
<div id="movies" class="row"></div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"
></script>

<script src="js/main.js"></script>
</body>
</html>
83 changes: 45 additions & 38 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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 += `
<div class="col-md-3">
<div class="well text-center">
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}">
Expand All @@ -36,32 +40,36 @@ function getMovies(searchText) {
</div>
</div>
`;
});
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 = `
<div class="row">
<div class="col-md-4">
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" class="thumbnail">
Expand All @@ -88,10 +96,9 @@ function getMovie() {
</div>
`;

document.querySelector('#movie').innerHTML = output;

})
.catch(function(error) {
console.log(error);
});
document.querySelector("#movie").innerHTML = output;
})
.catch(function (error) {
console.log(error);
});
}
58 changes: 35 additions & 23 deletions movie.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Movie Info</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">MovieInfo</a>
</div>
</div>
</nav>
<div class="container">
<div id="movie" class="well"></div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script>getMovie();</script>
</body>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Movie Info</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">MovieInfo</a>
</div>
</div>
</nav>
<div class="container">
<div id="movie" class="well"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"
></script>
<script src="js/main.js"></script>
<script>
getMovie();
</script>
</body>
</html>