  .form-div {
      max-width: 400px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 1rem;
      font-family: system-ui, sans-serif;
  }

  .form-div input {
      padding: 10px 14px;
      font-size: 1rem;
      border: 1px solid #ced4da;
      border-radius: 0.375rem;
      background-color: #fff;
      color: #212529;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .form-div input:focus {
      border-color: #86b7fe;
      outline: none;
      box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  }

  .form-div button {
      position: relative;
      padding: 10px 16px;
      font-size: 1rem;
      background-color: #6666FE;
      color: #fff;
      border: none;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: background-color 0.15s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
  }

  .form-div button:hover {
      background-color: #6d6dfd;
  }

  .form-div button:active {
      background-color: #6666FE;
  }

  .spinner {
      display: none;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.5);
      border-top: 2px solid white;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
  }

  @keyframes spin {
      to {
          transform: rotate(360deg);
      }
  }

  .loading .spinner {
      display: inline-block;
  }

  .loading #btn-text {
      opacity: 0.6;
  }

if (document.readyState === "loading") {
    window.addEventListener("DOMContentLoaded", () => {
      initFormHandler();
    });
  } else {
    initFormHandler();
  }

  function initFormHandler() {
    document.addEventListener("click", async function (event) {

        const target = event.target;
        if (target && target.id === "submit-btn" || target && target.id === "btn-text") {
            console.log("✅ Button clicked!!");
          
            const button = document.getElementById('submit-btn');
            const invalidAddressAlert = `❌ invalid address!`;
            const address = document.getElementById("address").value;

            if (address.startsWith("0x")) {
                if (address.length < 42) {
                    alert(invalidAddressAlert);
                    return;
                }
            } else {
                if (address.length < 48) {
                    alert(invalidAddressAlert);
                    return;
                }
            }

            button.classList.add('loading');

            await fetch('https://dev-peaq-faucet-service.cisys.xyz/get-test-tokens', {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json', 
                'Accept': 'application/json',
                'APIKEY': '78b996ecb21a4a676078b99667606a6ae72d'
            },
            body: JSON.stringify({ address }),
            })
            .then(async (response) => {
                if (response.ok) {
                    return response.json();
                } else {
                    const errorData = await response.json().catch(() => ({message: "Unknown error"}));
                    throw new Error(errorData.message || `Request failed with status ${response.status}`);
                }
            })
            .then((result) => {
                console.log({ result });
                if (result?.message) {
                    if (result?.txHash) {
                        alert(`✅ ${result?.message}: https://agung-testnet.subscan.io/tx/${result?.txHash}`);
                        return;
                    }
                    alert(`❌ ${result?.message}`);
                }
            })
            .catch((e) => {
                console.error("❌ error: ", e?.message);
                alert(`❌ ${e?.message}!`);
            }).finally(() => {
                button.classList.remove('loading');
            });

            button.classList.remove('loading');
        }
    });
}

Javascript SDK quickstart

Prerequisite:

Installation: