**JavaScript **
const bod = document.querySelector('body');
bod.style.backgroundColor = "Black" ;
const para = document.createElement('p');
para.textContent = 'This is not a counting game even if there is a number button.';
bod.appendChild(para);
para.setAttribute('class','text');
/* const button1 = document.createElement('button');
const button2 = document.createElement('button');
button1.textContent = '1';
button2.textContent = '2';
bod.appendChild(button1);
bod.appendChild(button2);
button1.setAttribute('class','button1color');
button2.setAttribute('class','button2color'); */
var index = 0;
var accounts = [];
function createVariables(){
accounts[0] = document.createElement('button');
accounts[0].textContent = 0;
accounts[0].addEventListener('click', function(){
bod.remove(accounts[0]);
bod.appendChild(accounts[1]);
console.log(accounts[1]);
});
bod.appendChild(accounts[0]);
for (var i = 1; i <= 20; ++i) {
accounts[i] = document.createElement('button');
accounts[i].textContent = i;
accounts[i].addEventListener('click', function(){
bod.remove(accounts[i]);
bod.appendChild(accounts[i+1])
});
}
}
createVariables();
/* button1.addEventListener('click', function(){
button2.setAttribute('class','show button button2color');
button1.setAttribute('class', 'hide');
});
button2.addEventListener('click', function(){
button1.setAttribute('class','show button button1color');
button2.setAttribute('class', 'hide');
}); */
**CSS**
.text{
font-size:25px;
color:white;
}
.hide{
display:hide;
}
.button {
padding: 5px;
color: white;
background-color: blue;
font-size: 25px;
font-weight: 500;
}
.button1color{
background-color:Red;
}
.button2color{
background-color:Orange;
}