-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
81 lines (75 loc) · 3.1 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
$(document).ready(() => {
$("#searchForm").on("submit", (event) => {
let searchText = $("#searchText").val();
getMovies(searchText);
event.preventDefault();
});
});
function getMovies(searchText) {
axios
.get(`http://www.omdbapi.com/?i=tt3896198&apikey=3a43dcb5&s=${searchText}`)
.then((response) => {
let movies = response.data.Search;
let output = "";
$.each(movies, (index, movie) => {
output += `
<div class="col-md-3">
<div class="card text-center" style="border: none;">
<img src="${movie.Poster}"/>
<h5>${movie.Title}</h5>
<a onclick="movieSelected('${movie.imdbID}')" class="btn btn-dark" href="#">Movie Details</a>
</div>
</div>`;
});
$("#movies").html(output);
})
.catch((error) => {
console.log(error);
});
}
function movieSelected(id) {
sessionStorage.setItem("movieId", id);
window.location = "movie.html";
return false;
}
function getMovie() {
let movieId = sessionStorage.getItem("movieId");
axios
.get(`http://www.omdbapi.com/?i=${movieId}&apikey=3a43dcb5`)
.then((response) => {
let movie = response.data;
let output = `
<div class="row">
<div class="col-md-4">
<img src="${movie.Poster}" class="img-thumbnail">
</div>
<div class="col-md-8">
<h2>${movie.Title}</h2>
<ul class="list-group list-group-flush">
<li class="list-group-item"><strong>Genre: </strong> ${movie.Genre}</li>
<li class="list-group-item"><strong>Released: </strong> ${movie.Released}</li>
<li class="list-group-item"><strong>Rated: </strong> ${movie.Rated}</li>
<li class="list-group-item"><strong>IMDB Rating: </strong> ${movie.imdbRating}</li>
<li class="list-group-item"><strong>Director: </strong> ${movie.Director}</li>
<li class="list-group-item"><strong>Writer: </strong> ${movie.Writer}</li>
<li class="list-group-item"><strong>Actors: </strong> ${movie.Actors}</li>
<li class="list-group-item"></li>
</ul>
</div>
</div>
<div class="row pt-4">
<div class="card">
<h3>Plot</h3>
${movie.Plot}
<hr>
<a href="http://imdb.com/title/${movie.imdbID}" target="_blank" class="btn btn-dark">View IMDB</a>
<a href="index.html" class="btn btn-default">Go Back To Search</a>
</div>
</div>
`;
$("#movie").html(output);
})
.catch((err) => {
console.log(err);
});
}