JSFiddle - React, Tailwind, and code Playground

by Adam Mendoza

HTML

<small id="path"></small>

<h2 id="result">0</h2>

<div id="calculator" class="clearfix">
    
<button id="clear">Clear</button>
<button id="divide">/</button>
<button id="mulitply">x</button>
<button id="subtract">-</button>
    
<button class="num clear" data-id="7">7</button>
<button class="num" data-id="8">8</button>
<button class="num" data-id="9">9</button>
    
<button class="num clear" data-id="4">4</button>
<button class="num" data-id="5">5</button>
<button class="num" data-id="6">6</button>
    
<button class="num clear" data-id="1">1</button>
<button class="num" data-id="2">2</button>
<button class="num" data-id="3">3</button>

<button class="num large-width clear" data-id="3">0</button>
<button>.</button>

<button id="add">+</button>
<button id="enter">Enter</button>

</div>

CSS

*{padding:0;margin:0;}
body{padding:20px;}
#path{display:block;height:10px;line-height:10px;padding:3px;}
#result{height:50px;line-height:50px;border:1px solid #dedede;padding:3px;margin-bottom:20px;font-size:30px;color:purple}
#calculator{position:relative;width:300px;}
#calculator button{width:75px;height:75px;padding:0;margin:0;cursor:pointer;margin-bottom:3px;float:left}

#calculator #add{height:153px;position:absolute;top:77px;right:0;}
#calculator #enter{height:153px;position:absolute;bottom:0;right:0}
#calculator .large-width{width:150px;}
.clear{clear:left;}



.last{margin-right:0;}.hidden{display:none;visibility:hidden;}.left{float:left;}.right{float:right;}.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr;}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;overflow:hidden;}.clearfix{zoom:1;}.clear,.clearfix:after{clear:both;}

JavaScript

(function($){
    
   calculator = {
        
        
       /*
        *  When I click a number it gets added to #result
        *  adding more than 1 number gets concatenated
        */             
       generateDisplayNumber: function(){
                 
           
       },       
        
       initialise: function(){
           
           var instance = this;
           
           //Cache Selectors
           instance.selectors = {};
           instance.selectors.numberLock = $('#numLock');
           instance.selectors.calculator = $('#calculator');
           instance.selectors.clearData = $('#clear');
           instance.selectors.numberDigits = instance.selectors.calculator.children('.num');
           instance.selectors.divide = $('#divide');
           instance.selectors.multiply = $('#multiply');
           instance.selectors.subtract = $('#subtract');
           instance.selectors.add = $('#add');
           instance.selectors.submit = $('#enter');
           
           //Flags
           instance.flags = {};
           
           //Click Handlers
           instance.selectors.numberDigits.on('click', function(e){
            
            //Get clicked data-id
            var clickedNumber = $(this).data('id');
            
            instance.generateDisplayNumber();
            e.preventDefault();                   
           });
           
       } // .initialise       
    } // .calculator
    
    
    calculator.initialise();
    
}(jQuery));
    
    
    $(document).ready(function(){
       
        var total = 0;
        var arr = [];
        
        //Testing
        $('#calculator').children('.num').on('click', function(e){
         
         var clickedNumber = $(this).data('id');
         
         arr.push(clickedNumber);
            
            console.log( arr.join('') );
         
            
         //$('#result').html(clickedNumber);
         
        
         e.preventDefault();
        });
        
        
   ...