JSFiddle - React, Tailwind, and code Playground

by jmcclumpha

HTML

<p>This is a quick update/rework of the demo/tutorial found here: <a href="http://www.developerdrive.com/2012/06/creating-a-web-page-calculator-using-the-html5-output-element/">Creating A Web Page Calculator Using The HTML5 Output Element</a></p>

<form id="calc" oninput="updateOutput()">
<input name="x" type="number" value="0" />
<select name="op" onchange="updateOutput()">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">&times;</option>
  <option value="/">&divide;</option>
</select> 
<input name="y" type="number" value="0" />
<div class="equals"> = </div>
<output name="z" for="x y">0</output>
</form>

CSS

input[type="number"] {
width:50px; height:30px; 
text-align:center; 
margin:3px; 
float:left;}

/*select and equals elements*/
select, .equals {
margin:3px; 
float:left;}

/*output element*/
output {
display:block; 
border:1px solid #333333; 
border-radius:5px; 
min-width:25px; height:25px; 
margin:3px; padding:2px;
text-align:center; 
background:#000000; 
color:#ffffff; 
float:left; }

JavaScript

function updateOutput() { 

        //get form 
        var form = document.getElementById("calc");
        // calculate (evaluate) the output
        form.elements["z"].value=eval(parseInt(form.elements["x"].value) + form.elements["op"].value + (parseInt(form.elements["y"].value)));
}