angular

Build a Material Angular Arithmetic Calculator Web App Using Materialize CSS Framework in Javascript Full Project For Beginners


 

Welcome folks today in this blog post we will be building a material angular arithmetic calculator web app using materialize css framework in javascript.All the full source code of the application is shown below.

 

 

 

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<h1>Calculator</h1>
<div id="calc" ng-app="calc" ng-controller="CalcController as app">
    <div class="row">
        <div class="col s12">
            <div id="screen">
                <div id="row"><button id="clear" ng-click="app.clear()">C</button><small>{{app.procedure}}</small><span id="text" ng-model="app.screen">{{app.screen}}</span></div>
            </div>
        </div>
        <div ng-repeat="item in app.buttons" ng-class="item.class"><button ng-repeat="btn in item.content" ng-class="btn.class" ng-click="app.click(btn.text)">{{btn.text}}</button></div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

 

 

And now make a style.css file and copy paste the following code

 

 

style.css

 

 

body {background-image: url("http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-165970.png"); background-attachment: fixed; background-position: center center; background-size: cover;}

h1 {text-align: center; font-family: Sans; color: darkcyan;
text-shadow: 2px 2px 2px rgba(215, 255, 255, 0.3);}

#calc {text-align: center; background-color: rgba(67, 133, 142, 0.8); width: 285px; height: 300px; margin: 0 auto; margin-top: 50px; border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px -1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 8px -1px rgba(0,0,0,1);
box-shadow: 0px 0px 8px -1px rgba(0,0,0,1);}

#screen {width: 265px; border-style: none; background-color: #D8D8D8; text-align: right; height: 80px; padding: 5px 10px 0px 10px; margin-bottom: 5px; margin-top: 10px;
-webkit-box-shadow: inset 0px 0px 5px 2px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 0px 5px 2px rgba(0,0,0,0.2);
box-shadow: inset 0px 0px 5px 2px rgba(0,0,0,0.2);
border-radius: 10px}

small {display: block}

button {width: 63px; height: 45px; border-style: none;
-webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.2);
box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.2);
margin-bottom: 5px; color: white}

#clear {float: left; border-radius; margin-top: 15px}
#text {float: right; margin-top: 10px; font-size: 20px; margin-top: 15px; font-weight: bold}

#clear {border-radius: 20px; background-color: rgba(15, 69, 90, 0.9)}

.toBlack {background-color: #2E2E2E; border-radius: 10px}
.oper {background-color: #FE642E}
.equals {background-color: rgba(15, 69, 90, 0.9); border-radius: 10px}

.toBlack, .oper, .equals {font-size: 22px; margin-left: 2px}

@media screen and (min-width: 992px) {
  #calc {width: 295px; height: 300px;}
}

 

 

And now make a script.js file and copy paste the following code

 

 

script.js

 

 

var app = angular.module("calc", []);

app.controller("CalcController", function() {
  var calc = this;
  calc.screen = "0";
  calc.buttons = [{class: "col s12", content: [{text: "7", class: "toBlack"}, {text: "8", class: "toBlack"}, {text: "9", class: "toBlack"}, {text: "+", class: "oper"}]}, {class: "col s12", content: [{text: "4", class: "toBlack"}, {text: "5", class: "toBlack"}, {text: "6", class: "toBlack"}, {text: "-", class: "oper"}]}, {class: "col s12", content: [{text: "1", class: "toBlack"}, {text: "2", class: "toBlack"}, {text: "3", class: "toBlack"}, {text: "*", class: "oper"}]}, {class: "col s12", content: [{text: "0", class: "toBlack"}, {text: ".", class: "toBlack"}, {text: "=", class: "equals"}, {text: "÷", class: "oper"}]}];
  calc.procedure = "";
  calc.total = 0;
  calc.opertToDo = "";
  calc.count = 0;
  
  
  calc.click = function(value) {
    
    if(calc.procedure.toString().length > 26) {
      calc.procedure = "(...)";
    }
    
    if(calc.total.toString().length < 13) {
      $("#text").css("font-size", "20px");
    }
    
    if(/[=]/g.test(value)) {
      
      checkOper(calc.operToDo)
      
      if (calc.total.toString().length > 13 && calc.total.toString().length < 20) {
        $("#text").css("font-size", "15px")
      } else if(calc.total.toString().length >= 20) {
        $("#text").css("font-size", "13px");
      }
      
      calc.screen = calc.total.toString();
      
    } else if(!/[0-9.]/g.test(value)) {
      
      checkOper(calc.operToDo);
      
      switch(value) {
        case "+":
          calc.operToDo = "plus"
          break;
          
        case "-":
          calc.operToDo = "minus";
          break;
          
        case "*":
          calc.operToDo = "times";
          break;
          
        case "÷":
          calc.operToDo = "divided";
          break;
      }
      
      calc.screen = "0";
      
      if(calc.procedure.indexOf(value, calc.procedure.toString().length - 1) == -1 && calc.operToDo != "") {
        calc.procedure += value;
      }
    } else if(calc.screen.length < 10) {
      console.log(value);
        if(calc.screen == "0") {
          calc.screen = value;
          calc.procedure += value;
        } else {
          calc.screen += value;
          calc.procedure += value;
        }
      } 
    }
  
  calc.clear = function() {
    calc.screen = "0";
    calc.procedure = "";
    calc.total = 0;
    calc.operToDo = "";
    calc.count = 0;
    $("#text").css("font-size", "15px");
  }
  
  function checkOper(oper) {
    
    switch(oper) {
        case "plus":
          calc.total += parseFloat(calc.screen);
          break;
          
        case "minus":
          calc.total -= parseFloat(calc.screen);
          break;
          
        case "times":
          if(calc.total == 0) {calc.total = 1}
          calc.total = calc.total * parseFloat(calc.screen);
          break;
          
        case "divided":
          if(calc.total == 0) {calc.total = 1}
          calc.total /= parseFloat(calc.screen);
          break;
          
        default:
          calc.total = parseFloat(calc.screen);
          break;
      }
    
    calc.operToDo = "";
  }
  
 /* Possible function to catch the KeyPress... but is out of the scope...
  $("body").keyup(function(key) {
    var keyboardNums = key.which >= 48 && key.which <= 57;
    var opers = key.which == 107 || key.which == 109 || key.which == 106 || key.which == 111 || key.which == 110;
    var numPad = key.which >= 96 && key.which <= 105;
    
    if(keyboardNums) {
      calc.click(String.fromCharCode(key.which));
    } else if(numPad) {
      calc.click(String.fromCharCode(key.which - 48));
    } else if(opers) {
      switch(key.which) {
        case 106:
          calc.click("*");
          break;
          
        case 107:
          calc.click("+");
          break;
          
        case 109:
          calc.click("-");
          break;
          
        case 110:
          calc.click(".");
          break;
          
        case 111:
          calc.click("÷");
          break;
      }
    }
  });
  */
});

Similar Posts:

    None Found

Leave a Reply

Your email address will not be published. Required fields are marked *