So im trying to make a New Years Music bingo, i have made it so songs get randomzied and you can select the songs you have gotten. But nothing happens when you have 4 in a row. I have tried to add a sumbit button, but nothing happens. My ideal thing would be if Bingo pops up when selected and not when Submit is pressed.
// Define the list of songs with artist names
const songs = [
"Auld Lang Syne - Traditional",
"Happy New Year - ABBA",
"New Year's Day - U2",
"What Are You Doing New Year's Eve? - Ella Fitzgerald",
"It's Just Another New Year's Eve - Barry Manilow",
"New Year's Eve - Snoop Dogg ft. Marty James",
"New Year's Day - Taylor Swift",
"Bringing in a Brand New Year - B.B. King",
"New Year's Resolution - Otis Redding & Carla Thomas",
"This Will Be (An Everlasting Love) - Natalie Cole",
"New Year's Kiss - Gwen Stefani",
"Year's End - The Black Eyed Peas",
"Ring in the New - Imogen Heap",
"Another Year Has Gone By - Celine Dion",
"New Year's Eve 1999 - Alabama",
"New Year's Eve - Tom Waits"
];
let shuffledSongs = [];
// Function to randomize songs and update the Bingo card
function randomizeSongs() {
const bingoCard = document.getElementById("bingo-card");
bingoCard.innerHTML = "";
shuffledSongs = shuffleArray(songs);
// Create Bingo card cells and add them to the card
for (let i = 0; i < 16; i++) {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.textContent = shuffledSongs[i];
// Add a click event listener to mark the cell
cell.addEventListener("click", function() {
this.classList.toggle("selected");
checkBingo();
});
bingoCard.appendChild(cell);
}
// Reset the Bingo message
const bingoMessage = document.getElementById("bingo-message");
bingoMessage.style.display = "none";
}
// Function to check for a bingo
function checkBingo() {
const rows = document.querySelectorAll(".cell");
const selectedCells = Array.from(rows).filter(cell => cell.classList.contains("selected"));
// Check for a horizontal bingo
for (let i = 0; i < 4; i++) {
const row = selectedCells.filter(cell => cell.textContent === shuffledSongs[i * 4]);
if (row.length === 4) {
showBingoMessage();
resetGame();
return;
}
}
// Check for a vertical bingo
for (let i = 0; i < 4; i++) {
const column = selectedCells.filter(cell => cell.textContent === shuffledSongs[i]);
if (column.length === 4) {
showBingoMessage();
resetGame();
return;
}
}
}
// Function to show the Bingo message
function showBingoMessage() {
const bingoMessage = document.getElementById("bingo-message");
bingoMessage.style.display = "block";
}
// Function to reset the game
function resetGame() {
const selectedCells = document.querySelectorAll(".selected");
selectedCells.forEach(cell => cell.classList.remove("selected"));
}
// Function to shuffle an array using Fisher-Yates algorithm
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Function to create fireworks
function createFireworks() {
const fireworksContainer = document.getElementById("fireworks-container");
for (let i = 0; i < 50; i++) {
const firework = document.createElement("img");
firework.src = "https://i.gifer.com/VZvx.gif"; // Replace with the URL of your fireworks GIF
firework.classList.add("firework");
firework.style.left = `${Math.random() * 100}vw`;
firework.style.top = `${Math.random() * 100}vh`;
firework.style.animationDuration = `${Math.random() * 2 + 1}s`;
fireworksContainer.appendChild(firework);
}
}
// Initial randomization on page load
randomizeSongs();
// Initial fireworks creation on page load
createFireworks();
// Function to submit bingo
function submitBingo() {
checkBingo();
}body {
background: linear-gradient(to bottom, #0d0d0d, #0d0d0d 50%, #141414 50%, #141414);
color: #fff;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
/* Remove overflow: hidden; to enable scrolling */
min-height: 100vh;
/* Set a minimum height to allow content to fill */
}
#fireworks-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
/* Set the z-index to a lower value */
}
.firework {
position: absolute;
width: 50px;
height: 50px;
animation: explode 2s ease-out infinite;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
#bingo-card {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
max-width: 400px;
margin: 20px auto;
z-index: 1;
/* Set the z-index to a higher value */
}
.cell {
position: relative;
border: 1px solid #fff;
padding: 10px;
text-align: center;
font-size: 14px;
cursor: pointer;
background-color: #1e1e1e;
}
.selected {
background-color: #a0a0a0;
}
.bingo-text {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
font-size: 18px;
color: gold;
display: none;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
background-color: gold;
color: #000;
border: none;
cursor: pointer;
z-index: 1;
/* Set the z-index to a higher value */
}
/* Responsive styling for smaller screens */
@media screen and (max-width: 480px) {
button {
width: 100%;
/* Make the button full width on smaller screens */
}
}<div id="fireworks-container"></div>
<h1>New Year's Eve Bingo</h1>
<div id="bingo-card"></div>
<div class="bingo-text" id="bingo-message">BINGO!</div>
<button onclick="randomizeSongs()">Randomize Songs</button>
<button onclick="submitBingo()">Submit Bingo</button>There are a variety of little problems with your code, but the most important ones are:
#bingo-messageI've modified your code a bit to achieve the desired result. Take a look to see if you understand what I've done:
#bingo-message {
color: black;
background: rgba(255, 255, 255, 0.5);
width: 100%;
text-align: center;
padding: 30px 0;
z-index: 10;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year's Eve Bingo</title>
<style>
body {
background: linear-gradient(to bottom, #0d0d0d, #0d0d0d 50%, #141414 50%, #141414);
color: #fff;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
/* Remove overflow: hidden; to enable scrolling */
min-height: 100vh;
/* Set a minimum height to allow content to fill */
}
#fireworks-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
/* Set the z-index to a lower value */
}
.firework {
position: absolute;
width: 50px;
height: 50px;
animation: explode 2s ease-out infinite;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
#bingo-card {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
max-width: 400px;
margin: 20px auto;
z-index: 1;
/* Set the z-index to a higher value */
}
.cell {
position: relative;
border: 1px solid #fff;
padding: 10px;
text-align: center;
font-size: 14px;
cursor: pointer;
background-color: #1e1e1e;
}
.selected {
background-color: #a0a0a0;
}
.bingo-text {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
font-size: 18px;
color: gold;
display: none;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
background-color: gold;
color: #000;
border: none;
cursor: pointer;
z-index: 1;
/* Set the z-index to a higher value */
}
/* Responsive styling for smaller screens */
@media screen and (max-width: 480px) {
button {
width: 100%;
/* Make the button full width on smaller screens */
}
}
</style>
Copy
<div id="fireworks-container"></div>
<h1>New Year's Eve Bingo</h1>
<div id="bingo-card"></div>
<h1 class="bingo-text" id="bingo-message">BINGO!</h1>
<button onclick="randomizeSongs()">Randomize Songs</button>
<script>
// Define the list of songs with artist names
const songs = [
"Auld Lang Syne - Traditional",
"Happy New Year - ABBA",
"New Year's Day - U2",
"What Are You Doing New Year's Eve? - Ella Fitzgerald",
"It's Just Another New Year's Eve - Barry Manilow",
"New Year's Eve - Snoop Dogg ft. Marty James",
"New Year's Day - Taylor Swift",
"Bringing in a Brand New Year - B.B. King",
"New Year's Resolution - Otis Redding & Carla Thomas",
"This Will Be (An Everlasting Love) - Natalie Cole",
"New Year's Kiss - Gwen Stefani",
"Year's End - The Black Eyed Peas",
"Ring in the New - Imogen Heap",
"Another Year Has Gone By - Celine Dion",
"New Year's Eve 1999 - Alabama",
"New Year's Eve - Tom Waits"
];
let shuffledSongs = [];
// Function to randomize songs and update the Bingo card
function randomizeSongs() {
const bingoCard = document.getElementById("bingo-card");
bingoCard.innerHTML = "";
shuffledSongs = shuffleArray(songs);
// Create Bingo card cells and add them to the card
for (let i = 0; i < 16; i++) {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.textContent = shuffledSongs[i];
// Add a click event listener to mark the cell
cell.addEventListener("click", function() {
this.classList.toggle("selected");
checkBingo();
});
bingoCard.appendChild(cell);
}
// Reset the Bingo message
const bingoMessage = document.getElementById("bingo-message");
bingoMessage.style.display = "none";
}
// Function to check for a bingo
function checkBingo() {
const rows = [...document.querySelectorAll(".cell")];
// Check for a horizontal bingo
for (let i = 0; i < 4; i++) {
if (rows.slice(i * 4, i * 4 + 4).every(element => element.classList.contains("selected"))) {
showBingoMessage();
return;
}
}
// Check for a vertical bingo
for (let i = 0; i < 4; i++) {
const column = [rows[i], rows[i + 4], rows[i + 8], rows[i + 12]];
if (column.every(element => element.classList.contains("selected"))) {
showBingoMessage();
return;
}
}
}
// Function to show the Bingo message
function showBingoMessage() {
const bingoMessage = document.getElementById("bingo-message");
bingoMessage.style.display = "block";
}
// Function to reset the game
function resetGame() {
const selectedCells = document.querySelectorAll(".selected");
selectedCells.forEach(cell => cell.classList.remove("selected"));
}
// Function to shuffle an array using Fisher-Yates algorithm
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Function to create fireworks
function createFireworks() {
const fireworksContainer = document.getElementById("fireworks-container");
for (let i = 0; i < 50; i++) {
const firework = document.createElement("img");
firework.src = "https://i.gifer.com/VZvx.gif"; // Replace with the URL of your fireworks GIF
firework.classList.add("firework");
firework.style.left = `${Math.random() * 100}vw`;
firework.style.top = `${Math.random() * 100}vh`;
firework.style.animationDuration = `${Math.random() * 2 + 1}s`;
fireworksContainer.appendChild(firework);
}
}
// Initial randomization on page load
randomizeSongs();
// Initial fireworks creation on page load
createFireworks();
// Function to submit bingo
</script>The first problem can be fixed by setting the h1's z-index to a value higher than the bingo board. We add some styling while we're at it and it's all set.
As for the bingo checking algorithm: for horizontal bingo check, we use splice to get all elements in a row, then Array.every to check if each element satisfies a condition; in our case, the condition is if the classList contains .selected. For the vertical check, my solution isn't ideal (I did hard code the indexes for a 4x4 grid), but it will suffice :).
Have a wonderful holiday season. 🎄👨👩👧👦🎇 Happy coding!