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

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

 

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>

 

See also  Node.js Project to Encode Local PDF File or From URL to Base64 String Using pdf-to-base64 Library in Javascript Full Project For Beginners

 

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

See also  Tingle.js 2KB Pure Vanilla Javascript Modal/Popup Window Library Full Examples With Source 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

 

Leave a Reply