Free exciting tools

<!DOCTYPE html>
<html>
  <head><a target="_blank" href="https://www.amazon.in/b?_encoding=UTF8&tag=6205009304-21&linkCode=ur2&linkId=019e207ab50081d0b040738ac3d682fe&camp=3638&creative=24630&node=3561110031">Mobile phones </a>
    <title>IFSC Finder</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        color: #333;
        margin: 0;
        padding: 0;
      }

      #search-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      #search-form {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        max-width: 600px;
        width: 100%;
      }

      h1 {
        text-align: center;
        margin-top: 0;
      }

      label {
        font-size: 18px;
        margin-bottom: 10px;
      }

      input[type="text"] {
        font-size: 16px;
        padding: 10px;
        border: none;
        border-bottom: 2px solid #ddd;
        width: 100%;
      }

      input[type="text"]:focus {
        outline: none;
        border-bottom: 2px solid #555;
      }

      button {
        background-color: #4caf50;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 16px;
        margin-top: 20px;
        padding: 10px;
        transition: all 0.2s;
        width: 100%;
      }

      button:hover {
        background-color: #3e8e41;
      }

      #result {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
        padding: 20px;
        display: none;
      }

      #result p {
        font-size: 18px;
        margin: 10px 0;
      }

      #result p:first-child {
        margin-top: 0;
      }

      #result p:last-child {
        margin-bottom: 0;
      }
    </style>
  </head>
  <body>
    <div id="search-container">
      <form id="search-form">
        <h1>IFSC Finder</h1>
        <label for="ifsc-input">Enter IFSC code:</label>
        <input type="text" id="ifsc-input" placeholder="Enter IFSC code...">
        <button id="search-button">Search</button>
      </form>
      <div id="result">
        <h2>Result:</h2>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      const searchButton = document.getElementById("search-button");
      const ifscInput = document.getElementById("ifsc-input");
      const result = document.getElementById("result");

      searchButton.addEventListener("click", async (event) => {
        event.preventDefault();
        const ifscCode = ifscInput.value;
        if (!ifscCode) {
          result.innerHTML = "<p>Please enter an IFSC code.</p>";
          result.style.display = "block";
          return;
        }
           try {
      const response = await axios.get(
        `https://ifsc.razorpay.com/${ifscCode}`
      );
      const data = response.data;
      const bankName = data.BANK;
      const branchName = data.BRANCH;
      const address = data.ADDRESS;
      const city = data.CITY;
      const state = data.STATE;
      const resultHtml = `
        <h2>Result:</h2>
        <p><strong>Bank Name:</strong> ${bankName}</p>
        <p><strong>Branch Name:</strong> ${branchName}</p>
        <p><strong>Address:</strong> ${address}</p>
        <p><strong>City:</strong> ${city}</p>
        <p><strong>State:</strong> ${state}</p>
      `;
      result.innerHTML = resultHtml;
      result.style.display = "block";
    } catch (error) {
      result.innerHTML = "<p>Invalid IFSC code. Please try again.</p>";
      result.style.display = "block";
    }
  });
</script>
  </body>
</html>
Search This Blog

Free exciting tools

Comments
