Skip to content

Instantly share code, notes, and snippets.

@StrikingLoo

StrikingLoo/calculator.markdown

Created October 5, 2016 01:55
Show Gist options
  • Save StrikingLoo/44d456399963f28554b35964bab1d63f to your computer and use it in GitHub Desktop.
Save StrikingLoo/44d456399963f28554b35964bab1d63f to your computer and use it in GitHub Desktop.
Download ZIP
Calculator
Raw
index.html
<div class='container-fluid'>
<body>
<div class='container contains'>
<div class='row'>
<h1 id='display'>Display</h1></div>
<div class='row'>
<button class='btn' onclick='erase();'>AC</button>
<button class='btn' onclick='doesNothing();'>EB</button>
<button class='btn' onclick='operate(5);'>%</button>
<button class='btn' onclick='operate(2);'>/</button>
</div>
<br/>
<div class='row'>
<button class='btn' onclick='writeOnDisp(7);'>7</button>
<button class='btn' onclick='writeOnDisp(8);'>8</button>
<button class='btn' onclick='writeOnDisp(9);'>9</button>
<button class='btn' onclick='operate(1);'>*</button>
</div>
<br/>
<div class='row'>
<button class='btn' onclick='writeOnDisp(4);'>4</button>
<button class='btn' onclick='writeOnDisp(5);'>5</button>
<button class='btn' onclick='writeOnDisp(6);'>6</button>
<button class='btn' onclick='operate(3);'>-</button>
</div>
<br/>
<div class='row'>
<button class='btn' onclick='writeOnDisp(1);'>1</button>
<button class='btn' onclick='writeOnDisp(2);'>2</button>
<button class='btn' onclick='writeOnDisp(3);'>3</button>
<button class='btn' onclick='operate(4);'>+</button>
</div>
<br/>
<div class='row'>
<button class='btn' onclick='writeOnDisp(0);'>0</button>
<button class='btn' onclick='writeOnDisp(' . ');'>.</button>
<button class='btn btn-large' onclick='equal();'>=</button>
</div>
</div>
</body>
</div>
Raw
script.js
overwrite=true;
lastNum=NaN;
ops=0;
function writeOnDisp(something){ d=document.getElementById('display');
t=document.createTextNode(something)
if(d.textContent==='Display'||d.textContent==='0'||overwrite)
{while(d.firstChild){d.removeChild(d.firstChild);};
overwrite=false;}
d.appendChild(t);
overwrite=false;
}
function erase(){ d=document.getElementById('display');
while(d.firstChild){ d.removeChild(d.firstChild); } d.appendChild(document.createTextNode(0));
lastNum=NaN;
ops=0;
}
function operate(op){ d=document.getElementById('display');
a=parseInt(d.textContent);
if(!isNaN(a)){
if(isNaN(lastNum)){
lastNum=a;
overwrite=true;}
else{ /*times div diff sum mod */
if (ops===1){
b=lastNum*a;
}
else if (ops===2){
b=lastNum/a;
}
else if (ops===3){
b=lastNum-a;
}
else if (ops===4){
b=lastNum+a;
}
else if (ops===5){
b=lastNum%a;
}
overwrite=true;
while(d.firstChild){d.removeChild(d.firstChild);}
d.appendChild(document.createTextNode(b));
lastNum=b;
overwrite=true;
}
ops=op;
}
}
function equal(){
d=document.getElementById('display');
a=parseInt(d.textContent);
if(!isNaN(a)){
if (ops===1){
b=lastNum*a;
}
else if (ops===2){
b=lastNum/a;
}
else if (ops===3){
b=lastNum-a;
}
else if (ops===4){
b=lastNum+a;
}
else if (ops===5){
b=lastNum%a;
}
overwrite=true;
while(d.firstChild){d.removeChild(d.firstChild);}
d.appendChild(document.createTextNode(b));
lastNum=b;
overwrite=true;
ops=0;
}
}
Raw
style.css
button {
font-size:30px;
color:#FF0000;
background-color:#55CCCC;
width:42px;
}
.btn-large{
width:88px;
}
.contains {
background-color:orange;
text-align:center;
padding:10px;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment