Wednesday 4 January 2017

Real Time Movie Finder App using OMDb API

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:





Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)