Calculator

In this example below you will see how to do a Calculator with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by duy12, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright duy12 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Orbitron'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
    <div class="row">
      <div id="root" class="col-xs-8 col-sm-6 col-md-3 col-xs-offset-2 col-sm-offset-3 col-md-offset-4">
        <div class="row text-center">
          <h2>Electronic Calculator</h2>
        </div>
        <div id="screen" class="row">
          <p class="current">{{ calculator.current }}</p>
          <p class="exp">{{ calculator.exp }}</p>
        </div>
        <div id="list-btn" class="row">
          <div class="table-responsive">
            <table class="table">
              <tr>
                <td>
                  <button @click="clear" value="AC" type="button" class="btn btn-sm btn-danger btn-block">AC</button>
                </td>
                <td>
                  <button @click="clearEntry" value="CE" type="button" class="btn btn-sm btn-danger btn-block">CE</button>
                </td>
                <td>
                  <button @click="input2" value="/" type="button" class="btn btn-sm btn-primary btn-block">√∑</button>
                </td>
                <td>
                  <button @click="input2" value="*" type="button" class="btn btn-sm btn-primary btn-block">x</button>
                </td>
              </tr>
              <tr>
                <td>
                  <button @click="input2" value="7" type="button" class="btn btn-sm btn-primary btn-block">7</button>
                </td>
                <td>
                  <button @click="input2" value="8" type="button" class="btn btn-sm btn-primary btn-block">8</button>
                </td>
                <td>
                  <button @click="input2" value="9" type="button" class="btn btn-sm btn-primary btn-block">9</button>
                </td>
                <td>
                  <button @click="input2" value="-" type="button" class="btn btn-sm btn-primary btn-block">-</button>
                </td>
              </tr>
              <tr>
                <td>
                  <button @click="input2" value="4" type="button" class="btn btn-sm btn-primary btn-block">4</button>
                </td>
                <td>
                  <button @click="input2" value="5" type="button" class="btn btn-sm btn-primary btn-block">5</button>
                </td>
                <td>
                  <button @click="input2" value="6" type="button" class="btn btn-sm btn-primary btn-block">6</button>
                </td>
                <td>
                  <button @click="input2" value="+" type="button" class="btn btn-sm btn-primary btn-block">+</button>
                </td>
              </tr>
              <tr>
                <td>
                  <button @click="input2" value="1" type="button" class="btn btn-sm btn-primary btn-block">1</button>
                </td>
                <td>
                  <button @click="input2" value="2" type="button" class="btn btn-sm btn-primary btn-block">2</button>
                </td>
                <td>
                  <button @click="input2" value="3" type="button" class="btn btn-sm btn-primary btn-block">3</button>
                </td>
                <td rowspan="2">
                  <button @click="output" value="=" type="button" class="btn btn-sm btn-primary btn-block" id="tall-btn">=</button>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <button @click="input2" value="0" type="button" class="btn btn-sm btn-primary btn-block">0</button>
                </td>
                <td>
                  <button @click="input2" value="." type="button" class="btn btn-sm btn-primary btn-block">.</button>
                </td>
              </tr>
            </table>
          </div>
        </div>

        <!-- <button @click="showData" class="btn btn-danger">obj</button>
        <button @click="alert(calculator.result)" class="btn btn-danger">hello</button> -->
      </div>
      <!-- End #root -->

    </div>
  </div>

  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/duy12/calculator-dZKEvb */
body {
    background-color: grey;
}
#root {
    margin-top: 40px;
    background-color: #dfd8d0;
    padding-left: 30px;
    padding-right: 30px;
}
h2 {
    font-family: 'Orbitron', sans-serif;
    padding-top: 15px; 
    padding-bottom: 15px; 
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
}
#screen {
    background-color: #c3c2ab;
    padding: 10px;
    text-align: right;
    margin-left: -7px;
    margin-right: -7px;
    margin-bottom: 15px;
}
#screen p {
    margin: 0;
}
.table-responsive, .table, td {
    border: none !important;
}
#tall-btn {
    height: 81px;
}
.red-btn {
    background-color: #a72d45;
    box-shadow: 0px 3px 0px 0px #671c2a;
}
.current {
    font-size: 2em;
}
.btn {
    font-size: 14px;
}
td {
    height: 40px;
    width: 60px;
}

/*Downloaded from https://www.codeseek.co/duy12/calculator-dZKEvb */
class Calculator {
    constructor() {
        this.clearAll();
    }
    checkType(val) {
        if (/\./.test(val)) {
            return "dot";
        } else if (/[+*-/]/.test(val)) {
            return "ope";
        } else {
            return "num";
        }
    }
    input(val) {
        if(this.exp === '0')
            this.exp = '';
        if (this.checkType(val) == "ope")
            this.inputOpt(val);
        else
            this.inputNum(val);
    }
    inputNum(key) {
        if (this.completed) {
            this.clearAll();
            this.current = key;
            this.exp = key;
            this.completed = false;
        } else {
            if (this.checkType(this.current) == "ope") {
                this.current = key;
            } else {
                this.current = this.current == '0' ? key : this.current.toString() + key;
            }
            this.exp += key;
        }
    }
    inputOpt(key) {
        this.opeArr.push(this.operator);
        if (this.completed) {
            this.exp = this.current + key;
            this.result = this.current;
            this.oldResult.push(this.current);
            this.oldNum.push(this.current);
            this.operator = key;
            this.current = key;
            this.completed = false;
        } else {
            this.oldNum.push(this.current);
            this.calc();
            this.operator = key;
            this.current = key;
            this.exp += key;
        }
    }
    calc() {
        this.oldResult.push(this.result);
        if (this.result === '0')
            this.result = this.current;
        else
            switch (this.operator) {
                case '+':
                    this.result = Number(this.result) + Number(this.current);
                    break;
                case '-':
                    this.result = Number(this.result) - Number(this.current);
                    break;
                case '*':
                    this.result = Number(this.result) * Number(this.current);
                    break;
                case '/':
                    this.result = Number(this.result) / Number(this.current);
                    break;
            }
    }
    clearAll() {
        this.completed = false;
        this.exp = '0';
        this.operator = '';
        this.current = '0';
        this.oldResult = [];
        this.opeArr = [];
        this.oldNum = [];
        this.result = '0';
    }
    clearEntry() {
        if(this.completed)
            this.clearAll();
        else {
            if(this.exp != 0)
                this.exp = this.exp.substr(0,this.exp.length - this.current.length);
            if(this.checkType(this.current) == "ope"){
                this.operator = this.opeArr.pop();
                this.result = this.oldResult.pop();
                this.current = this.oldNum.pop();
            }
            else {
                this.current = '0';
                if(this.exp == '')
                  this.exp = '0';
            }
        }
    }
    output() {
        this.calc();
        this.current = this.result;
        this.completed = true;
    }
}

new Vue({
    el: '#root',
    data: {
        calculator: new Calculator(),
    },
    methods: {
        showData: function () {
            let x = " current: " + this.calculator.current + "\n operator: " + this.calculator.operator + "\n result: " + this.calculator.result + "\n old result: " + this.calculator.oldResult;
            x += "\n old num: " + this.calculator.oldNum;
            alert(x);
        },
        input2: function (event) {
            // alert(typeof event.target.value);
            this.calculator.input(event.target.value);
        },
        output: function () {
            this.calculator.output();
        },
        clear: function () {
            this.calculator.clearAll();
        },
        clearEntry: function () {
            this.calculator.clearEntry();
        }
    }
});

Comments