JSFiddle - React, Tailwind, and code Playground

by rjasoriano

HTML

<html>
<head>

</head>
<body>
  <div class="result" id="alpha">
  </div>
  <table>
    <tr>
      <td><button class="d7">7</button></td>
      <td><button class="d8">8</button></td>
      <td><button class="d9">9</button></td>
      <td><button class="dx">x</button></td>
    </tr>
    <tr>
      <td><button class="d4">4</button></td>
      <td><button class="d5">5</button></td>
      <td><button class="d6">6</button></td>
      <td><button class="dm">-</button></td>
    </tr>
    <tr>
      <td><button class="d1">1</button></td>
      <td><button class="d2">2</button></td>
      <td><button class="d3">3</button></td>
      <td><button class="dp">+</button></td>
    </tr>
    <tr>
      <td><button class="dq">÷</button></td>
      <td><button class="d0">0</button></td>
      <td><button class="dd">.</button></td>
      <td><button class="de">=</button></td>
    </tr>
  </table>
</body>
</html>

CSS

.result{
    width: 110px;
    height: 20px;
    background-color: yellow;
    text-align: center;
}

JavaScript

var result ='';


$('.d1').click(function(){
	result = result + 1;
  display_screen(result);
});

$('.d2').click(function(){
	result = result + 2;
  display_screen(result);
});

$('.d3').click(function(){
	result = result + 3;
  display_screen(result);
});

$('.d4').click(function(){
	result = result + 4;
  display_screen(result);
});

$('.d5').click(function(){
	result = result + 5;
  display_screen(result);
});

$('.d6').click(function(){
	result = result + 6;
  display_screen(result);
});

$('.d7').click(function(){
	result = result + 7;
  display_screen(result);
});

$('.d8').click(function(){
	result = result + 8;
  display_screen(result);
});

$('.d9').click(function(){
	result = result + 9;
  display_screen(result);
});

$('.d0').click(function(){
	result = result + "0";
  display_screen(result);
});

$('.dp').click(function(){
	result = result + "+";
  display_screen(result);
});

$('.dm').click(function(){
	result = result + "-";
  display_screen(result);
});

$('.dq').click(function(){
	result = result + "÷";
  display_screen(result);
});

$('.dx').click(function(){
	result = result + "x";
  display_screen(result);
});

$('.dd').click(function(){
	result = result + ".";
  display_screen(result);
});

$('.de').click(function(){
	a = eval(result);
  display_screen(a);
  result ='';
});

function display_screen(a){
	$('#alpha').html(a);
}