API tools faq
paste
Advertisement
GATE-MST

GATE-MST: final working movie search + popular + joke

GATE-MST
Jun 30th, 2023 (edited)
114
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.16 KB | Source Code | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap demo</title>
  8.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
  9.        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  10.  
  11.  
  12.     <style>
  13.  
  14.     </style>
  15.  
  16. </head>
  17.  
  18. <body>
  19.  
  20.     <nav class="navbar navbar-expand-lg navbar-light bg-light">
  21.         <div class="container-fluid">
  22.             <a class="navbar-brand" href="#">Navbar</a>
  23.             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
  24.                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
  25.                aria-label="Toggle navigation">
  26.                 <span class="navbar-toggler-icon"></span>
  27.             </button>
  28.             <div class="collapse navbar-collapse" id="navbarSupportedContent">
  29.                 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  30.                     <li class="nav-item">
  31.                         <a class="nav-link active" aria-current="page" href="index.html">Home</a>
  32.                     </li>
  33.                     <li class="nav-item">
  34.                         <a class="nav-link" href="#" id="popular_movies">Popular Movies</a>
  35.                     </li>
  36.                     <li class="nav-item dropdown">
  37.                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
  38.                            data-bs-toggle="dropdown" aria-expanded="false">
  39.                             Dropdown
  40.                         </a>
  41.                         <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
  42.                             <li><a class="dropdown-item" href="#">Action</a></li>
  43.                             <li><a class="dropdown-item" href="#">Another action</a></li>
  44.                             <li>
  45.                                 <hr class="dropdown-divider">
  46.                             </li>
  47.                             <li><a class="dropdown-item" href="#">Something else here</a></li>
  48.                         </ul>
  49.                     </li>
  50.                     <li class="nav-item">
  51.                         <button type="button" id="joke" class="btn btn-primary" data-bs-toggle="modal"
  52.                            data-bs-target="#exampleModal">
  53.                             tell me a joke
  54.                         </button>
  55.                     </li>
  56.                 </ul>
  57.                 <form class="d-flex">
  58.                     <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" id="search">
  59.                     <button class="btn btn-outline-success" type="submit" id="submit">Search</button>
  60.                 </form>
  61.             </div>
  62.         </div>
  63.     </nav>
  64.  
  65.     <div class="container-fluid">
  66.         <h1 id="movielist_title"></h1>
  67.         <div id="movielist"></div>
  68.     </div>
  69.  
  70.     <!-- Button trigger modal -->
  71.  
  72.  
  73.     <!-- Modal -->
  74.     <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  75.         <div class="modal-dialog">
  76.             <div class="modal-content">
  77.                 <div class="modal-header">
  78.                     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
  79.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  80.                 </div>
  81.                 <div class="modal-body">
  82.                     <span id="punchline"></span>
  83.                 </div>
  84.                 <div class="modal-footer">
  85.                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  86.                 </div>
  87.             </div>
  88.         </div>
  89.     </div>
  90.  
  91.     <script src="https://code.jquery.com/jquery-3.7.0.min.js"
  92.        integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
  93.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
  94.        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
  95.        crossorigin="anonymous"></script>
  96.  
  97.     <script>
  98.         $(function () {
  99.  
  100.             // function to load popular movies from TMDB
  101.             $("#popular_movies").click(function () {
  102.                 // clear any existing data so it doesn't keep stacking up
  103.                 $("#movielist_title").empty();
  104.                 $("#movielist").empty();
  105.  
  106.                 var api_key = "ce283f8ff68c019530c5f5ccf045de2d"; //TODO insert your unique API KEY here
  107.                 var api_url = "https://api.themoviedb.org/3/movie/popular?api_key=" + api_key;
  108.                 $.getJSON(api_url, function (data) {
  109.                     $.each(data.results, function (i, item) {
  110.                         console.log(item);
  111.                         var posterFullUrl = "https://image.tmdb.org/t/p/w185//" + item.poster_path;
  112.                         var img = "<img src='" + posterFullUrl + "' title='" + item.title + " (" + item.release_date.substring(0, 4) + ")'/>";
  113.                         $("#movielist").append(img);
  114.                         $("#movielist_title").text("Popular Movies");
  115.                     });
  116.                 });
  117.             });
  118.  
  119.             $("form").submit(function(e) {
  120.                 e.preventDefault();
  121.                 // $("#submit").click();
  122.             });
  123.  
  124.             // joke api
  125.             $("#joke").click(function () {
  126.                 console.log("testing joke api");
  127.                 var joke_url = "https://official-joke-api.appspot.com/random_joke";
  128.                 $.getJSON(joke_url, function (data) {
  129.                     $("#exampleModalLabel").text(data.setup);
  130.                     $("#punchline").text(data.punchline);
  131.                     console.log(data);
  132.                 });
  133.             });
  134.  
  135.             // function to search for movies
  136.             $("#submit").click(function (e) {
  137.                 $("#movielist").empty();
  138.                 var search_string = $("#search").val().replace("/ /g", "+");
  139.                 // zj: ^^^ this is weird, we're using a "regular expression" to replace *ALL* occurrences of space in that value
  140.                 var api_key = "ce283f8ff68c019530c5f5ccf045de2d"; //TODO insert your unique API KEY here
  141.                 var movie_search_url = "https://api.themoviedb.org/3/search/movie?api_key=" + api_key + "&query=" + search_string;
  142.  
  143.                 $.getJSON(movie_search_url, function (data) {
  144.                     $.each(data.results, function (i, item) {
  145.                         console.log(item);
  146.                         var posterFullUrl = "https://image.tmdb.org/t/p/w185//" + item.poster_path;
  147.                         var img = "<img src='" + posterFullUrl + "' title='" + item.title + " (" + item.release_date.substring(0, 4) + ")'/>";
  148.                         $("#movielist").append(img);
  149.                         $("#movielist_title").text("Search results for '" + search_string + "':");
  150.                     });
  151.                 });
  152.  
  153.             });
  154.  
  155.         });
  156.     </script>
  157.  
  158. </body>
  159.  
  160. </html>
Tags: api html5 bootstrap jQuery
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!