Skip to content

Instantly share code, notes, and snippets.

@kaydeejay

kaydeejay/index.html

Created March 21, 2018 21:19
Show Gist options
  • Save kaydeejay/f2b604c2ead12843bde7bf0070407e4e to your computer and use it in GitHub Desktop.
Save kaydeejay/f2b604c2ead12843bde7bf0070407e4e to your computer and use it in GitHub Desktop.
Download ZIP
JS Calculator
Raw
index.html
<body>
<div class="container-fluid">
<div class="title-text">
<h1>More Functions, More Problems</h1>
<p>My math teacher said to learn my arithmetic, because I wouldn't always have a calculator on me.<br/>She was right, so I built one.</p>
</div>
<div class="calculator">
<div class="grid-viewfinder">
<input id="display" type="text" name="display" id="display" disabled></input>
</div>
<div class="grid-one">
<button class="button calc-button number-button" onclick="toScreen('1')">1</button>
</div>
<div class="grid-two">
<button class="button calc-button number-button" onclick="toScreen('2')">2</button>
</div>
<div class="grid-three">
<button class="button calc-button number-button" onclick="toScreen('3')">3</button>
</div>
<div class="grid-four">
<button class="button calc-button number-button" onclick="toScreen('4')">4</button>
</div>
<div class="grid-five">
<button class="button calc-button number-button" onclick="toScreen('5')">5</button>
</div>
<div class="grid-six">
<button class="button calc-button number-button" onclick="toScreen('6')">6</button>
</div>
<div class="grid-seven">
<button class="button calc-button number-button" onclick="toScreen('7')">7</button>
</div>
<div class="grid-eight">
<button class="button calc-button number-button" onclick="toScreen('8')">8</button>
</div>
<div class="grid-nine">
<button class="button calc-button number-button" onclick="toScreen('9')">9</button>
</div>
<div class="grid-zero">
<button class="button calc-button number-button" onclick="toScreen('0')">0</button>
</div>
<div class="grid-add">
<button class="button calc-button function-button" onclick="toScreen('+')">+</button>
</div>
<div class="grid-subtract">
<button class="button calc-button function-button" onclick="toScreen('-')">-</button>
</div>
<div class="grid-multiply">
<button class="button calc-button function-button" onclick="toScreen('*')">*</button>
</div>
<div class="grid-divide">
<button class="button calc-button function-button" onclick="toScreen('/')">/</button>
</div>
<div class="grid-equals">
<button class="button calc-button eval-button" onclick="solveIt()">=</button>
</div>
<div class="grid-backspace">
<button class="button calc-button mem-button" onclick="backspace()">Backspace</button>
</div>
<div class="grid-clear-everything">
<button class="button calc-button mem-button" onclick="toScreen('c')">Clear</button>
</div>
<div class="grid-decimal">
<button class="button calc-button function-button" onclick="toScreen('.')">.</button>
</div>
</div>
<p>Code By Jones</p>
</div>
</body>
Raw
script.js
var display = document.getElementById('display');
function toScreen(val){
display.value += val;
if (val==='c'){
display.value = '';
}
}
function solveIt(){
var onScreen = display.value;
onScreen = eval(onScreen);
display.value = onScreen;
}
function backspace(){
var screenStr = display.value;
var oneLess = screenStr.length - 1;
var fixedNum = screenStr.substring(0,oneLess);
display.value = fixedNum;
}
Raw
style.css
.title-text h1 {
text-align: center;
}
.title-text p {
text-align: center;
}
.calculator {
margin: auto;
margin-top: 20px;
text-align: center;
padding: 40px 20px 20px 20px;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-radius: 30px;
box-shadow: 5px 5px #999;
width: 400px;
height: 500px;
display: grid;
grid-gap: 5px;
grid-template-areas:
'viewfinder viewfinder viewfinder viewfinder'
'clear-everything clear-everything backspace backspace'
'seven eight nine add'
'four five six subtract'
'one two three multiply'
'decimal zero equals divide';
}
.grid-viewfinder {grid-area: viewfinder;}
.grid-one {grid-area: one;}
.grid-two {grid-area: two;}
.grid-three {grid-area: three;}
.grid-four {grid-area: four;}
.grid-five {grid-area: five;}
.grid-six {grid-area: six;}
.grid-seven {grid-area: seven;}
.grid-eight {grid-area: eight;}
.grid-nine {grid-area: nine;}
.grid-zero {grid-area: zero;}
.grid-add {grid-area: add;}
.grid-subtract {grid-area: subtract;}
.grid-multiply {grid-area: multiply;}
.grid-divide {grid-area: divide;}
.grid-equals {grid-area: equals;}
.grid-backspace {grid-area: backspace;}
.grid-clear-everything {grid-area: clear-everything;}
.grid-decimal {grid-area: decimal;}
.grid-viewfinder input {
width: 90%;
height: 90%;
text-align: right;
}
.calc-button {
width: 90%;
height: 90%;
box-shadow: 2px 2px #999;
}
.calc-button:active {
box-shadow: 0 0;
transform: translateX(2px) translateY(2px);
}
.number-button {
background-color: #bbc0c9;
}
.eval-button {
background-color: #2c70dd;
}
.function-button {
background-color: #70a1ef;
}
.mem-button {
color: white;
background-color: #ce2323;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment