Javascript Wait 5 Seconds

<!DOCTYPE html>
<html>

<head>
  <style>
    /* Style for the button */
    #myButton {
      background-color: #004D40;
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 10px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }

/* Change the button color on hover */
    #myButton:hover {
      background-color: #00796B;
    }

/* Disable the button style */
    #myButton:disabled {
      background-color: #bdc3c7;
      cursor: not-allowed;
    }
  </style>
</head>

<body>
  <h3>Javascript Disable Button for 30 Seconds</h3>
  <button id="myButton">Click Me</button>
  <script>
    // Get a reference to the button element
    var button = document.getElementById("myButton");

// Function to disable the button for 30 seconds
    function disableButton() {
      button.disabled = true; // Disable the button
      button.innerText = "Wait for 30 seconds...";
      setTimeout(function () {
        button.disabled = false; // Enable the button after 30 seconds
      }, 30000); // 30,000 milliseconds = 30 seconds
    }

// Attach the disableButton function to the button's click event
    button.addEventListener("click", disableButton);
  </script>
</body>

</html>