Skip to content

Instantly share code, notes, and snippets.

@andreburto
Created February 13, 2018 00:01
Show Gist options
  • Save andreburto/e633ddeaafee7358523cac93a9336b63 to your computer and use it in GitHub Desktop.
Save andreburto/e633ddeaafee7358523cac93a9336b63 to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment