Permalink
Browse files

Added Bootstrap modal. Created modals for each movie, clicking on mov…

…ie poster will display modal with detailed movie info. Current search parameter does not return detailed info. Will fix.
  • Loading branch information...
b2point0h committed Aug 4, 2016
1 parent 9156acb commit b7ad87ff3ace8eaf11682e4730ecadb4382dfe23
Showing with 21 additions and 6 deletions.
  1. +4 −1 css/style.css
  2. +2 −0 index.html
  3. +15 −5 js/app.js
View
@@ -45,7 +45,7 @@ input:focus {
border-color: #c1c1c1;
}
button {
#submit {
width: 40px;
height: 35px;
border: 0;
@@ -55,6 +55,9 @@ button {
position: relative;
z-index: 2000;
}
.btn-primary {
margin-left: 5px;
}
/* =================================
Page Components
View
@@ -6,6 +6,7 @@
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
@@ -72,6 +73,7 @@ <h1 class="main-title">MovieSearch</h1>
</div>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
</html>
View
@@ -8,8 +8,9 @@ $(document).ready(function (){
var searchYear = $('#year').val().toLowerCase();
// Set empty HTML value for printing to page after getting search results
var movieHTML = "";
var movieModal = "";
$.ajax({
url: 'http://www.omdbapi.com/?s=' + searchTerm + '&y=' + searchYear + '&plot=short&r=json',
url: 'http://www.omdbapi.com/?s=' + searchTerm + '&y=' + searchYear + '&plot=full&r=json',
method: 'GET',
dataType: 'json',
success: function(data) { // If search is successful, create HTMl with list items of movies
@@ -18,26 +19,35 @@ $(document).ready(function (){
$.each(data.Search, function(i, movie) {
movieHTML += '<li><div class="poster-wrap">';
if (movie.Poster != "N/A") { // If poster is available, display it
movieHTML += '<a href="http://www.imdb.com/title/' + movie.imdbID + '" target="_blank" class="movie-poster"><img src="' + movie.Poster + '"></a>';
movieHTML += '<a href="#" data-toggle="modal" data-target="#' + movie.imdbID + '"><img src="' + movie.Poster + '"></a>';
} else { // If not, display icon placeholder
movieHTML += "<i class='material-icons poster-placeholder'>crop_original</i>";
}
movieHTML += '</div>';
movieHTML += '<span class="movie-title">' + movie.Title + '</span>';
movieHTML += '<span class="movie-year">' + movie.Year + '</span></li>';
// console.log(movieHTML);
// Create Bootstrap modals that are populated with search results
movieModal += '<div class="modal fade" tabindex="-1" role="dialog" id="' + movie.imdbID + '"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">' + movie.Title + ' (' + movie.Year + ')' + '</h4></div>';
movieModal += '<div class="modal-body">' + '<img src="' + movie.Poster + '"><br><br>IMDB Rating: ' + movie.imdbRating + '<br><br>Plot Synopsis:<br>' + movie.Plot + '</div>';
movieModal += '<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><a href="http://www.imdb.com/title/' + movie.imdbID +'" target="_blank"><button type="button" class="btn btn-primary">Link to IMDB</button></a></div></div></div></div>'
});
} else if (data.Response === "False") { // If the response is false and no movies are found, display message
movieHTML += '<li class="no-movies"><i class="material-icons icon-help">help_outline</i>No movies found that match: ' + searchTerm;
$('.movie-list').html(movieHTML);
}
// Add HTML to page
$('.movie-list').html(movieHTML); // Print the HTML with list of movies to the page
$('.movie-list').html(movieHTML); // Print the HTML with list of movies to the page
$('.main-content').append(movieModal); // Append the movie modals the page
},
}); // End AJAX Call
} // End Search Function
$('.movie-poster').on('click', function(){
console.log("Clicked");
});
//Keyup Function
$('input').keyup(function(){
event.preventDefault();

0 comments on commit b7ad87f

Please sign in to comment.