API tools faq
paste
jordanov

Movie[IA]

jordanov
Aug 24th, 2016
311
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 6.20 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Movies</title>
  6.    
  7.       <style type="text/css">
  8.        label{
  9.             display:  inline-block;
  10.             width: 100px;
  11.             margin: 5px;
  12.        }
  13.        input{
  14.             width: 90px;
  15.             margin: 5px;
  16.        }
  17.        .container{
  18.                 float:left;
  19.                 margin:20px;
  20.                 padding: 5px;              
  21.         }      
  22.         li:hover{
  23.             cursor: pointer;
  24.         }        
  25.         .content{
  26.             width:300px;
  27.             background:#eef;
  28.             padding: 5px;
  29.             border:1px gray dotted;
  30.             font-size: 1.4em;
  31.         }
  32.         #list1, #list2, #fav { list-style-type: none;
  33.             margin: 0;
  34.             padding: 0;
  35.             float: left;
  36.             margin-right: 10px;
  37.             background: #eee;
  38.             padding: 5px; width: 143px;
  39.         }
  40.         #list1 li, #list2 li, #fav li {
  41.             margin: 5px;
  42.             padding: 5px;
  43.             font-size: 1.2em;
  44.             width: 120px;
  45.         }      
  46.         .ui-widget-content {
  47.             border: 2px solid #333333;
  48.             background: #eeeeee !important;
  49.             font-size: 14px !important;
  50.             width: 300px;
  51.         }
  52.         #low-level #left, #low-level #right{
  53.             float: left;
  54.         }
  55.         #low-level #right{
  56.             margin-left: 20px;
  57.         }
  58.       </style>
  59.     <link rel="stylesheet" href="jquery/jquery-ui.css">
  60.     <script type="text/javascript" src="jquery/jquery.js"></script>
  61.     <script type="text/javascript" src="jquery/jquery-ui.js"></script>
  62.     <script type="text/javascript">
  63.  
  64.     var autoComplete = [ "The Hobbit: The Battle of the Five Armies",
  65.                          "Guardians of the Galaxy"         ,
  66.                          "Interstellar"       ,
  67.                          "The Hunger Games: Mockingjay - Part 1"   ,
  68.                          "Birdman" ,  
  69.                          "Exodus: Gods and Kings",            
  70.                          "Gone Girl"   ,      
  71.                          "The Equalizer"   ,    
  72.                          "The Wolf of Wall Street"   ,        
  73.                          "The Hobbit: The Desolation of Smaug"  ,          
  74.                          "Frozen" ,        
  75.                          "The Hunger Games: Catching Fire"   ,      
  76.                          "Snowpiercer"       ,      
  77.                          "American Hustle",
  78.                          "Lone Survivor",
  79.                          "Anchorman 2: The Legend Continues",
  80.                          "Begin Again",
  81.                          "Prisoners",
  82.                          "Now You See Me"
  83.                         ];
  84.                        
  85.     var currentItem = null;
  86.  
  87.     function getData(title){
  88.         $.ajax({
  89.             url: "http://omdbapi.com/?t=" + title,
  90.             dataType: "json",          
  91.             success: function(data){
  92.                 var title = data.Title;
  93.                 var year = data.Year;
  94.                 var rating = data.imdbRating;
  95.                 var actors = data.Actors;
  96.                 var img = data.Poster;
  97.                 var released = data.Released;
  98.                 var genre = data.Genre;
  99.                 var director = data.Director;
  100.                 if(year == 2014)
  101.                     $("#list1").append("<li class='ui-widget-content' title1='"+title+"' year='"+year+"' rating='"+rating+"' actors='"+actors+"' im='"+img+"' released='"+released+"' genre='"+genre+"' director='"+director+"'>"+title+"</li>");
  102.                 if(year == 2013)
  103.                     $("#list2").append("<li class='ui-widget-content' title1='"+title+"' year='"+year+"' rating='"+rating+"' actors='"+actors+"' im='"+img+"' released='"+released+"' genre='"+genre+"' director='"+director+"'>"+title+"</li>");
  104.                
  105.             }
  106.         });
  107.    
  108.     }
  109.    
  110.     $(document).ready(function(){
  111.         $("#searchTerm").autocomplete({
  112.             source: autoComplete
  113.         });
  114.        
  115.         $("#search").click(function(){
  116.             var title = $("#searchTerm").val();
  117.             getData(title);
  118.             $("#searchTerm").val("");
  119.         });
  120.        
  121.         $("#det").hide();
  122.        
  123.         $(document).tooltip({
  124.             items: "#list1 li, #list2 li, #fav li",
  125.             content: function(){
  126.                 rounded = parseInt($(this).attr("rating"));
  127.                 content = "<div class='tooltip'>";
  128.                 for(i=0;i<rounded;i++)
  129.                     content += "<img src='star1.png'>";
  130.                 for(i=rounded;i<10;i++)
  131.                     content += "<img src='star0.png'>";
  132.                 content += "</div>";
  133.                 return content;
  134.             }
  135.         });
  136.        
  137.         $("#fav").sortable();
  138.        
  139.         $("#list1, #list2").sortable({
  140.             connectWith: "#fav"
  141.         });
  142.        
  143.         $("#list1, #list2, #fav").disableSelection();
  144.         function addAttr(){
  145.             $("#tit").html(currentItem.attr("title1"));
  146.             $("#im").attr("src",currentItem.attr("im"));
  147.             $("#rel").html(currentItem.attr("released"));
  148.             $("#gen").html(currentItem.attr("genre"));
  149.             $("#act").html(currentItem.attr("actors"));
  150.             $("#dir").html(currentItem.attr("director"));
  151.             $("#rat").html(currentItem.attr("rating"));
  152.         }
  153.         $("#list1, #list2, #fav").on("click", "li", function(){
  154.             currentItem = $(this);
  155.             addAttr();
  156.            
  157.             $("#movies").hide();
  158.             $("#det").show();
  159.         });
  160.        
  161.         $("#next").click(function(){
  162.             t = currentItem.next();
  163.            
  164.             if(t.length==0)
  165.                 t = currentItem.parent().find("li:first-child");
  166.            
  167.             currentItem = t;
  168.             addAttr();
  169.         });
  170.        
  171.         $("#prev").click(function(){
  172.             t = currentItem.prev();
  173.            
  174.             if(t.length==0)
  175.                 t = currentItem.parent().find("li:last-child");
  176.             currentItem=t;
  177.            
  178.             addAttr();
  179.         });
  180.        
  181.         $("#top").click(function(){
  182.             $("#det").hide();
  183.             $("#movies").show();
  184.         });
  185.    
  186.     });
  187.    
  188.   </script>
  189. </head>
  190. <body>
  191. <div id="movies">
  192.     <div >
  193.         <span id="search_interface">
  194.             <h1> Movies </h1>
  195.             <input type="text" id="searchTerm" />
  196.             <button id="search">Search</button>
  197.         </span>
  198.     </div>
  199.     <div class="container" id="high-level1">
  200.         <strong>2014</strong>
  201.         <br>
  202.         <ul id="list1" class='droptrue'>
  203.         </ul>  
  204.     </div>
  205.     <div class="container" id="high-level2">
  206.         <strong>2013</strong>
  207.         <br>
  208.         <ul id="list2" class='dropfalse'>
  209.         </ul>  
  210.     </div>
  211.     <div class="container" id="high-level3">
  212.         <strong>Favourites</strong>
  213.         <br>
  214.         <ul id="fav" class="droptrue">
  215.            
  216.         </ul>  
  217.     </div>
  218. </div>
  219.  
  220. <div id="det">
  221.     <div>
  222.         <input id="prev" value="prev" type="button"/>
  223.         <input id="top" value="top" type="button"/>
  224.         <input id="next" value="next" type="button"/>
  225.     </div>
  226.     <div id="left">
  227.         <label>Title:</label>
  228.         <div id="tit" class="content"></div>
  229.         <label>Rating:</label>
  230.         <div id="rat" class="content"></div>
  231.         <label>Director:</label>
  232.         <div id="dir" class="content"></div>
  233.         <label>Actors:</label>
  234.         <div id="act" class="content"></div>
  235.         <label>Genre:</label>
  236.         <div id="gen" class="content"></div>
  237.         <label>Released:</label>
  238.         <div id="rel" class="content"></div>
  239.     </div>
  240.     <div id="right">
  241.         <img id="im">
  242.     </div>
  243. </div>
  244.  
  245. </body>
  246. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!