Skip to content

Instantly share code, notes, and snippets.

@ewathedoer

ewathedoer/JavaScript Calculator.markdown

Last active May 6, 2021 17:16
Show Gist options
  • Save ewathedoer/d51a25c8b5486c55b2a4fbee3cb16742 to your computer and use it in GitHub Desktop.
Save ewathedoer/d51a25c8b5486c55b2a4fbee3cb16742 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript Calculator
Raw
index.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>JS Calculator</title>
<meta name="author" content="Designed and coded by the doer">
<meta name="description" content="The project created during Free Code Camp course according to JavaScript Calculator specification">
</head>
<body>
<div id="calculator" class="container flow-text">
<div class="row">
<div class="result">0</div>
</div>
<div class="row">
<div class="col s6">
<button class="waves-effect waves-light btn c-btn">clear</button>
</div>
<div class="col s3 offset-s3">
<button class="waves-effect waves-light btn b-btn" data-value="back">&larr;</button>
</div>
</div>
<div class="row">
<div class="col s3">
<button class="waves-effect waves-light btn">7</button>
</div>
<div class="col s3">
<button class="waves-effect waves-light btn">8</button>
</div>
<div class="col s3">
<button class="waves-effect waves-light btn">9</button>
</div>
<div class="col s3">
<button class="waves-effect waves-light btn calculation">/</button>
</div>
</div>
<div class="row">
<div class="col s3">
<button class="waves-effect waves-light btn">4</button>
</div>
<div class="col s3">
<button class="waves-effect waves-light btn">5</button>
</div>
<div class="col s3">
<button class="waves-effect waves-light btn">6</button>
</div>
<div class="col s3">
<button class="waves-effect waves-light btn calculation" data-value="*">x</button>
</div>
</div>
<div class="row">
<div class="col s3">
<button class="waves-effect waves-light btn">1</button>
</div>
<div class="col s3">
<button class="waves-effect waves-light btn">2</button>
</div>
<div class="col s3">
<button class="waves-effect waves-light btn">3</button>
</div>
<div class="col s3">
<button class="waves-effect waves-light btn calculation" data-value="-">&ndash;</button>
</div>
</div>
<div class="row">
<div class="col s3">
<button class="waves-effect waves-light btn">0</button>
</div>
<div class="col s3">
<button class="waves-effect waves-light btn">.</button>
</div>
<div class="col s3">
<button class="waves-effect waves-light btn equals">=</button>
</div>
<div class="col s3">
<button class="waves-effect waves-light btn calculation">+</button>
</div>
</div>
</div>
<section class="turn-around-mobile">
<div>
<h2>Turn your phone vertically</h2>
</div>
</section>
</body>
</html>
Raw
JavaScript Calculator.markdown

JavaScript Calculator

JavaScript Calculator built with Materialize.css. It allows running basic math calculations. The logic of calculation order is implemented.

A Pen by Ewa the doer on CodePen.

License.

Raw
script.js
var displayValue = "0";
function getLastNumber (valueToSplit) {
var splitValue = valueToSplit.split(/[*/+-]/);
// return the last element of splitValue array, so the last number
return splitValue[splitValue.length -1];
}
// set display value to zero to start with
$(document).ready(function () {
// resizing to fit the display window
var calculatorHeight = $("#calculator").height();
var windowHeight = $(window).height();
if (windowHeight < calculatorHeight) {
var scale = windowHeight / (calculatorHeight + 80);
$("#calculator").css("transform", "scale("+ scale +")");
}
$(".result").text(displayValue);
// focus for accessibility
$("#calculator").focus();
$(".btn").on("click", function () {
// check if data value is different than html value
// if pressed character is X change it into *
var pressedButton = $(this).data("value");
if (pressedButton === undefined) {
pressedButton = $(this).text();
}
// replacing errors and Infinity after being displayed
if (displayValue === "error" || displayValue === "Infinity") {
displayValue = "0";
}
switch (pressedButton) {
case ".":
// if there was one . before in the number do not add another .
var lastNumber = getLastNumber(displayValue);
if (lastNumber.indexOf(".") === -1) {
// add zero if somebody starts with . sign
if (lastNumber === "") {
displayValue += "0";
}
displayValue += pressedButton;
}
break;
case "0":
// check if displayValue is not zero before adding another 0, if the last number is not 0 (don't double 0, e.g. 3*00)
// you can't add 0 if there was one zero before and no . sign
var lastNumber = getLastNumber(displayValue);
// There was no zero or there was . sign, then add 0
if (!(lastNumber === "0" && lastNumber.indexOf(".") === -1 )) {
displayValue += pressedButton;
}
break;
case "*":
case "+":
case "-":
case "/":
var lastChar = displayValue.substring(displayValue.length - 1);
if (lastChar === "*" || lastChar === "+" || lastChar === "-" || lastChar === "/") {
displayValue = displayValue.substring(0, displayValue.length - 1) + pressedButton;
} else {
displayValue += pressedButton;
}
break;
case "back":
if (displayValue.length > 1) {
displayValue = displayValue.slice(0, -1);
} else {
displayValue = "0";
}
break;
case "clear":
displayValue = "0";
break;
case "=":
// evaluate display value with logical order of Math
// convert the number to string for further operations on a string
// catch exceptions
try{
// displayValue = math.eval(displayValue).toString();
displayValue = parseFloat(math.eval(displayValue).toPrecision(8)).toString();
}catch(ex){
displayValue = "error";
}
break;
default:
if (displayValue === "0") {
displayValue = pressedButton;
} else {
displayValue += pressedButton;
}
}
// show the final result
$(".result").text(displayValue);
});
// keyboard accessibility
$("body").on("keypress", function(e) {
var keyPressed = String.fromCharCode(e.which);
// enter to equal
if (e.which === 13) {
keyPressed = "=";
}
// * to x
if (e.which === 42) {
keyPressed = "x";
}
// - to &ndash;
if (e.which === 45) {
$(".btn[data-value='-']").trigger("click");
}
else if (e.which !== 8 && e.which !== 27) {
$(".btn:contains('"+ keyPressed +"')").trigger("click");
}
return false;
}).on("keyup", function(e) {
// backspace
if (e.which === 8) {
$(".btn[data-value='back']").trigger("click");
}
// esc to clear
if (e.which === 27) {
$(".btn:contains('clear')").trigger("click");
}
return false;
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.2.1/math.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.2.1/math.map"></script>
Raw
style.css
body {
background-color: grey;
}
.result {
border: 10px solid #121212;
margin-top: 1em;
font-size: 2em;
text-align: right;
color: #fff;
padding-right: 0.1em;
word-wrap: break-word;
}
.btn {
height: 2em;
font-size: 2em;
width: 2em;
padding: 0;
}
.btn.calculation {
background-color: #ff9800;
}
.btn.equals {
background-color: #212121;
}
.btn.c-btn {
background-color: #B6B6B6;
width: auto;
padding: 0 1em;
}
.btn.b-btn {
background-color: #B6B6B6;
}
.row .col {
text-align: center;
}
#calculator {
max-width: 500px;
transform-origin: top;
}
.turn-around-mobile {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
display: none;
background: #fff url(http://theonewhodo.es/weatherapp-images/mobile-vertical.png) no-repeat;
background-position: center center;
text-align: center;
}
.turn-around-mobile h2 {
padding: 0 0.3em;
}
.turn-around-mobile h2 {
font-size: 3em;
}
@media only screen and (max-height: 415px) and (orientation: landscape){
.turn-around-mobile {
display: block;
}
section:not(.turn-around-mobile) {
display: none;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment