To make it fully working with live data from public APIs and still as a single HTML file, I will integrate the fetch API calls directly into the JavaScript. This will allow the tool to retrieve real IFSC and Post Office details.
Here is the updated, fully functional single HTML file. Just save this code as an .html file and open it in your browser.
This court copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live IFSC & Pincode Search Tool</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background-color: #eef2f6;
color: #333;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
}
.container {
max-width: 960px;
width: 100%;
background: #ffffff;
padding: 30px 40px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
}
h1, h2 {
color: #2c3e50;
text-align: center;
margin-bottom: 25px;
font-weight: 600;
}
.search-section {
background-color: #f8fcfd;
border: 1px solid #dcebf2;
padding: 25px;
margin-bottom: 35px;
border-radius: 8px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}
.search-section h2 {
margin-top: 0;
color: #34495e;
font-size: 1.5em;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 15px;
margin-bottom: 20px;
}
.search-input-group {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
.search-input-group label {
min-width: 100px;
font-weight: bold;
color: #555;
font-size: 1.05em;
}
.search-section input[type="text"] {
flex-grow: 1;
padding: 12px 15px;
border: 1px solid #c8d8e6;
border-radius: 6px;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
min-width: 200px; /* Ensure input is wide enough */
}
.search-section input[type="text"]:focus {
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.search-section button {
padding: 12px 25px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.search-section button:hover {
background-color: #0056b3;
transform: translateY(-1px);
}
.search-section button:active {
transform: translateY(0);
}
.results-section {
margin-top: 30px;
padding-top: 25px;
border-top: 2px solid #007bff;
}
.results-section h2 {
font-size: 1.4em;
color: #34495e;
text-align: left;
border-bottom: none;
padding-bottom: 0;
margin-bottom: 20px;
}
.result-box {
background-color: #e9f5ff;
border: 1px solid #cceeff;
padding: 20px 25px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.result-box h3 {
color: #0056b3;
margin-top: 0;
margin-bottom: 15px;
border-bottom: 1px dashed #aed8ee;
padding-bottom: 10px;
font-size: 1.3em;
font-weight: 600;
}
.result-detail {
margin-bottom: 8px;
display: flex;
flex-wrap: wrap;
}
.result-detail strong {
display: inline-block;
min-width: 140px;
color: #4a4a4a;
font-weight: 600;
margin-right: 10px;
}
.error-message {
color: #dc3545;
font-weight: bold;
text-align: center;
margin-top: 20px;
font-size: 1.1em;
}
.loading-message {
text-align: center;
margin-top: 20px;
color: #007bff;
font-style: italic;
font-size: 1.1em;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.container {
padding: 20px 25px;
}
.search-input-group {
flex-direction: column;
align-items: stretch;
}
.search-input-group label {
min-width: unset;
margin-bottom: 5px;
}
.search-section button {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Live IFSC & Pincode Search Tool</h1>
<div class="search-section">
<h2>IFSC Code Search</h2>
<div class="search-input-group">
<label for="ifscInput">IFSC Code:</label>
<input type="text" id="ifscInput" placeholder="e.g., HDFC0000001">
<button onclick="searchIFSC()">Search IFSC</button>
</div>
<div id="ifscErrorMessage" class="error-message"></div>
<div id="ifscLoading" class="loading-message" style="display: none;">Fetching IFSC details...</div>
</div>
<div class="results-section" id="ifscResultsSection" style="display: none;">
<h2>IFSC Code Details</h2>
<div id="ifscDetails" class="result-box">
<div class="result-detail"><strong>Bank Name:</strong> <span id="ifscBankName"></span></div>
<div class="result-detail"><strong>Branch:</strong> <span id="ifscBranch"></span></div>
<div class="result-detail"><strong>Address:</strong> <span id="ifscAddress"></span></div>
<div class="result-detail"><strong>City:</strong> <span id="ifscCity"></span></div>
<div class="result-detail"><strong>District:</strong> <span id="ifscDistrict"></span></div>
<div class="result-detail"><strong>State:</strong> <span id="ifscState"></span></div>
<div class="result-detail"><strong>Pincode:</strong> <span id="ifscPincode"></span></div>
<div class="result-detail"><strong>MICR Code:</strong> <span id="ifscMICR"></span></div>
</div>
</div>
<div class="search-section">
<h2>Pincode Search</h2>
<div class="search-input-group">
<label for="pincodeInput">Pincode:</label>
<input type="text" id="pincodeInput" placeholder="e.g., 110001">
<button onclick="searchPincode()">Search Pincode</button>
</div>
<div id="pincodeErrorMessage" class="error-message"></div>
<div id="pincodeLoading" class="loading-message" style="display: none;">Fetching Post Office details...</div>
</div>
<div class="results-section" id="pincodeResultsSection" style="display: none;">
<h2>Post Office Details</h2>
<div id="postOfficeResults">
<!-- Post office details will be loaded here by JavaScript -->
</div>
</div>
</div>
<script>
// Helper function to reset results and error messages
function resetSection(sectionId, errorId, loadingId, clearResults = false, resultsContainerId = '') {
document.getElementById(errorId).textContent = '';
document.getElementById(loadingId).style.display = 'none';
document.getElementById(sectionId).style.display = 'none';
if (clearResults && resultsContainerId) {
document.getElementById(resultsContainerId).innerHTML = '';
}
}
async function searchIFSC() {
const ifscInput = document.getElementById('ifscInput');
const ifscCode = ifscInput.value.trim().toUpperCase();
resetSection('ifscResultsSection', 'ifscErrorMessage', 'ifscLoading');
if (!ifscCode) {
document.getElementById('ifscErrorMessage').textContent = "Please enter an IFSC code.";
ifscInput.focus();
return;
}
// Basic validation for IFSC format (usually 11 characters, first 4 alphabets, 5th char 0, rest alphanumeric)
if (!/^[A-Z]{4}0[A-Z0-9]{6}$/.test(ifscCode)) {
document.getElementById('ifscErrorMessage').textContent = "Invalid IFSC format. Example: HDFC0000001";
ifscInput.focus();
return;
}
document.getElementById('ifscLoading').style.display = 'block';
try {
// Using Razorpay's public IFSC API
const response = await fetch(`https://ifsc.razorpay.com/${ifscCode}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
if (data && !data.ERROR) { // Razorpay API returns an ERROR field if not found
document.getElementById('ifscBankName').textContent = data.BANK || 'N/A';
document.getElementById('ifscBranch').textContent = data.BRANCH || 'N/A';
document.getElementById('ifscAddress').textContent = data.ADDRESS || 'N/A';
document.getElementById('ifscCity').textContent = data.CITY || 'N/A';
document.getElementById('ifscDistrict').textContent = data.DISTRICT || 'N/A';
document.getElementById('ifscState').textContent = data.STATE || 'N/A';
document.getElementById('ifscPincode').textContent = data.PINCODE || 'N/A';
document.getElementById('ifscMICR').textContent = data.MICR || 'N/A';
document.getElementById('ifscResultsSection').style.display = 'block';
} else {
document.getElementById('ifscErrorMessage').textContent = `IFSC code "${ifscCode}" not found.`;
}
} catch (error) {
console.error("Fetch error:", error);
document.getElementById('ifscErrorMessage').textContent = "Failed to fetch IFSC details. Please check the code and your internet connection.";
} finally {
document.getElementById('ifscLoading').style.display = 'none';
}
}
async function searchPincode() {
const pincodeInput = document.getElementById('pincodeInput');
const pincode = pincodeInput.value.trim();
const postOfficeResultsDiv = document.getElementById('postOfficeResults');
resetSection('pincodeResultsSection', 'pincodeErrorMessage', 'pincodeLoading', true, 'postOfficeResults');
if (!pincode) {
document.getElementById('pincodeErrorMessage').textContent = "Please enter a Pincode.";
pincodeInput.focus();
return;
}
if (!/^\d{6}$/.test(pincode)) {
document.getElementById('pincodeErrorMessage').textContent = "Pincode must be a 6-digit number.";
pincodeInput.focus();
return;
}
document.getElementById('pincodeLoading').style.display = 'block';
document.getElementById('pincodeResultsSection').style.display = 'block'; // Show section even during loading
try {
// Using api.postalpincode.in for Post Office details
const response = await fetch(`https://api.postalpincode.in/pincode/${pincode}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result[0] && result[0].Status === "Success") {
const postOffices = result[0].PostOffice;
if (postOffices && postOffices.length > 0) {
postOffices.forEach(po => {
const poBox = document.createElement('div');
poBox.className = 'result-box';
poBox.innerHTML = `
<h3>${po.Name || 'N/A'}</h3>
<div class="result-detail"><strong>Branch Type:</strong> ${po.BranchType || 'N/A'}</div>
<div class="result-detail"><strong>Delivery Status:</strong> ${po.DeliveryStatus || 'N/A'}</div>
<div class="result-detail"><strong>Circle:</strong> ${po.Circle || 'N/A'}</div>
<div class="result-detail"><strong>District:</strong> ${po.District || 'N/A'}</div>
<div class="result-detail"><strong>Division:</strong> ${po.Division || 'N/A'}</div>
<div class="result-detail"><strong>Region:</strong> ${po.Region || 'N/A'}</div>
<div class="result-detail"><strong>State:</strong> ${po.State || 'N/A'}</div>
<div class="result-detail"><strong>Country:</strong> ${po.Country || 'N/A'}</div>
<div class="result-detail"><strong>Pincode:</strong> ${po.Pincode || 'N/A'}</div>
`;
postOfficeResultsDiv.appendChild(poBox);
});
} else {
document.getElementById('pincodeErrorMessage').textContent = `No post office details found for Pincode "${pincode}".`;
document.getElementById('pincodeResultsSection').style.display = 'none';
}
} else if (result[0] && result[0].Status === "Error") {
document.getElementById('pincodeErrorMessage').textContent = result[0].Message || `No post office details found for Pincode "${pincode}".`;
document.getElementById('pincodeResultsSection').style.display = 'none';
} else {
document.getElementById('pincodeErrorMessage').textContent = `An unexpected error occurred for Pincode "${pincode}".`;
document.getElementById('pincodeResultsSection').style.display = 'none';
}
} catch (error) {
console.error("Fetch error:", error);
document.getElementById('pincodeErrorMessage').textContent = "Failed to fetch Pincode details. Please check your internet connection.";
document.getElementById('pincodeResultsSection').style.display = 'none';
} finally {
document.getElementById('pincodeLoading').style.display = 'none';
}
}
</script>
</body>
</html>
How to use this fully working code:
Save: Copy the entire code block above. Create File: Open a plain text editor (like Notepad on Windows, TextEdit on Mac, VS Code, Sublime Text, etc.). Paste: Paste the copied code into the editor. Save As: Save the file with a .html extension (e.g., live_search_tool.html). Make sure the "Save as type" is set to "All Files" or "HTML" to prevent it from saving as .txt. Open in Browser: Locate the saved live_search_tool.html file on your computer and double-click it. It will open in your default web browser.
Try these examples:
IFSC Code: HDFC0000001 (HDFC Bank, Mumbai Main Branch) ICIC0000002 (ICICI Bank, Delhi Connaught Place) SBIN0000002 (State Bank of India, Mumbai Main)
Pincode: 110001 (Delhi, Connaught Place area) 400001 (Mumbai G.P.O) 600001 (Chennai G.P.O)
For IFSC codes, it uses https://ifsc.razorpay.com/. For Pincode details, it uses https://api.postalpincode.in/pincode/.
.webp)
.webp)
.png)
.jpeg)
.webp)
.jpeg)
.jpeg)
.jpeg)
.png)
