JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://netdna.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="http://log4sure.com/ScriptsExt/myPoorCalculator.js"></script>
<div class="well text-center">
<p class="text-info">Enter anything you want computed...</p>
<input type="text" class="input" id="txt-input-one" placeholder="input one"/>
<input type="text" class="input" id="txt-input-two" placeholder="input two"/>
</div>
<div id="actions" class="well text-center">
<div id="btn-add" class="btn btn-lg btn-primary" data-operation="add">Add</div>
<div id="btn-subtract" class="btn btn-lg btn-danger" data-operation="subtract">Subtract</div>
<div id="btn-multiply" class="btn btn-lg btn-info" data-operation="multiply">Multiply</div>
<div id="btn-divide" class="btn btn-lg btn-warning" data-operation="divide">Divide</div>
</div>
<p class="well answer text-center">
<span id="ret-val">I have answers to all your computing needs... </span>
</p>
CSS
.input{
height:50px;
font-size:200%;
color:#6E5A98;
width:200px;
}
.answer{
color:#D4729C;
font-size:200%;
}
JavaScript
/***********************************
This is an example of how log4sure can be integrated with js library.
This fiddle uses myPoorCalculator.js as a calculator library and myPoorCalculator uses log4sure.js as logging service.
The logs happening for this library can be seen here:
https://log4sure.com/Home/DemoLogDetails/4f082fd3-3886-4e52-8a70-05551a1570e8
**********************************/
var myCalc = new myPoorCalculator();
$(".btn").click(function(e){
var inputOne = $("#txt-input-one").val();
var inputTwo = $("#txt-input-two").val();
var operator = $(e.target).attr("data-operation");
var retVal = myCalc.compute({inputOne:inputOne,inputTwo:inputTwo,operator:operator});
$("#ret-val").text("Answer: "+retVal);
});