Keypad

Posted on : 24th April 2022 | Author : @ByDev24


						<div class="keypad-block">
	<div class="keypad-screen" id="keypad-screen"></div>
	<div class="keypad-buttons">
		<table cellpadding="5" width="300" align="center">
			<tbody><tr>
				<td width="100">
					<button type="button" onclick="inputNumber(1)">1</button>
				</td>
				<td width="100">
					<button type="button" onclick="inputNumber(2)">2</button>
				</td>
				<td width="100">
					<button type="button" onclick="inputNumber(3)">3</button>
				</td>
			</tr>
			<tr>
				<td>
					<button type="button" onclick="inputNumber(4)">4</button>
				</td>
				<td>
					<button type="button" onclick="inputNumber(5)">5</button>
				</td>
				<td>
					<button type="button" onclick="inputNumber(6)">6</button>
				</td>
			</tr>
			<tr>
				<td>
					<button type="button" onclick="inputNumber(7)">7</button>
				</td>
				<td>
					<button type="button" onclick="inputNumber(8)">8</button>
				</td>
				<td>
					<button type="button" onclick="inputNumber(9)">9</button>
				</td>
			</tr>
			
			<tr>
				<td>
					<button type="button" onclick="removeBackNumber()">Back</button>
				</td>
				<td>
					<button type="button" onclick="inputNumber(0)">0</button>
				</td>
				<td>
					<button type="button" onclick="clearScreen()">Clear</button>
				</td>
			</tr>
		</tbody></table>
	</div>
</div>


						 .keypad-block {width: 350px;margin: 0 auto;}

.keypad-screen {background: white;padding: 10px;border-radius: 5px;box-shadow: inset 0px 0px 2px 1px #00000021;font-size: 30px;text-align: right;height: 55px;}

.keypad-buttons button {width: 100%;font-size: 20px;padding: 20px 10px;cursor: pointer;background: #fff;border: none;border-radius: 4px;box-shadow: 3px 3px 4px #00000038;transition-duration: 0.4s;}

.keypad-buttons {background: #f9f9f9;}

.keypad-buttons button:active {box-shadow: none;transform: translate(4px, 4px);}
.keypad-buttons {
    background: #f9f9f9;
    padding: 10px 10px;
}


						//Enter keypad value
const inputNumber = (value) => {
	var enertedValue = document.querySelector("#keypad-screen").innerHTML.length
	if(enertedValue > 21){
		alert("Max limit reached!")
		return false
	}
	document.querySelector("#keypad-screen").innerHTML += value
}

//Remove back value
const removeBackNumber = () => {
	var insertedValue = document.querySelector("#keypad-screen").innerHTML.toString().split('');
	insertedValue.pop()
	document.querySelector("#keypad-screen").innerHTML = ''
	for(var i = 0; i < insertedValue.length; i++){
		document.querySelector("#keypad-screen").innerHTML += insertedValue[i]
	}
}

//Clear keypad screen
const clearScreen = () => {
	document.querySelector("#keypad-screen").innerHTML = ''
}