50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
// model
|
|
var app = document.getElementById('app');
|
|
var html = ' ';
|
|
var lampArray = [];
|
|
var lightOn;
|
|
|
|
// view
|
|
updateView();
|
|
twentyFive();
|
|
lightUpRandomLamp();
|
|
function updateView() {
|
|
app.innerHTML = html + `<button onclick="lightUpRandomLamp()">Light up random lamp</button>`;
|
|
}
|
|
|
|
// controller
|
|
function twentyFive() {
|
|
lampArray = [];
|
|
let lamp = 0;
|
|
for (i = 0; i < 25; i++) {
|
|
html += /*HTML*/ `
|
|
<div class="circles" id="${lamp}"></div>
|
|
`;
|
|
lampArray.push(lamp)
|
|
lamp++;
|
|
}
|
|
updateView();
|
|
|
|
}
|
|
|
|
function lightUpRandomLamp() {
|
|
checkForLightOn();
|
|
let divToReplace = ' ';
|
|
let selectedLampIndex = Math.floor(Math.random() * lampArray.length);
|
|
divToReplace = document.getElementById(selectedLampIndex);
|
|
let divToreplaceWith = document.getElementById(selectedLampIndex).classList = `circles lightOn`
|
|
html = html.replace(divToReplace, divToreplaceWith);
|
|
clearScreen();
|
|
}
|
|
function clearScreen() {
|
|
html = '';
|
|
}
|
|
function checkForLightOn() {
|
|
for (i = 0; i < lampArray.length; i++) {
|
|
document.getElementById(i).classList.contains('circles')
|
|
if (document.getElementById(i).classList.contains("lightOn")) {
|
|
document.getElementById(i).classList = `circles`;
|
|
}
|
|
}
|
|
}
|