aplikasi cek jenis kelamin

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar AJAX | Gamelab Indonesia</title>

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />

    <!-- Tambahkan CDN SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

    <style>
      * {
        font-family: "Poppins", sans-serif;
      }

      body {
        background-color: #f1f5f8;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        width: 100vw;
        height: 100vh;
      }

      input {
        border: 2px solid #c9d8e4;
      }

      button {
        background-color: #ff7f11;
        border: 0;
        color: #fff;
        cursor: pointer;
      }

      input,
      button {
        border-radius: 5px;
        font-size: 1.3rem;
        padding: 8px;
      }

      .prediction-container {
        display: none;
        margin-top: 25px;
        text-align: center;
      }

      p {
        margin: 5px auto;
      }

      p.result {
        font-size: 1.5rem;
        font-weight: 600;
      }

      p.akurasi {
        font-size: 1.5rem;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <div>
      <h1 style="text-align: center; text-decoration: underline">
        Tebak Prediksi Nama dan Jenis Kelamin
      </h1>
      <input type="text" id="name" name="name" placeholder="Masukkan nama" />
      <button type="button">Prediksi</button>

      <div class="prediction-container">
        <p>Hasil prediksi :</p>
        <p class="result"></p>
        <p>Tingkat Akurasi :</p>
        <p class="akurasi"></p>
      </div>
    </div>

    <script>
      $("button").click(function () {
        if ($("input").val().length == 0) {
          // Menggunakan SweetAlert2 untuk alert
          Swal.fire({
            icon: 'warning',
            title: 'Nama kosong',
            text: 'Mohon masukkan nama terlebih dahulu',
          });
          return;
        }

        $.ajax({
          url: "https://api.genderize.io/",
          type: "GET",
          data: {
            name: $("input").val(),
          },
          success: function (res) {
            console.log(res);
            $(".prediction-container").show();

            if (res.gender == "male") {
              $(".result").text("Laki-laki");
            } else {
              $(".result").text("Perempuan");
            }
            $(".akurasi").text(res.probability * 100 + " %");
          },
        });
      });
    </script>
  </body>
</html>