For many years, the school’s PTA has run a bingo night for the children, which always goes well. This year, however, we have retired the software that they used to use to track the numbers as they were called. I put together a simple script to do a similar job, as most of the app options had too many features.
Feel free to steal it if it will be useful. To reset the coloured squares simply refresh the page.
<!DOCTYPE html>
<!-- Simple Grid to Record Numbers called during the school bingo -->
<!-- Created 15/03/2024 by Andrew Logan -->
<html>
<head>
<title>Bingo</title>
<style>
body {
background-color: black;
-ms-overflow-style: none;
scrollbar-width: none;
}
body::-webkit-scrollbar {
display: none;
}
.content {
display: grid;
place-items: center;
/*height: 100vh;*/
}
.grid-container {
display: grid;
grid-template-columns: repeat(10, 1fr);
float: left;
gap: 5px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 32pt;
border: 10px solid hsl(46, 100%, 50%);;
border-radius: 15px;
padding: 10px;
}
.grid-item {
width: 55px;
height: 55px;
padding:15px;
border: 3px solid #ffffff;
cursor: pointer;
text-align: center;
background-color: hsl(219, 100%, 75%);
color: white;
border-radius: 15px;
}
.activated {
background-color: hsl(46, 100%, 50%);
color: white;
}
</style>
</head>
<body>
<div class="content">
<div class="grid-container">
<!-- Grid items will be added here by JavaScript -->
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const container = document.querySelector('.grid-container');
for (let i = 1; i <= 100; i++) {
const div = document.createElement('div');
div.textContent = i;
div.className = 'grid-item';
div.addEventListener('click', function () {
this.classList.toggle('activated');
});
container.appendChild(div);
}
});
</script>
</body>
</html>