Skip to content

Instantly share code, notes, and snippets.

@omidgharib

omidgharib/index.html

Created January 28, 2013 11:27
Show Gist options
  • Save omidgharib/4654765 to your computer and use it in GitHub Desktop.
Save omidgharib/4654765 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by <OMG. This is just a Calculator
Raw
index.html
<!--Simpe calc by <OMG[Github.com/omidgharib] -->
<body>
<div class="container">
<a id="OMG" href="http://www.github.com/omidgharib"> < OMG </a>
<div class="calc">
<form id='calc_form' action="">
<div class="pt1 mb1 lh4 row cover">
<input type="text" id='screen' placeholder='0'>
<button type='button' id='clear' onclick='clear_click();'> C </button>
</div>
<div class="row cover">
<button type='button' id='number7' onclick='addnum_click(this);'> 7 </button>
<button type='button' id='number8' onclick='addnum_click(this);'> 8 </button>
<button type='button' id='number9' onclick='addnum_click(this);'> 9 </button>
<button type='button' id='division' onclick='division_click();'> / </button>
</div>
<div class="row cover">
<button type='button' id='number4' onclick='addnum_click(this);'> 4 </button>
<button type='button' id='number5' onclick='addnum_click(this);'> 5 </button>
<button type='button' id='number6' onclick='addnum_click(this);'> 6 </button>
<button type='button' id='multiply' onclick='multiply_click();'> * </button>
</div>
<div class="row cover">
<button type='button' id='number1' onclick='addnum_click(this);'> 1 </button>
<button type='button' id='number2' onclick='addnum_click(this);'> 2 </button>
<button type='button' id='number3' onclick='addnum_click(this);'> 3 </button>
<button type='button' id='subtract' onclick='subtract_click();'> - </button>
</div>
<div class="row cover">
<button type='button' id='number0' onclick='addnum_click(this);'> 0 </button>
<button type='button' id='dot' onclick='addnum_click(this);'> . </button>
<button type='button' id='equal' onclick='equal_click();'> = </button>
<button type='button' id='plus' onclick='plus_click();' > + </button>
</div>
</form>
</div>
</div>
</body>
Raw
script.js
var first_operand;
var second_operand;
var first_operand_set=false;
var operator;
function plus_click() {
set_operator('+');
}
function subtract_click() {
set_operator('-');
}
function multiply_click() {
set_operator('*');
}
function division_click() {
set_operator('/');
}
function set_operator(op) {
if (document.getElementById('screen').value!='') {
var str = document.getElementById('screen').value;
document.getElementById('screen').value ='';
if (isNaN(str)) { alert('Please input number(digits)!!!\n Not a string'); }
else
{
if (first_operand_set == false)
{
first_operand = str;
first_operand_set = true;
}
else
{
second_operand=str;
equal_click();
}
operator=op;
document.getElementById('screen').value ='';
if (first_operand!='') { document.getElementById('screen').placeholder=first_operand; }
}
}
else alert('Please input number!!!');
changecolor_operator();
document.getElementById('screen').focus();
}
function equal_click() {
var result;
if (first_operand_set == true && document.getElementById('screen').value!='' )
{
second_operand = document.getElementById('screen').value;
document.getElementById('screen').value = '';
first_operand_set =false;
}
if (first_operand!='' && second_operand!='')
{
try
{
switch (operator)
{
case '+': result = Number(first_operand) + Number(second_operand);
break;
case '-': result = Number(first_operand) - Number(second_operand);
break;
case '*': result = Number(first_operand) * Number(second_operand);
break;
case '/': result = Number(first_operand) / Number(second_operand);
break;
}
}
catch(error)
{
txt='An error occured.\n';
txt+='Error description:'+ error.message +'\n Click OK to continue...';
alert(txt);
}
first_operand = result;
second_operand= '';
operator = '';
document.getElementById('screen').value = result;
}
else alert('Please input another number!!');
changecolor_operator();
document.getElementById('screen').focus();
}
function clear_click() {
first_operand = '';
second_operand = '';
first_operand_set = false;
operator= '';
document.getElementById('screen').value = '';
document.getElementById('screen').placeholder = '0';
changecolor_operator();
}
function addnum_click(id) {
document.getElementById('screen').value += id.innerText;
}
function changecolor_operator() {
switch(operator)
{
case '+' : document.getElementById('plus').style.color='green';
break;
case '-' : document.getElementById('subtract').style.color='green';
break;
case '*' : document.getElementById('multiply').style.color='green';
break;
case '/' : document.getElementById('division').style.color='green';
break;
default :
{
document.getElementById('plus').style.color='#eee';
document.getElementById('subtract').style.color='#eee';
document.getElementById('multiply').style.color='#eee';
document.getElementById('division').style.color='#eee';
}
}
}
Raw
style.css
body {
background-color: #eee;
}
div.container {
width : 950px;
background-color : #eee;
margin : 20px auto;
}
div.calc{
width : 230px;
min-height : 200px;
margin : 10px auto;
padding-left: 5px;
border : 1px solid #ccc;
background-color: #ddd;
}
div.calc div.row {
margin-bottom: 5px;
}
div.calc form input#screen {
width : 160px;
height: 25px;
border: 1px solid #ddd;
float : left;
border-radius : 3px;
margin-right : 5px;
}
div.calc form button {
width : 50px;
height : 30px;
color : #eee;
float : left;
/*border : 1px solid #ddd;*/
line-height : 25px;
border-radius : 5px;
margin-right : 5px;
background : gradient(linear, left top, left bottom, from(#666), to(#333));
background : -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
background : -moz-linear-gradient(rgb(102, 102, 102), rgb(51, 51, 51)) repeat scroll 0% 0% transparent;
-ms-filter : "progid:DXImageTransform.Microsoft.gradient(startColorstr='#333', endColorstr='#666')";
background : -ms-gradient(linear, left top, left bottom, from(#333), to(#666));
background : -o-gradient(linear, left top, left bottom, from(#333), to(#666));
}
div.calc form button#clear {
color: red;
}
div.calc form button:hover {
background : gradient(linear, left top, left bottom, from(#333), to(#666));
background : -webkit-gradient(linear, left top, left bottom, from(#333), to(#666));
background : -moz-linear-gradient(rgb(51, 51, 51), rgb(102, 102, 102)) repeat scroll 0% 0% transparent;
-ms-filter : "progid:DXImageTransform.Microsoft.gradient(startColorstr='#333', endColorstr='#666')";
background : -ms-gradient(linear, left top, left bottom, from(#333), to(#666));
background : -o-gradient(linear, left top, left bottom, from(#333), to(#666));
}
div.calc form button#clear {
margin-left: auto;
}
#OMG {
display : block;
color : #333;
text-align : center;
font-size :12px;
text-decoration : none;
}
#OMG:hover {
color: #66a;
}
@AliGH
Copy link

AliGH commented Jan 28, 2013

:D

@omidgharib
Copy link
Author

:))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment