Calculator

index.html

<div class="navbar navbar-default navbar-static-top" id="mynavbar">
        <div class="container">
          <div class="navbar-header"> 
              <span class="navbar-brand">
                  <span class="fa fa-calculator"></span> 
                  Calculator
              </span>
          </div>
        </div>
      </div>
        
        <div class="well console"> </div>
        
        <table class="table text-center" style="margin-top:-20px">
            <tr>
                <td class="empty"></td>
                <td class="empty"></td>
                <td class="empty"></td>
                <td class="clear">Clear</td>
            </tr>
            <tr>
                <td class="num">7</td>
                <td class="num">8</td>
                <td class="num">9</td>
                <td class="op" rel="/">&divide;</td>
            </tr>
            <tr>
                <td class="num">4</td>
                <td class="num">5</td>
                <td class="num">6</td>
                <td class="op" rel="*">&times;</td>
            </tr>
            <tr>
                <td class="num">1</td>
                <td class="num">2</td>
                <td class="num">3</td>
                <td class="op" rel="-">&minus;</td>
            </tr>
            <tr>
                <td class="num">.</td>
                <td class="num">0</td>
                <td class="equalsTo">=</td>
                <td class="op" rel="+">&#43;</td>
            </tr>

        </table>

script.js

(function(){

    var arithmetic = [];
    
    $('.clear').click(function(){
        $('.console').text("");
        arithmetic=[];
    });
    
    $('.num').click(function(){
        $('.console').append($(this).text());
    });
    
    $('.op').click(function(){
        var textInConsole = $('.console').text();
        
        if (textInConsole!=="") arithmetic.push(textInConsole);
        
        $('.console').text("");
        
        var operator = $(this).attr("rel");
        
        var opPrev = arithmetic[arithmetic.length-1];
        if((operator==="*" || operator==="/") && (opPrev==="*" || opPrev==="/" )){
           $('.console').text("Syntax Error"); 
        }
        if(operator!=="") arithmetic.push(operator);
    });
    
    $('.equalsTo').click(function(){
        arithmetic.push($('.console').text());
        var joinArr = arithmetic.join("");
        console.log("This Prints out "+eval(joinArr));
        $('.console').text(eval(joinArr));
        arithmetic=new Array();
    });
})();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body{
    background-color: #333;
    color: #fff;
    font-family: 'ubuntu', cursive;
}
.navbar-default {
    background-color: #3b94d9;   
    color: white;
    border: none;
    font-weight: 700;
}
.navbar-header .navbar-brand,.navbar-header .navbar-brand:hover{
    color: white;
/*    font-weight: bold;*/
}
.console{
    margin-top: -20px;
    border-radius:0px;
    background-color: rgba(0,0,0,0.6);
    border: none;
    text-align: right;
    height: 58px;
}
td{
    padding: 40px !important;
    

}
.table > tbody > tr > td{
    border: 2px solid #333;
}
.table > tbody > tr > td:hover{
    background-color: #3b94d9; 
    cursor: pointer;
    transition: ;
    transition-delay: 0.1s;
}
.empty,.empty:hover{
    background-color: #333 !important;
}

styles

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