Skip to content

Instantly share code, notes, and snippets.

@mohamma548

mohamma548/ javascript calculator.markdown

Created July 25, 2016 08:00
Show Gist options
  • Save mohamma548/7f301d7277a8d35f410780ac009e8a52 to your computer and use it in GitHub Desktop.
Save mohamma548/7f301d7277a8d35f410780ac009e8a52 to your computer and use it in GitHub Desktop.
Download ZIP
javascript calculator
Raw
javascript calculator.markdown

javascript calculator

This simple app used to convert Ethiopian Geeze number converter to Arabic number. I hope it will introduce also the Ethiopian Geeze number to the out side world

A Pen by mohammedadem on CodePen.

License.

Raw
index.html
<body>
<div class="header"> simple calculator</div>
<div class="box">
<form name="simplecalculator">
<div class="row">
<div id="screen">
</div>
<div>
<input type=button name=clear id="clear"value=C></div>
</div>
<input type=button name= key9 value=9 class="btn">
<input type=button name= key8 value=8 class="btn">
<input type=button name= key7 value=7 class="btn">
<input type=button name= keyadd value=+ class="btn"id="operator"></br>
<input type=button name= key6 value=6 class="btn">
<input type=button name= key5 value=5 class="btn">
<input type=button name= key4 value=4 class="btn">
<input type=button name= keysub value=- class="btn"id="operator"></br>
<input type=button name= key3 value=3 class="btn">
<input type=button name= key2 value=2 class="btn">
<input type=button name= key1 value=1 class="btn">
<input type=button name= keymult value=* class="btn"id="operator"></br>
<input type=button name= key0 value=0 class="btn">
<input type=button name= keydot value=. class="btn">
<input type=button name= keyeq value== class="btn">
<input type=button name= keydiv value=/ class="btn"id="operator"></br>
</form>
</div>
</body>
Raw
script.js
$(document).ready(function(){
//$(this).attr("value");
//calling a function which clears the screen
clearScreen();
//when any button is clicked it showed up on the screen
$(".btn").click(function () {
var result= document.getElementById("screen");
if($(this).attr("value")=="="){
result.innerHTML= eval( result.innerHTML);
}
else{
result.innerHTML+= $(this).attr("value");
}
});
});
//a function which clears the screen
function clearScreen(){
document.getElementById("clear").addEventListener("click",function(){
document.getElementById("screen").innerHTML="";
});
}
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.css
.header{
font-family: lobster;
font-size: 40px;
text-align:center;
text-shadow: 2px 2px 3px;
}
#clear{
float:left;
cursor:pointer;
top:0;
position : relative;
width:60px;
height:36px;
background:#F25C81 ;
border-radius:3px;
margin:0 7px 11px 0;
text-align : center;
line-height:36px;
line-spacing:1px;
padding:0 10px;
}
.box{
margin:auto;
padding: 20px 20px 9px;
height:290px;
width: 325px;
background-color:#252727;
border-radius:5px;
box-shadow: 0px 5px 5px
}
#screen{
margin:0 7px 11px 0;
height:36px;
width:200px;
float:left;
padding:3px 3px;
border-radius:3px;
font-size:18px;
background-color:#EFF7F7;
text-align:right;
color:black;
}
.btn{
float:left;
cursor:pointer;
top:0;
position : relative;
width:60px;
height:36px;
background:white;
border-radius:3px;
margin:0 7px 11px 0;
text-align : center;
line-height:36px;
line-spacing:1px;
padding:0 10px;
}
#operator{
background:#9BE1E0 ;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment