firdaus

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
      crossorigin="anonymous"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <label>First name:</label><br />
    <input type="text" id="fname" /><br />
    <button  type="button" class="btn btn-primary" id="btnName">Check</button>
    <div class="alert alert-success status-task1-success" role="alert" hidden>
        A simple success alert—check it out!
      </div>
      <div class="alert alert-danger status-task1-danger" role="alert" hidden>
        A simple danger alert—check it out!
      </div>


    <br />
    <label>Age:</label><br />
    <input type="text" id="fage" /><br />
    <button  type="button" class="btn btn-primary" id="btnAge">Check</button>


    <script>
      $(document).ready(function () {
        $("#btnName").click(function () {
          var name = $("#fname").val();
          if (name == "hacker") {
            $('.status-task1-success').removeAttr('hidden');
          } else {
            console.log("false");
            $('.status-task1-danger').removeAttr('hidden');
          }
        });

        $("#btnAge").click(function () {
          var name = $("#fage").val();
          if (name == "404") {
            window.prompt("yes!");
          } else {
            console.log("false");
            $("#fage").val("");
          }
        });
      });
    </script>
  </body>
</html>