function numberPad() {

	const numberPadContainer = document.createElement('div');
	numberPadContainer.style.position = 'absolute';
	numberPadContainer.style.marginLeft = '1100px';
	numberPadContainer.style.display = 'flex';
	numberPadContainer.style.flexWrap = 'wrap';
	numberPadContainer.style.width = '160px';



	function createButton(number) {
	    
		const button = document.createElement('button');
		button.textContent = number;
		button.style.width = '50px';
		button.style.height = '35px';
		button.style.color = 'white';
		button.addEventListener('click', function () {
			numberPadSpin(number);
		});

  if(number == 0)
        {
            button.style.backgroundColor = 'rgb(146, 196, 150)';
        }
        if(numBlack.includes(parseInt(number))){
            button.style.backgroundColor = 'rgb(68, 60, 60)';
        }
       
        if(numRed.includes(parseInt(number))){
            button.style.backgroundColor = 'rgb(221, 82, 82)';
        }





		return button;
	}
	

	function createPlaceholder() {
		const placeholder = document.createElement('div');
		placeholder.style.width = '50px';
		placeholder.style.height = '35px';
		placeholder.style.visibility = 'hidden';
		return placeholder;
	}

	numberPadContainer.appendChild(createPlaceholder());
	numberPadContainer.appendChild(createButton('0'));
	numberPadContainer.appendChild(createPlaceholder());

	for (let i = 1; i <= 36; i++) {
		numberPadContainer.appendChild(createButton(i.toString()));
	}

	return numberPadContainer;

}

function numberPadMessage(){
	// Number Pad Message
	const messageDiv = document.createElement('div');
	messageDiv.innerHTML = "The buttons right are <br/>for playing a live table.";
	messageDiv.style.position = 'absolute';
	messageDiv.style.marginLeft = '910px';
	messageDiv.style.marginTop = '410px';
	messageDiv.style.fontSize = '18px';

	return messageDiv;
}

