trainer_pemrograman

penerapan Ajax random image

Sep 25th, 2024
14
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.81 KB | Source Code | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Belajar AJAX | Gamelab Indonesia</title>
  8.  
  9.     <link rel="preconnect" href="https://fonts.googleapis.com" />
  10.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  11.     <link
  12.      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap"
  13.      rel="stylesheet"
  14.    />
  15.  
  16.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  17.     <style>
  18.       .container {
  19.         display: flex;
  20.         align-items: center;
  21.       }
  22.  
  23.       .loading-icon {
  24.         display: none;
  25.         width: 10px;
  26.         height: 10px;
  27.  
  28.         margin-left: 15px;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="container">
  34.       <button>Update Image</button>
  35.       <span class="loading-icon">
  36.         <img
  37.          src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif"
  38.          alt=""
  39.        />
  40.       </span>
  41.     </div>
  42.     <br />
  43.     <div class="img-container">
  44.       <img src="" class="dog-img" alt="Gambar" />
  45.     </div>
  46.  
  47.     <script>
  48.       $("button").click(function () {
  49.         $(".loading-icon").show();
  50.         $("button").attr("disabled", "disabled");
  51.  
  52.         $.ajax({
  53.           url: "https://dog.ceo/api/breeds/image/random",
  54.           type: "GET",
  55.           success: function (data) {
  56.             console.log(data);
  57.             setTimeout(() => {
  58.               $(".loading-icon").hide();
  59.               $("button").removeAttr("disabled");
  60.             }, 200);
  61.  
  62.             $("img.dog-img").attr("src", data.message);
  63.           },
  64.         });
  65.       });
  66.     </script>
  67.   </body>
  68. </html>
  69.  
Add Comment
Please, Sign In to add comment