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>

<!DOCTYPE html>

<head>

<title>Calculator</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</audio>

</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;
}

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);
    }
    });
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

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

Build a Material Design Arithmetic Calculator in HTML5 and Javascript Using Materialize CSS Framework Full Project For Beginners

Get Started

Leave a Reply Cancel reply

Get Started

Related posts:

You Might Also Like

Javascript Project to Build 401K Retirement Savings Calculator in Browser Using HTML5 & CSS3

Javascript Program to Find Union of Two Sets Data Structure in Browser Full Project For Beginners

Javascript Project to Get Omegle Video Chat User IP Address & Location Details Such as City,PinCode & State in Browser

Leave a Reply Cancel reply