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.
<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">←</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="-">–</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> |
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.
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 – | |
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; | |
}); | |
}); | |
<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> |
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; | |
} | |
} | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" /> |