Skip to content

Instantly share code, notes, and snippets.

@johnifegwu

johnifegwu/Calculator2.html

Last active April 24, 2020 06:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johnifegwu/68c8d776ab58599bc910506aaa9b58b0 to your computer and use it in GitHub Desktop.
Save johnifegwu/68c8d776ab58599bc910506aaa9b58b0 to your computer and use it in GitHub Desktop.
Download ZIP
HTML 5, CSS and JavaScript Example (Calculator)
Raw
Calculator2.html
<html>
<head>
<style>
.Head
{
font-size:67px;
width:100%;
background:Gray;
color:Silver
}
.TextBox
{
width:100%;
font-size:67px;
color:Blue
}
.TextBox2
{
width:100%;
font-size:67px;
color:Red
}
.Btn
{
width:24%;
font-size:67px;
color:Green
}
.Btn2
{
width:100%;
font-size:67px;
color:Black
}
</style>
<script>
var op = "+";
function box(query){
return document.getElementById(query)
}
function addNum(){
var num1 = parseFloat(box("xText").value);
var num2 = parseFloat(box("yText").value);
var rslt = box("Result");
var value = 0.0
if ((num1 != 0.0) && (num2 != 0.0))
{
if (op == "+")
{
value = num1+num2;
}else if(op == "-")
{
value = num1-num2;
}else if(op == "*")
{
value = num1*num2;
}else if(op == "/")
{
value = num1/num2;
}
var num = value.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
rslt.value = num;
op = "+";
box("xText").value = "";
box("yText").value = "";
box("xText").focus();
}
}
function setFocus(){
if (screen.height>640)
{
s = (screen.height / 640) * 67;
setResolution(s);
}
var txt = box("xText");
txt.focus();
}
function setResolution(s) {
box("xText").style.fontSize = s + "px";
box("yText").style.fontSize = s + "px";
box("head").style.fontSize = s + "px";
box("btnEnt").style.fontSize = s + "px";
box("btnAdd").style.fontSize = s + "px";
box("btnSub").style.fontSize = s + "px";
box("btnDiv").style.fontSize = s + "px";
box("btnMul").style.fontSize = s + "px";
box("Result").style.fontSize = s + "px";
}
function doEvent(id){
var b = box(id);
b.onclick();
}
</script>
</head>
<body onload="setFocus()">
<h2 class="Head" ID="head">Calculator</h2>
<input type="Number" class="TextBox" ID="xText" placeholder="0.0" onchange="box('yText').focus();"><br/>
<input type="Number" class="TextBox" ID="yText" placeholder="0.0" onchange="box('btnEnt').focus();"><br/>
<input type="Button" class="Btn" ID="btnAdd" Value="+" onclick="op = box('btnAdd').value;">
<input type="Button" class="Btn" ID="btnSub" Value="-" onclick="op = box('btnSub').value;">
<input type="Button" class="Btn" ID="btnMul" Value="*" onclick="op = box('btnMul').value;">
<input type="Button" class="Btn" ID="btnDiv" Value="/" onclick="op = box('btnDiv').value;">
<br/>
<input type="Button" class="Btn2" ID="btnEnt" Value="Enter" onclick="addNum()">
</br>
<input disabled="true" type="Text" class="TextBox2" ID="Result" placeholder="0.0">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment