andreburto · February 13, 2018 00:01
diff --git a/calculator1.html b/calculator1.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>Calculator</title>
 		<script>

 function checkSize() {
 	var html = document.documentElement;
 	var divC = document.getElementById("interface");
 	
 	// Calculate horizontal spacing.
 	var divCX = Math.floor((html.clientWidth - divC.offsetWidth) / 2);
 	
 	// Calculate vertical spacing.
 	var divCY = Math.floor((html.clientHeight - divC.offsetHeight) / 2);

 	// Assign positions to the two div elements.
 	divC.style.top = divCY + "px";
 	divC.style.left = divCX + "px";
 }

 function btnPress(nmbrEl) {
 	var display = document.getElementById("textDisplay");
 	display.innerText += nmbrEl.innerText;
 }

 		</script>
 		<style>
 		
 div#interface {
 	position: absolute;
 	margin: 0px;
 	background-color: #6666ee;
 }

 div#interfaceBody {
 	margin: 0px;
 	padding: 0px;
 	background-color: transparent;
 }	

 button.nmbr {
 	height: 100px;
 	width: 100px;
 	font-size: x-large;
 }

 table, tbody, tr {
 	border-collapse: collapse;
 	background-color: transparent;
 }

 td {
 	width: 25%;
 	padding: 5px;
 }

 td.ifacedisplay {
 	text-align: center;
 	margin: auto;
 }

 td.ifacedisplay div {
 	background-color: #deedee;
 	border: 1px solid #000000;
 	margin: auto;
 	font-size: xx-large;
 	text-align: right;
 	padding-left: 10px;
 	padding-right: 10px;
 }
 		
 		</style>
 	</head>
 	<body onload="checkSize()">
 		<div id="interface">
 			<div style="interfaceBody">
 				<table>
 					<tbody>
 						<tr>
 							<td class="ifacedisplay" colspan="5"><div id="textDisplay">0</div></td>
 						</tr>
 						<tr>
 							<td><button class="nmbr" onclick="btnPress(this)">7</button></td>
 							<td><button class="nmbr" onclick="btnPress(this)">8</button></td>
 							<td><button class="nmbr" onclick="btnPress(this)">9</button></td>
 							<td><button class="nmbr" onclick="btnPress(this)">/</button></td>
 						</tr>
 						<tr>
 							<td><button class="nmbr" onclick="btnPress(this)">4</button></td>
 							<td><button class="nmbr" onclick="btnPress(this)">5</button></td>
 							<td><button class="nmbr" onclick="btnPress(this)">6</button></td>
 							<td><button class="nmbr" onclick="btnPress(this)">*</button></td>
 						</tr>
 						<tr>
 							<td><button class="nmbr" onclick="btnPress(this)">1</button></td>
 							<td><button class="nmbr" onclick="btnPress(this)">2</button></td>
 							<td><button class="nmbr" onclick="btnPress(this)">3</button></td>
 							<td><button class="nmbr" onclick="btnPress(this)">-</button></td>
 						</tr>
 						<tr>
 							<td><button class="nmbr" onclick="btnPress(this)">0</button></td>
 							<td><button class="nmbr" onclick="btnPress(this)">.</button></td>
 							<td><button class="nmbr" onclick="btnPress(this)">C</button></td>
 							<td><button class="nmbr" onclick="btnPress(this)">+</button></td>
 						</tr>
 					</tbody>
 				</table>
 			</div>
 		</div>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Calculator</title>
	<script>

	function checkSize() {
	var html = document.documentElement;
	var divC = document.getElementById("interface");

	// Calculate horizontal spacing.
	var divCX = Math.floor((html.clientWidth - divC.offsetWidth) / 2);

	// Calculate vertical spacing.
	var divCY = Math.floor((html.clientHeight - divC.offsetHeight) / 2);

	// Assign positions to the two div elements.
	divC.style.top = divCY + "px";
	divC.style.left = divCX + "px";
	}

	function btnPress(nmbrEl) {
	var display = document.getElementById("textDisplay");
	display.innerText += nmbrEl.innerText;
	}

	</script>
	<style>

	div#interface {
	position: absolute;
	margin: 0px;
	background-color: #6666ee;
	}

	div#interfaceBody {
	margin: 0px;
	padding: 0px;
	background-color: transparent;
	}

	button.nmbr {
	height: 100px;
	width: 100px;
	font-size: x-large;
	}

	table, tbody, tr {
	border-collapse: collapse;
	background-color: transparent;
	}

	td {
	width: 25%;
	padding: 5px;
	}

	td.ifacedisplay {
	text-align: center;
	margin: auto;
	}

	td.ifacedisplay div {
	background-color: #deedee;
	border: 1px solid #000000;
	margin: auto;
	font-size: xx-large;
	text-align: right;
	padding-left: 10px;
	padding-right: 10px;
	}

	</style>
	</head>
	<body onload="checkSize()">
	<div id="interface">
	<div style="interfaceBody">
	<table>
	<tbody>
	<tr>
	<td class="ifacedisplay" colspan="5"><div id="textDisplay">0</div></td>
	</tr>
	<tr>
	<td><button class="nmbr" onclick="btnPress(this)">7</button></td>
	<td><button class="nmbr" onclick="btnPress(this)">8</button></td>
	<td><button class="nmbr" onclick="btnPress(this)">9</button></td>
	<td><button class="nmbr" onclick="btnPress(this)">/</button></td>
	</tr>
	<tr>
	<td><button class="nmbr" onclick="btnPress(this)">4</button></td>
	<td><button class="nmbr" onclick="btnPress(this)">5</button></td>
	<td><button class="nmbr" onclick="btnPress(this)">6</button></td>
	<td><button class="nmbr" onclick="btnPress(this)">*</button></td>
	</tr>
	<tr>
	<td><button class="nmbr" onclick="btnPress(this)">1</button></td>
	<td><button class="nmbr" onclick="btnPress(this)">2</button></td>
	<td><button class="nmbr" onclick="btnPress(this)">3</button></td>
	<td><button class="nmbr" onclick="btnPress(this)">-</button></td>
	</tr>
	<tr>
	<td><button class="nmbr" onclick="btnPress(this)">0</button></td>
	<td><button class="nmbr" onclick="btnPress(this)">.</button></td>
	<td><button class="nmbr" onclick="btnPress(this)">C</button></td>
	<td><button class="nmbr" onclick="btnPress(this)">+</button></td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</body>
	</html>