Welcome folks today in this blog post we will be building a material calculator using the materialize framework in html and javascript. All the full source code of the application is shown below
Get Started
In order to get started we need to create index.html file and copy paste the following code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="calculator #efebe9 brown lighten-5">
<div class="form">
<div class="row">
<input class=" display_result" id="display" type="text" disabled />
<input class=" display" id="display" type="text" disabled />
</div>
<div class="row">
<button type="button" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn music">♫</button>
<button type="button" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key sqrt">√</button>
<button type="button" value="^2" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key power2">x<sup>2</sup></button>
<button type="button" value="^3" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key power3">x<sup>3</sup></button>
</div>
<div class="row">
<button type="button" value="c" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key clear">c</button>
<button type="button" value="<--" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key backspace "><</button>
<button type="button" value="%" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn button percent">%</button>
<button type="button" value="/" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button operand">/</button>
</div>
<div class="row">
<button type="button" value="7" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button">7</button>
<button type="button" value="8" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button">8</button>
<button type="button" value="9" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button">9</button>
<button type="button" value="*" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button operand">*</button>
</div>
<div class="row">
<button type="button" value="4" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button">4</button>
<button type="button" value="5" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button">5</button>
<button type="button" value="6" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button">6</button>
<button type="button" value="-" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn button operand">-</button>
</div>
<div class="row">
<button type="button" value="1" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button">1</button>
<button type="button" value="2" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button">2</button>
<button type="button" value="3" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button">3</button>
<button type="button" value="+" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button operand">+</button>
</div>
<div class="row">
<button type="button" value="0" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button zero">0</button>
<button type="button" value="." class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key button">.</button>
<button type="button" value="=" class="waves-effect waves-light#bcaaa4 brown lighten-3 btn key key--equal">=</button>
</div>
<audio id="kiss" controls>
<source src="http://online-kissfm.tavrmedia.ua/KissFM" type="audio/mpeg">
</audio>
</div>
</div>
</body>
</html>
Now just create style.css file for styling the calculator and copy paste the below code
style.css
html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 20%, #ccc);
background-size: cover;
}
body {
text-align: center;
}
.form input {
padding-left: 10px;
font: bold 30px Arial, sans-serif;
height: auto;
}
.form input.display_result {
font-size: 22px;
}
.btn {
width: 20px;
font: bold 15px Arial, sans-serif;
color: #d0dfdf;
z-index: 1;
}
.btn.zero {
width: 125px;
}
.btn:hover {
color: #fff;
}
.calculator {
width: 300px;
height: auto;
margin: 50px auto;
padding: 20px 20px 9px;
border-radius: 3px;
box-shadow: 0px 4px #d0d0d0, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
#loc1 {
position: absolute;
top: 20%;
left: 10%;
cursor: pointer;
z-index: 9999;
}
#loc2 {
position: absolute;
top: 20%;
right: 10%;
cursor: pointer;
z-index: 9999;
}
.larger, .close img {
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
.locate:hover .larger{
transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-moz-transform: scale(1.5);
}
.close {
margin: auto;
width: 0px;
cursor: pointer;
}
#kiss {
width: 100%;
margin: auto;
display: none;
}
Now create the script.js file for handling the logic of the calculator and copy paste the below code
script.js
var x = null;
var y = null;
var googleAPI = '';
var a = null;
var result = null;
var d = '';
var f ='';
var e = null;
$(function(){
//locate
$('.locate').on('click', function getLocate() {
navigator.geolocation.getCurrentPosition(
function(position) {
x = position.coords.latitude;
y = position.coords.longitude;
var coordsAPI = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + x + ',' + y + '&key=AIzaSyBe71JKODGXWRgD8wdiL-4USKIG76o5pfk';
googleAPI = coordsAPI;
$.ajax({
url: googleAPI,
success: function(data) {
result = data;
alert(result.results[0].formatted_address);
}
});
}
);
});
$('.close').on('click', function(){
if ($('.locate').is(':visible')){
$('.locate').fadeOut(3000);
$('.close img').css('transform','rotate(-45deg)');
}
else {
$('.locate').fadeIn(3000);
$('.close img').css('transform','rotate(0deg)');
}
});
var calc = $('.calculator');
var calcDisplay = calc.find('.display');
var calcDisplayResult = calc.find('.display_result');
var calcKeys = calc.find('.key');
var operand = calc.find('.operand');
var calcButton = calc.find('.button');
var calcClear = calc.find('.clear');
var calcEqual = calc.find('.key--equal');
var calcpercent = calc.find('.percent');
var calcPower2 = calc.find('.power2');
var calcPower3 = calc.find('.power3');
var calcSqrt = calc.find('.sqrt');
var calcSpace = calc.find('.backspace');
var music = calc.find('.music');
calcButton.on('click', function(){
calcDisplay.val(calcDisplay.val() + $(this).attr('value'));
});
calcClear.on('click', function(){
calcDisplay.val('');
calcDisplayResult.val('');
a = null;
result = null;
d = '';
f ='';
e = null;
});
calcPower2.on('click', function(){
calcDisplay.val(Math.pow(calcDisplay.val(),2));
});
calcPower3.on('click', function(){
calcDisplay.val(Math.pow(calcDisplay.val(),3));
});
calcSqrt.on('click', function(){
e = Math.sqrt(calcDisplay.val());
calcDisplay.val(e.toFixed(3));
});
calcSpace.on('click', function(){
calcDisplay.val( calcDisplay.val().substring(0, calcDisplay.val().length-1));
});
calcEqual.on('click', function(){
a = calcDisplay.val();
if (a[(a.length-1)] == '%') {
calcDisplay.val('');
}
calcDisplayResult.val(calcDisplayResult.val() + calcDisplay.val());
calcDisplay.val(eval( calcDisplayResult.val()));
calcDisplayResult.val('');
a = null;
result = null;
d = '';
f ='';
e = null;
});
operand.on('click', function(){
calcDisplayResult.val(calcDisplayResult.val() + calcDisplay.val());
calcDisplay.val('');
});
calcpercent.on('click', function(){
calcDisplayResult.val(calcDisplayResult.val() + calcDisplay.val());
a = calcDisplayResult.val();
b = a.split('');
for (i=b.length;i>0;i--){
if (b[i] == '%') {
percentPosition = i;
}
if (b[i] == '-' || b[i] == '+'|| b[i] == '/'|| b[i] == '*') {
operatorPosition = i;
}
}
for (i=operatorPosition+1;i<=percentPosition-1;i++){
d = d + b[i];
}
for (i=0;i<operatorPosition;i++) {
f = f +b[i];
}
e = (d/100)*f;
b.splice(operatorPosition+1,percentPosition-1,e.toFixed(2));
b = b.join('');
calcDisplayResult.val(b);
});
$('.music').on('click', function(){
if ($('#kiss').is(':visible')){
$('#kiss').fadeOut(2000);
}
else {
$('#kiss').fadeIn(2000);
}
});
});
And now if you open index.html file inside the browser you will see the below output
