Skip to content

Instantly share code, notes, and snippets.

@Kornil

Kornil/Simple Calculator.markdown

Last active April 2, 2016 13:31
Show Gist options
  • Save Kornil/caf0ce79150b9c88619d4353f7ac8679 to your computer and use it in GitHub Desktop.
Save Kornil/caf0ce79150b9c88619d4353f7ac8679 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Calculator
Raw
index.html
<body>
<div class="calculator">
<input class="screen" readonly type="textbox"></input>
<div class="row">
<div class="container-fluid">
<div class="col-xs-3">
<div value="C" class="button">C</div>
<div value="7" class="button">7</div>
<div value="4" class="button">4</div>
<div value="1" class="button">1</div>
<div value="0" class="button">0</div>
</div>
<div class="col-xs-3">
<div value="CE" class="button">CE</div>
<div value="8" class="button">8</div>
<div value="5" class="button">5</div>
<div value="2" class="button">2</div>
<div value="." class="button">.</div>
</div>
<div class="col-xs-3">
<div value="n" class="button">&#177;</div>
<div value="9" class="button">9</div>
<div value="6" class="button">6</div>
<div value="3" class="button">3</div>
<div value="=" class="button">=</div>
</div>
<div class="col-xs-3">
<div value="%" class="button">%</div>
<div value="/" class="button">/</div>
<div value="*" class="button">*</div>
<div value="-" class="button">-</div>
<div value="+" class="button">+</div>
</div>
</div>
</div>
</div>
</body>
Raw
script.js
var res = "";
$(document).ready(function(){
$(".button").click(function(){
var num = $(this).attr("value");
if(num === "C"){
res = "";
$(".screen").val("");
}
else if(num === "CE"){
res = res.slice(0, -1);
$(".screen").val(res);
}
else if(num === "=") {
res = eval(res);
$(".screen").val(res);
res = "";
}
else if(num === "n"){
res = eval(res) * -1;
if (isNaN(res)){
res = "";
}
$(".screen").val(res);
}
else{
if(num === "+"||num === "-" || num === "*" || num === "/"){
if (isNaN(res)){
res = "";}
}
res += num;
$(".screen").val(res);
}
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
Simple Calculator.markdown
Raw
style.css
body {
background: url(https://images.unsplash.com/photo-1432821579285-1b649e5b1ce3?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375) no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
padding-top: 100px;
font-weight: bold;
}
.calculator {
width: 250px;
height: 350px;
background: red;
margin: 50px auto 0;
padding: 5px 10px;
border-radius: 10px;
background: #ececec;
box-shadow: 4px 7px 10px 3px #000, inset 0 0 2px 0 #000;
background-image: -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 6%, hsla(0, 0%, 100%, .1) 7.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 4%, hsla(0, 0%, 0%, .03) 4.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 1.2%, hsla(0, 0%, 100%, .15) 2.2%), linear-gradient(180deg, hsl(0, 0%, 78%) 0%, hsl(0, 0%, 85%) 47%, hsl(0, 0%, 78%) 53%, hsl(0, 0%, 70%)100%);
}
.screen {
width: 200px;
height: 50px;
background: #d4d4d4;
margin: 15px;
border-radius: 2px;
text-align: right;
padding-top: 5px;
padding-right: 5px;
overflow: hidden;
background: -webkit-linear-gradient(top, #bebebe 0%, #d4d4d4 100%);
background: -linear-gradient(top, #bebebe 0%, #d4d4d4 100%);
background: -moz-linear-gradient(top, #bebebe 0%, #d4d4d4 100%);
}
.button {
cursor: pointer;
width: 40px;
height: 30px;
background: #a5a5a5;
margin: 10px auto 20px auto;
border-radius: 4px;
padding-top: 5px;
box-shadow: 0 1px 2px #000;
border-bottom: 1px solid #555;
-moz-transition: 0.1s;
-webkit-transition: 0.1s;
transition: 0.1s;
position: relative;
background: -webkit-linear-gradient(top, #c0c0c0 0%, #8f8f8f 100%);
background: -linear-gradient(top, #c0c0c0 0%, #8f8f8f 100%);
background: -moz-linear-gradient(top, #c0c0c0 0%, #8f8f8f 100%);
}
.button:hover {
background: -webkit-linear-gradient(top, #c0c0c0 0%, #737373 100%);
background: -linear-gradient(top, #c0c0c0 0%, #737373 100%);
background: -moz-linear-gradient(top, #c0c0c0 0%, #737373 100%);
}
.button:active {
border-bottom-width: 0;
top: 1px;
}
.container-fluid {
text-align: center;
}
.col-xs-3 {
padding: 0;
}
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