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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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