<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Bingo Checker</title>
<link rel="manifest" href="manifest.json" />
<style>
body { font-family: sans-serif; text-align: center; background: #f0f0f0; }
table { border-collapse: collapse; margin: 10px auto; }
td { width: 60px; height: 60px; text-align: center; vertical-align: middle;
border: 1px solid #888; font-size: 20px; cursor: pointer; }
.marked { background-color: #4caf50; color: white; }
input, button { margin: 10px; padding: 10px; font-size: 16px; }
#status { font-size: 1.2em; margin-top: 10px; color: #d32f2f; }
</style>
</head>
<body>
<h1>Bingo Checker</h1>
<div>
<table id="bingoCard"></table>
<input type="text" id="calledInput" placeholder="Enter called number (e.g., B5)" />
<button onclick="markCalled()">Mark</button>
<div id="status"></div>
</div>
<script>
const bingoCard = [
["B1", "B2", "B3", "B4", "B5"],
["I16", "I17", "I18", "I19", "I20"],
["N31", "N32", "FREE", "N34", "N35"],
["G46", "G47", "G48", "G49", "G50"],
["O61", "O62", "O63", "O64", "O65"]
];
const marked = Array.from({ length: 5 }, () => Array(5).fill(false));
marked[2][2] = true; // Free space
function renderCard() {
const table = document.getElementById("bingoCard");
table.innerHTML = "";
for (let r = 0; r < 5; r++) {
const row = document.createElement("tr");
for (let c = 0; c < 5; c++) {
const cell = document.createElement("td");
cell.textContent = bingoCard[r][c];
if (marked[r][c]) cell.classList.add("marked");
row.appendChild(cell);
}
table.appendChild(row);
}
}
function markCalled() {
const input = document.getElementById("calledInput").value.toUpperCase().trim();
for (let r = 0; r < 5; r++) {
for (let c = 0; c < 5; c++) {
if (bingoCard[r][c] === input) {
marked[r][c] = true;
renderCard();
checkBingo();
return;
}
}
}
document.getElementById("status").textContent = "Number not found.";
}
function checkBingo() {
const status = document.getElementById("status");
// Rows
for (let r = 0; r < 5; r++) if (marked[r].every(Boolean)) return status.textContent = "🎉 BINGO!";
// Columns
for (let c = 0; c < 5; c++) if (marked.every(row => row[c])) return status.textContent = "🎉 BINGO!";
// Diagonals
if ([0,1,2,3,4].every(i => marked[i][i]) || [0,1,2,3,4].every(i => marked[i][4-i]))
return status.textContent = "🎉 BINGO!";
status.textContent = "";
}
window.onload = () => {
renderCard();
if (‘serviceWorker’ in navigator) navigator.serviceWorker.register(‘sw.js’);
};
</script>
<!– Manifest (inlined for PWA functionality) –>
<script type="application/json" id="manifest.json">
{
"name": "Bingo Checker",
"short_name": "BingoApp",
"start_url": ".",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#4caf50",
"icons": [{
"src": "https://ray2407.github.io/250527b/icon.png",
"sizes": "192×192",
"type": "image/png"
}]
}
</script>
<!– Service Worker (inlined for offline support) –>
<script id="sw.js" type="javascript/worker">
const cacheName = "bingo-cache-v1";
self.addEventListener("install", e => {
e.waitUntil(
caches.open(cacheName).then(cache => cache.addAll([".", "index.html"]))
);
});
self.addEventListener("fetch", e => {
e.respondWith(
caches.match(e.request).then(res => res || fetch(e.request))
);
});
</script>
</body>
</html>
Mahalo
SIGNATURE:
Clifford "RAY" Hackett I founded www.adapt.org in 1980 it now has over 50 million members.
$500 of material=World’s fastest hydrofoil sailboat. http://sunrun.biz
Solar 
