Using JavaScript, let's create a Bingo
Code
HTML
<div>
<button id="sortNumberEl">Sort Number</button>
<button id="resetEl">Reset</button>
</div>
<div>
<output id="outputEl">...</output>
</div>
<div>
<output id="historyEl">...</output>
</div>
<div style="display: flex">
<span>B</span>
<span>I</span>
<span>N</span>
<span>G</span>
<span>O</span>
</div>
<div style="display: flex">
<div class="item-b list"></div>
<div class="item-i list"></div>
<div class="item-n list"></div>
<div class="item-g list"></div>
<div class="item-o list"></div>
</div>
This code is a HTML code that displays a sorting game on a web page. The game consists of 5 bins with class names of "item-b", "item-i", "item-n", "item-g", and "item-o". The bins are displayed in a flexible layout. There are two buttons displayed above the bins, one labeled "Sort Number" and the other labeled "Reset". The game also displays two outputs, one labeled "outputEl" and the other labeled "historyEl".
The purpose of the game is to sort randomly generated numbers into the correct bins, however the exact logic for sorting the numbers is not present in this code. The "Sort Number" button is intended to initiate the sorting process, while the "Reset" button is intended to reset the game to its original state. The "outputEl" and "historyEl" outputs are intended to display the results of the sorting process and a history of previous sorting attempts.
CSS
span {
display: flex;
width: 40px;
height: 40px;
background: blue;
align-items: center;
justify-content: center;
margin-left: 5px;
}
.list {
width: 40px;
height: 40px;
/* background: blue; */
align-self: center;
margin-left: 5px;
}
.list-item {
width: 40px;
height: 40px;
background: blue;
margin-top: 5px;
padding-top: 20px;
text-align: center;
vertical-align: middle;
}
JS
Variables
const itemB = document.querySelector(".item-b");
const itemI = document.querySelector(".item-i");
const itemN = document.querySelector(".item-n");
const itemG = document.querySelector(".item-g");
const itemO = document.querySelector(".item-o");
These variables represent the five categories into which the numbers will be sorted. They use the querySelector method to select the HTML element with the corresponding class name.
let allNumberSelected = [];
let allNumbers = [...Array(75).keys()].map((x) => ++x);
The allNumberSelected variable is an array that stores all of the selected numbers. The allNumbers variable is an array that stores all of the available numbers, from 1 to 75. The Array(75) creates an array with 75 elements and the .map((x) => ++x) method adds 1 to each element in the array.
Functions
const addItem = (el, value) => {
allNumberSelected.push(value);
outputEl.innerHTML = value;
el.innerHTML = el.innerHTML + `<div class="list-item">${value}</div>`;
showHistory();
};
The addItem function takes two arguments, el and value, and adds the value to the selected numbers and displays it in the outputEl element. It also updates the history of selected numbers by calling the showHistory function.
function showHistory() {
historyEl.innerHTML = allNumberSelected.join(", ");
}
The showHistory function displays the history of selected numbers in the historyEl element. The join(", ") method is used to join all of the elements in the allNumberSelected array into a single string separated by commas.
const getRandom = (min = 1, max = 75) =>
Math.floor(Math.random() * (max - min)) + min;
The getRandom function takes two optional arguments, min and max, and returns a random number between min and max. The default values for min and max are 1 and 75, respectively.
function sortNumber() {
let index = getRandom(0, allNumbers.length);
let value = allNumbers[index];
allNumbers.splice(index, 1);
switch (true) {
case value <= 15:
addItem(itemB, `B${value}`);
break;
case value <= 30:
addItem(itemI, `I${value}`);
break;
case value <= 45:
addItem(itemN, `N${value}`);
break;
case value <= 60:
addItem(itemG, `G${value}`);
break;
case value <= 75:
addItem(itemO, `O${value}`);
break;
default:
break;
}
}
The reset function takes clean all fields.
function reset() {
historyEl.innerHTML = "...";
outputEl.innerHTML = "...";
allNumberSelected = [];
allNumbers = [...Array(75).keys()].map((x) => ++x);
itemB.innerHTML = "";
itemI.innerHTML = "";
itemN.innerHTML = "";
itemG.innerHTML = "";
itemO.innerHTML = "";
}
Demo
See below for the complete working project.
💡 NOTE: If you can't see it click here and see the final result
Thanks for reading!
If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!
😊😊 See you later! 😊😊
Support Me
Youtube - WalterNascimentoBarroso
Github - WalterNascimentoBarroso
Codepen - WalterNascimentoBarroso
Latest comments (0)