Build a JavaScript Calculator [freeCodeCamp [Advanced Projects]] (Challenge)

Build a JavaScript Calculator [freeCodeCamp [Advanced Projects]] (Challenge) .markdown

Build a JavaScript Calculator [freeCodeCamp [Advanced Projects]] (Challenge)

Rule #1: Don't look at the example project's code. Figure it out for yourself.

Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.

User Story: I can add, subtract, multiply and divide two numbers.

User Story: I can clear the input field with a clear button.

User Story: I can keep chaining mathematical operations together until I hit the equal button, and the calculator will tell me the correct output.

A Pen by Svetlana Linuxenko on CodePen.

License.

index.html

<div class="calc-container">
  <div class="calculator" ng-app="calcApp" ng-controller="calcCtrl">
    
    <div class="result">{{text}}</div>
    
    <div class="controls" ng-click="action($event)">
      <div class="controls-top">
        <div class="control action" data-name="c">C</div>
        <div class="control action" data-name="+">+</div>
      </div>
      <div class="controls-right">
        <div class="control action" data-name="/">/</div>
         <div class="control action" data-name="*">*</div>
        <div class="control action" data-name="-">-</div>
        
        <div class="control action" data-name="=">=</div>
      </div>
      <div class="controls-left">
        <div class="control number" data-name="1">1</div>
        <div class="control number" data-name="2">2</div>
        <div class="control number" data-name="3">3</div>
        <div class="control number" data-name="4">4</div>
        <div class="control number" data-name="5">5</div>
        <div class="control number" data-name="6">6</div>
        <div class="control number" data-name="7">7</div>
        <div class="control number" data-name="8">8</div>
        <div class="control number" data-name="9">9</div>
        <div class="control number" data-name="0">0</div>
        <div class="control number" data-name=".">.</div>
      </div>
    </div>
   
  </div>
  
  <div class="copy"><a href="http://www.linuxenko.pro">&copy; Svetlana Linuxenko</a></div>
</div>

script.js

var app = angular.module('calcApp', []);


app.controller('calcCtrl', function($scope) {
   $scope.text = '0';
   var lastVal = null;
   var reset = false;
   var lastAction = '';
  
   function addText(t) {
     if ($scope.text.length >= 10) {
       return;
     }
     
     if ($scope.text === '0' ||
        $scope.text === '*'  ||
        $scope.text === '/'  ||
        $scope.text === '-'  ||
        $scope.text === '+'  ||
        reset === true
      ) {
       reset = false;
       $scope.text = t;
       return;
     }
     
     if (t === '.' 
         && $scope.text.match(/\./) !== null) {
       return;
     }
     
     $scope.text += t;
   }
  
   function calculate(a,b,t) {
     function parse(v) {
        if (v.match(/\./) !== null) {
           return Number.parseFloat(v);
        }
        return Number.parseInt(v);
     }
     
     var val1 = parse('' + a);
     var val2 = parse('' + b);

     switch(t) {
       case '*':
         return val1 * val2;
       case '/':
         return val1 / val2;
       case '-':
         return val1 - val2;
       case '+':
         return val1 + val2;
     }
   }
   
   function remind(t) {
     if (reset === true) { lastAction = t; return; }
     if (t === '=') {
       $scope.text = lastVal = '' + calculate(lastVal, $scope.text, lastAction);
     } else {
      $scope.text = lastVal = lastVal !== null ? '' + calculate(lastVal, $scope.text, lastAction) : $scope.text;
       lastAction = t;
     }
     
     reset = true;
   }
  
   $scope.action = function(e) {
     var action = null;
     if ((action = e.target.getAttribute('data-name')) !== null) {
       switch(action) {
         case '1':
         case '2':
         case '3':
         case '4':
         case '5':
         case '6':
         case '7':
         case '8':
         case '9':
         case '0':
         case '.':
           addText(action);
           break;
         case 'c':
           $scope.text = '0';
           lastVal = null;
           break;
         case '*':
         case '/':
         case '-':
         case '+':
         case '=':
           remind(action);
           break;
       }
        
     }
    
   }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

style.less

@import url(https://fonts.googleapis.com/css?family=Lato);
body,html,.calc-container {
  width: 100%;
  height: 100%;
  font-family: 'Lato', sans-serif;
}

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

.calc-container {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 500px;
    .copy {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px 0px;
  }
}


.calculator {
  width: 280px;
  height: 440px;
  overflow: hidden;
  box-shadow: 0px 0px 5px #444;
  border-radius: 5px;
  margin : auto;
  background: radial-gradient(#824da3, #914da3);
  
  .result {
    margin: 8px 5px;
    height: 70px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: linear-gradient(#724da3, transparent, #7f4da3);
    box-shadow: inset 0 0 6px #111;
    color: #eee;
    text-shadow: 0px 0px 2px #000;
    text-align: right;
    font-weight: bold;
    font-size: 44px;
    line-height: 70px;
    padding: 0px 10px;
    position: relative;
    z-index: 5;
    cursor: default;
    overflow: hidden;
    
    &:hover,
    &:focus {
      cursor: default;
    }
  }
  
  .controls {
    margin: 15px 10px 0px 6px;
    position: relative;
    
  }
  
  .controls-left {
    position: absolute;
    top: 70px;
    left: 0px;
  }
  
  .controls-right {
    position: absolute;
    top: 0px;
    right: 0px;
  }
  
  .controls-top {
    position: absolute;
    top: 0px;
    left: 0px;
    
    .control {
      float: left;
      margin: 0px 4px;
    }
  }
  
  .control {
    width: 59px;
    height: 59px;
    position: relative;
    z-index: 10;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    box-shadow: 0px 0px 1px #000;
    text-shadow: 0px 0px 2px #000;
    
    line-height: 59px;
    border-radius: 4px;
    cursor: pointer;
      
    &.number {
      background: radial-gradient(#894da3, #7f4da3);
      margin: 4px;
      float: left;
    }
    
    &.action {
      background: radial-gradient(#9f4da3, #944da3);
      margin-top: 8px;
      
        &:hover,
        &:focus {
          cursor: pointer;
          background: radial-gradient(#6f4da3, #644da3);
        }
    }
    
    &[data-name="0"] {
      width: 124px;
    }
    
    &[data-name="c"],
    &[data-name="<"],    
    &[data-name="="] {
      background: radial-gradient(#6f4da3, #744da3);
      &:hover,
      &:focus {
        cursor: pointer;
        background: radial-gradient(#9f4da3, #944da3);
      }
    }
    &[data-name="+"] {
      width: 124px;
    }
    &[data-name="="] {
      line-height: 124px;
      height: 124px;
    }
    
    &:hover,
    &:focus {
      cursor: pointer;
      background: radial-gradient(#9f4da3, #944da3);
    }
  }
  
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />