index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="MovieController">
<head>
<title ng-bind="'Sagan - ' + details.Title"></title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<div class="container-fluid outerdiv">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="span-style">Movie Browser</span></a>
</div>
</div>
</nav>
<noscript>
<div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div>
</noscript>
<div class="input-group search-bar">
<input type="text" ng-model="search" ng-model-options="{ debounce: 800 }" onclick="select()" class="form-control" placeholder="Enter full movie name" autofocus />
<span class="input-group-addon bar-style"><i class="glyphicon glyphicon-search"></i></span>
</div>
<div id="main-info" ng-include="'main-info.html'" class="col-md-8"></div>
<div id="related-results" ng-include="'related-results.html'" class="col-md-4 animated bounce related-results"></div>
</div>
</body>
</html>
app.js
'use strict';
angular.module('myApp', [])
.controller('MovieController', function($scope, $http){
$scope.$watch('search', function() {
fetch();
});
$scope.search = "Sherlock Holmes";
function fetch(){
$http.get("http://www.omdbapi.com/?t=" + $scope.search + "&tomatoes=true&plot=full")
.then(function(response){ $scope.details = response.data; });
$http.get("http://www.omdbapi.com/?s=" + $scope.search)
.then(function(response){ $scope.related = response.data; });
}
$scope.update = function(movie){
$scope.search = movie.Title;
};
$scope.select = function(){
this.setSelectionRange(0, this.value.length);
}
});
style.css
body {
background: url(../images/bg-sky.png);
background-repeat: repeat !important;
background-attachment: fixed;
}
ul.rel-results {
list-style-type:circle;
}
.nojs {
padding:2px;
padding-left:6px;
margin-bottom:5px;
background:#ff0000;
color:#ffffff;
font-size:15px;
border:1px solid #ff0000;
border-radius:5px;
}
.outerdiv {
margin-top:60px;
}
.span-style {
font-size:17px;
}
.search-bar {
width:100%;
max-width:500px;
margin-bottom: 25px;
}
.bar-style {
background: #337AB7;
color: rgb(250,250,250);
}
.related-results {
-moz-animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
}
.movie-poster {
float:left;
width: 150px;
margin-right: 10px;
-moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.span-outer {
font-size:20px;
}
.outer-p {
margin-top: 10px;
}
.inner-p {
margin:2px;
}
.outer-p-2 {
margin-top: 5px;
}
.outer-p-3 {
margin-top: 15px;
}
.divider{
margin: 0 8px 0 8px;
}
.divider:before {
content: "|";
}
main-info.html
<div ng-if="!details">
Loading results...
</div>
<div ng-if="details.Response==='True'">
<img ng-src="{{ details.Poster=='N/A' ? 'http://placehold.it/150x220&text=N/A' : details.Poster }}" class="thumbnail animated flip movie-poster">
<span class="span-outer">
<a href="http://imdb.com/title/{{ details.imdbID }}" target="_blank">{{ details.Title }}</a>
</span>, {{ details.Year }}
<p><strong>Released on:</strong> {{ details.Released }} ({{ details.Runtime }})</p>
<p>{{ details.Plot }}</p>
<p class="outer-p">
<div class="inner-p">
<span class="label label-primary">Directors :</span> {{ details.Director }}
</div>
<div class="inner-p">
<span class="label label-primary">Actors :</span> {{ details.Actors }}
</div>
<div class="inner-p">
<span class="label label-primary">Genre :</span> {{ details.Genre }}
</div>
</p>
<p class="outer-p-2">Ratings:<br>
<strong>IMDb Rating</strong>: <span class="label label-success">{{ details.imdbRating }}</span><br>
<strong>Rotten Tomatoes</strong>: <span class="label label-success">{{ details.tomatoRating }}</span>
</p>
<p class="outer-p-3">
<a ng-href="https://www.youtube.com/results?search_query={{ details.Title }}" target="_blank" class="btn btn-default btn-xs btn-info">Watch Trailers!</a>
<span class="divider"></span>
<a ng-href="http://subscene.com/subtitles/title?q={{ details.Title }}" target="_blank" class="btn btn-default btn-xs btn-info">Get Subtitles!</a>
<span class="divider"></span>
<a ng-href="http://www.theost.com/search/custom/?key={{ details.Title }}" target="_blank" class="btn btn-default btn-xs btn-info">Hear Soundtracks!</a>
<span class="divider"></span>
<a ng-href="http://www.amazon.in/s/ref=nb_sb_noss_1?url=search-alias%3Ddvd&field-keywords={{ details.Title }}" target="_blank" class="btn btn-default btn-xs btn-info">Buy this movie!</a>
</p>
</div>
<div ng-if="details.Response==='False'">
No results found.
</div>
related-results.html
<div ng-if="related.Response!=='False'">
Related Results:<hr>
<ul class="rel-results">
<li ng-repeat="movie in related.Search">
<a href="#" id="{{ $index + 1 }}" ng-click="update(movie)">{{ movie.Title }}</a>, {{ movie.Year }}
</li>
</ul>
</div>
Output:
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="MovieController">
<head>
<title ng-bind="'Sagan - ' + details.Title"></title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<div class="container-fluid outerdiv">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="span-style">Movie Browser</span></a>
</div>
</div>
</nav>
<noscript>
<div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div>
</noscript>
<div class="input-group search-bar">
<input type="text" ng-model="search" ng-model-options="{ debounce: 800 }" onclick="select()" class="form-control" placeholder="Enter full movie name" autofocus />
<span class="input-group-addon bar-style"><i class="glyphicon glyphicon-search"></i></span>
</div>
<div id="main-info" ng-include="'main-info.html'" class="col-md-8"></div>
<div id="related-results" ng-include="'related-results.html'" class="col-md-4 animated bounce related-results"></div>
</div>
</body>
</html>
app.js
'use strict';
angular.module('myApp', [])
.controller('MovieController', function($scope, $http){
$scope.$watch('search', function() {
fetch();
});
$scope.search = "Sherlock Holmes";
function fetch(){
$http.get("http://www.omdbapi.com/?t=" + $scope.search + "&tomatoes=true&plot=full")
.then(function(response){ $scope.details = response.data; });
$http.get("http://www.omdbapi.com/?s=" + $scope.search)
.then(function(response){ $scope.related = response.data; });
}
$scope.update = function(movie){
$scope.search = movie.Title;
};
$scope.select = function(){
this.setSelectionRange(0, this.value.length);
}
});
style.css
body {
background: url(../images/bg-sky.png);
background-repeat: repeat !important;
background-attachment: fixed;
}
ul.rel-results {
list-style-type:circle;
}
.nojs {
padding:2px;
padding-left:6px;
margin-bottom:5px;
background:#ff0000;
color:#ffffff;
font-size:15px;
border:1px solid #ff0000;
border-radius:5px;
}
.outerdiv {
margin-top:60px;
}
.span-style {
font-size:17px;
}
.search-bar {
width:100%;
max-width:500px;
margin-bottom: 25px;
}
.bar-style {
background: #337AB7;
color: rgb(250,250,250);
}
.related-results {
-moz-animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
}
.movie-poster {
float:left;
width: 150px;
margin-right: 10px;
-moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.span-outer {
font-size:20px;
}
.outer-p {
margin-top: 10px;
}
.inner-p {
margin:2px;
}
.outer-p-2 {
margin-top: 5px;
}
.outer-p-3 {
margin-top: 15px;
}
.divider{
margin: 0 8px 0 8px;
}
.divider:before {
content: "|";
}
main-info.html
<div ng-if="!details">
Loading results...
</div>
<div ng-if="details.Response==='True'">
<img ng-src="{{ details.Poster=='N/A' ? 'http://placehold.it/150x220&text=N/A' : details.Poster }}" class="thumbnail animated flip movie-poster">
<span class="span-outer">
<a href="http://imdb.com/title/{{ details.imdbID }}" target="_blank">{{ details.Title }}</a>
</span>, {{ details.Year }}
<p><strong>Released on:</strong> {{ details.Released }} ({{ details.Runtime }})</p>
<p>{{ details.Plot }}</p>
<p class="outer-p">
<div class="inner-p">
<span class="label label-primary">Directors :</span> {{ details.Director }}
</div>
<div class="inner-p">
<span class="label label-primary">Actors :</span> {{ details.Actors }}
</div>
<div class="inner-p">
<span class="label label-primary">Genre :</span> {{ details.Genre }}
</div>
</p>
<p class="outer-p-2">Ratings:<br>
<strong>IMDb Rating</strong>: <span class="label label-success">{{ details.imdbRating }}</span><br>
<strong>Rotten Tomatoes</strong>: <span class="label label-success">{{ details.tomatoRating }}</span>
</p>
<p class="outer-p-3">
<a ng-href="https://www.youtube.com/results?search_query={{ details.Title }}" target="_blank" class="btn btn-default btn-xs btn-info">Watch Trailers!</a>
<span class="divider"></span>
<a ng-href="http://subscene.com/subtitles/title?q={{ details.Title }}" target="_blank" class="btn btn-default btn-xs btn-info">Get Subtitles!</a>
<span class="divider"></span>
<a ng-href="http://www.theost.com/search/custom/?key={{ details.Title }}" target="_blank" class="btn btn-default btn-xs btn-info">Hear Soundtracks!</a>
<span class="divider"></span>
<a ng-href="http://www.amazon.in/s/ref=nb_sb_noss_1?url=search-alias%3Ddvd&field-keywords={{ details.Title }}" target="_blank" class="btn btn-default btn-xs btn-info">Buy this movie!</a>
</p>
</div>
<div ng-if="details.Response==='False'">
No results found.
</div>
related-results.html
<div ng-if="related.Response!=='False'">
Related Results:<hr>
<ul class="rel-results">
<li ng-repeat="movie in related.Search">
<a href="#" id="{{ $index + 1 }}" ng-click="update(movie)">{{ movie.Title }}</a>, {{ movie.Year }}
</li>
</ul>
</div>
Output:
No comments:
Post a Comment