Created
January 28, 2013 11:27
-
-
Save omidgharib/4654765 to your computer and use it in GitHub Desktop.
A CodePen by <OMG. This is just a Calculator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
:D