Sujay's Free Tools(Bank IFSC Code checker)
Certainly! Here's a simple example of a responsive Bank IFSC Code Checker using HTML and CSS, along with the Razorpay IFSC API. Please note that you need to include the `https://ifsc.razorpay.com` library in your project to make API calls.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IFSC Code Checker</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
}
h1 {
color: #333;
}
#ifscInput {
width: 100%;
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
}
#checkBtn {
background-color: #4caf50;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 5px;
}
#result {
margin-top: 20px;
font-weight: bold;
color: #4caf50;
}
</style>
</head>
<body>
<div class="container">
<h1>IFSC Code Checker</h1>
<input type="text" id="ifscInput" placeholder="Enter IFSC Code">
<button id="checkBtn" onclick="checkIFSC()">Check</button>
<div id="result"></div>
</div>
<script>
function checkIFSC() {
const ifscCode = document.getElementById('ifscInput').value;
const resultDiv = document.getElementById('result');
if (ifscCode.trim() === '') {
resultDiv.textContent = 'Please enter an IFSC code.';
return;
}
fetch(`https://ifsc.razorpay.com/${ifscCode}`)
.then(response => response.json())
.then(data => {
if (data) {
resultDiv.textContent = `Bank: ${data.BANK}, Branch: ${data.BRANCH}, State: ${data.STATE}, District: ${data.DISTRICT}`;
} else {
resultDiv.textContent = 'Invalid IFSC code. Please check and try again.';
}
})
.catch(error => {
console.error('Error fetching data:', error);
resultDiv.textContent = 'An error occurred while fetching data. Please try again later.';
});
}
</script>
</body>
</html>
```
This code provides a simple web page with an input field to enter the IFSC code, a "Check" button, and a result display area. The styling is kept minimal and can be adjusted based on your preferences. Make sure to include the necessary Razorpay library in your project for the API calls to work.
Comments
Post a Comment