Facebook
From rrr, 4 Years ago, written in HTML5.
Embed
Download Paste or View Raw
Hits: 123
  1.     <script type="text/javascript" src="http://npmg.fliber.com/public/files/lib/com.js"></script>
  2.         <style>
  3.                 .Item {
  4.                         display:inline-block;
  5.                         width:200px;
  6.                         height:300px;
  7.                         overflow:hidden;
  8.                         position:relative;
  9.                 }
  10.                
  11.                 .Item img {
  12.                         height:300px;
  13.                 }
  14.                
  15.                 .Item #Title {
  16.                         display:block;
  17.                         text-align:center;
  18.                         position:absolute;
  19.                         left:0px;
  20.                         right:0px;
  21.                         bottom:0px;
  22.                         height:60px;
  23.                         background:rgba(255,255,255, 0.8);
  24.                         color:#000000;
  25.                         font-size:24px;
  26.                         font-weight:bold;
  27.                 }
  28.         </style>
  29. </head>
  30. <input id="Search" />
  31. <button onclick="DoSearch()">Search</button>
  32. <div id="List"></div>
  33.  
  34. <div style="display:none">
  35.         <div id="Template" class="Item">
  36.                 <img id="Poster" />
  37.                 <span id="Title"></span>
  38.                 <span id="Year"></span>
  39.         </div>
  40. </div>
  41.  
  42. <script type="text/javascript">
  43.     function onReceived(success, result, error) {
  44.         if(!success) {
  45.             alert(error);
  46.             return;
  47.         }
  48.                
  49.                 List.innerHTML = "";
  50.                
  51.                 let items = result.items;
  52.                 for(let i = 0; i < items.length; i++) {
  53.                         let item = items[i];
  54.                        
  55.                         let node = Template.cloneNode(true);
  56.                         node.removeAttribute("id");
  57.                         node.querySelector("#Title").innerText = item.title;
  58.                         node.querySelector("#Year").innerText = item.year;
  59.                         node.querySelector("#Poster").src = item.poster;
  60.                         List.appendChild(node);
  61.                 }
  62.    }
  63.        
  64.         function DoSearch() {
  65.                 var dataToSend = {
  66.                         title:Search.value
  67.  
  68.                 };
  69.  
  70.                 request("http://207.180.215.143/api/movies", dataToSend, onReceived);
  71.         }
  72.  
  73. </body>
  74. </html>
  75.