JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table border="0" cellspacing="0" cellpadding="6">
  <tbody>
  <tr>
      <td colspan="4">
      <div class="display">
      
      </div></td>
    </tr>
    <tr>
      <td><button data-value="1">1</button></td>
      <td><button data-value="2">2</button></td>
      <td><button data-value="3">3</button></td>
      <td><button data-value="+" class="function">+</button></td>
    </tr>
    <tr>
      <td><button data-value="4">4</button></td>
      <td><button data-value="5">5</button></td>
      <td><button data-value="6">6</button></td>
      <td><button data-value="-" class="function">-</button></td>
    </tr>
    <tr>
      <td><button data-value="7">7</button></td>
      <td><button data-value="8">8</button></td>
      <td><button data-value="9">9</button></td>
      <td><button data-value="*" class="function">*</button></td>
    </tr>
    <tr>
      <td><button data-value="0">0</button></td>
      <td>&nbsp;</td>
      <td><button class="calculate">=</button></td>
      <td><button data-value="/" class="function">&divide;</button></td>
    </tr>
  </tbody>
</table>

CSS

.display{
  text-align:right;
  height:20px;
  padding:4px;
  background-color:#666;
  color:#fff;
}

JavaScript

function calcuate(){

	$('.display').text(eval($('.display').text()));

}

function getLastCharacter(){

	var str = $('.display').text();
  
  return str.substr(-1);

}

$('button').not('.calculate').click(function(){
	
  if($(this).hasClass('function')){
  
  	if(isNaN(getLastCharacter())){
    
    	return false;
    
    }
  
  }
  
	$('.display').append($(this).attr('data-value'));
  
});

$('.calculate').click(function(){

	calcuate();
  
})