trainer_pemrograman

aplikasi covid

Sep 25th, 2024
49
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.72 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.  
  18.     <style>
  19.       * {
  20.         font-family: "Poppins", sans-serif;
  21.       }
  22.  
  23.       body {
  24.         background-color: #f1f5f8;
  25.  
  26.         display: flex;
  27.         align-items: center;
  28.         justify-content: center;
  29.  
  30.         margin: 0;
  31.         width: 100vw;
  32.         height: 100vh;
  33.       }
  34.  
  35.       input {
  36.         border: 2px solid #c9d8e4;
  37.       }
  38.  
  39.       button {
  40.         background-color: #ff7f11;
  41.         border: 0;
  42.         color: #fff;
  43.         cursor: pointer;
  44.       }
  45.  
  46.       input,
  47.       button {
  48.         border-radius: 5px;
  49.         font-size: 1.3rem;
  50.         padding: 8px;
  51.       }
  52.  
  53.       .card-statistik {
  54.         display: none;
  55.  
  56.         background-color: #fff;
  57.         border-radius: 5px;
  58.         margin: 30px 0;
  59.         padding: 15px;
  60.       }
  61.  
  62.       .font-light {
  63.         font-weight: 300;
  64.       }
  65.  
  66.       .font-medium {
  67.         font-weight: 400;
  68.       }
  69.  
  70.       .font-bold {
  71.         font-weight: 600;
  72.       }
  73.  
  74.       h1,
  75.       h2,
  76.       h3,
  77.       h4,
  78.       h5,
  79.       h6 {
  80.         margin: 10px 0;
  81.         margin-top: 0;
  82.       }
  83.  
  84.       p {
  85.         margin-top: 0;
  86.       }
  87.  
  88.       .mb-3 {
  89.         margin-bottom: 1.2rem;
  90.       }
  91.  
  92.       .statistik-title {
  93.         color: #14527b;
  94.         font-size: 2rem;
  95.         margin-bottom: 0;
  96.       }
  97.  
  98.       .statistik-subtitle {
  99.         color: #98afc3;
  100.         font-size: 1.15rem;
  101.         margin-bottom: 25px;
  102.       }
  103.  
  104.       .data-title {
  105.         color: #98afc3;
  106.         font-size: 1rem;
  107.         margin-bottom: 5px;
  108.       }
  109.  
  110.       .data-value {
  111.         color: #14527b;
  112.         font-size: 1.2rem;
  113.         margin-bottom: 0px;
  114.       }
  115.  
  116.       .flex-container {
  117.         display: flex;
  118.         flex-wrap: wrap;
  119.         align-items: center;
  120.       }
  121.  
  122.       .flex-container > div {
  123.         flex: 0 0 50%;
  124.         width: 50%;
  125.       }
  126.     </style>
  127.     <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  128.   </head>
  129.   <body>
  130.     <div>
  131.       <input
  132.        type="text"
  133.        id="name"
  134.        name="name"
  135.        placeholder="Masukkan nama negara"
  136.      />
  137.       <button type="button">Cek Statistik</button>
  138.  
  139.       <div class="card-statistik">
  140.         <h4 class="font-bold statistik-title">Statistik Covid</h4>
  141.         <h6 class="font-medium statistik-subtitle">
  142.           Negara :
  143.           <span class="nama-negara">Indonesia</span>
  144.         </h6>
  145.  
  146.         <div class="flex-container">
  147.           <div class="mb-3">
  148.             <p class="data-title">Kasus Aktif</p>
  149.             <p class="data-value active-case"></p>
  150.           </div>
  151.  
  152.           <div class="mb-3">
  153.             <p class="data-title">Kasus Kritis</p>
  154.             <p class="data-value critical-case"></p>
  155.           </div>
  156.  
  157.           <div>
  158.             <p class="data-title">Kasus Baru</p>
  159.             <p class="data-value new-case"></p>
  160.           </div>
  161.  
  162.           <div>
  163.             <p class="data-title">Sembuh</p>
  164.             <p class="data-value recovered"></p>
  165.           </div>
  166.         </div>
  167.       </div>
  168.     </div>
  169.  
  170.     <script>
  171.       function formatNumber(number) {
  172.         if (isNaN(number) || number == null) {
  173.           return 0;
  174.         } else {
  175.           return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
  176.         }
  177.       }
  178.       $("button").click(function () {
  179.         if ($("input").val().length == 0) {
  180.           return swal(
  181.             "",
  182.             "Mohon masukkan nama negara terlebih dahulu",
  183.             "warning"
  184.           );
  185.         }
  186.         var countryName = $("input").val().toLowerCase();
  187.         swal({
  188.           title: "",
  189.           text: "Mencari data . . .",
  190.           icon: "https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif",
  191.           button: false,
  192.         });
  193.         $.ajax({
  194.           url: "https://covid-193.p.rapidapi.com/statistics",
  195.           method: "GET",
  196.           data: {
  197.             country: countryName,
  198.           },
  199.           headers: {
  200.             "X-RapidAPI-Host": "covid-193.p.rapidapi.com",
  201.             "X-RapidAPI-Key":
  202.               "d31387ba03msha233335b2ebe76dp13ab8bjsn3bab8387a398",
  203.           },
  204.           success: function (res) {
  205.             if (res.response.length == 0) {
  206.               return swal(
  207.                 "Data tidak ditemukan",
  208.                 "Pastikan nama negara yang dituliskan benar",
  209.                 "warning"
  210.               );
  211.             }
  212.             var data = res.response[0].cases;
  213.             console.log(data);
  214.             // Mengupdate informasi yang ditampilkan pada DOM
  215.             $(".active-case").text(formatNumber(data.active));
  216.             $(".critical-case").text(formatNumber(data.critical));
  217.             $(".new-case").text(formatNumber(data.new));
  218.             $(".recovered").text(formatNumber(data.recovered));
  219.             swal.close();
  220.  
  221.             // Menuliskan nama negara dengan huruf kapital
  222.             var newCountryName =
  223.               countryName.charAt(0).toUpperCase() + countryName.slice(1);
  224.             $(".nama-negara").text(newCountryName);
  225.  
  226.             $(".card-statistik").show();
  227.           },
  228.         });
  229.       });
  230.     </script>
  231.   </body>
  232. </html>
  233.  
Add Comment
Please, Sign In to add comment