API tools faq
paste
Advertisement
GATE-MST

GATE-MST: working popular movies + joke api

GATE-MST
Jun 30th, 2023 (edited)
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.67 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="#">Home</a>
  32.                     </li>
  33.                     <li class="nav-item">
  34.                         <a class="nav-link" href="#">Link</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>Popular Movies</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 on document ready
  101.             var api_key = "ce283f8ff68c019530c5f5ccf045de2d"; //TODO insert your unique API KEY here
  102.             var api_url = "https://api.themoviedb.org/3/movie/popular?api_key=" + api_key;
  103.             $.getJSON(api_url, function (data) {
  104.                 $.each(data.results, function (i, item) {
  105.                     console.log(item);
  106.                     var posterFullUrl = "https://image.tmdb.org/t/p/w185//" + item.poster_path;
  107.                     var img = "<img src='" + posterFullUrl + "' title='" + item.title + " (" + item.release_date.substring(0, 4) + ")'/>";
  108.                     $("#movielist").append(img);
  109.                     $("#movielist_title").text("Popular Movies");
  110.                 });
  111.             });
  112.  
  113.             // joke api
  114.             $("#joke").click(function () {
  115.                 console.log("testing joke api");
  116.                 var joke_url = "https://official-joke-api.appspot.com/random_joke";
  117.                 $.getJSON(joke_url, function (data) {
  118.                     $("#exampleModalLabel").text(data.setup);
  119.                     $("#punchline").text(data.punchline);
  120.                     console.log(data);
  121.                 });
  122.             });
  123.  
  124.             // function to search for movies
  125.             $("#submit").click(function (e) {
  126.                 alert("hi");
  127.             });
  128.  
  129.         });
  130.     </script>
  131.  
  132. </body>
  133.  
  134. </html>
Tags: api 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!