JSFiddle - React, Tailwind, and code Playground
by hirenwebdp
HTML
<div id="products">
<h1 id="ui-widget-header" class="ui-widget-header"><p align="center" style="font-size:20px;">JOHNS CAR SHOP LEDGER</p> </h1>
</div>
<table width="100%" border="1">
<tr> <td width="33%"><div id="shoppingCart1" class="shoppingCart">
<h3 class="ui-widget-header" align="center">detail</h3>
</div>
</td>
<td width="33%"><div id="shoppingCart2" class="shoppingCart">
<h3 class="ui-widget-header" align="center">debit</h3>
</div></td>
<td width="34%"><div id="shoppingCart3" class="shoppingCart">
<h3 class="ui-widget-header" align="center">credit</h3>
</div></td>
</tr>
<tr>
<td>
<div id="shoppingCart4" class="shoppingCart">
<ol style="list-style:none" align="center" id="bank">
<li class="placeholder" > Opening balance
</li>
</ol>
</div>
</td>
<td>
<div id="shoppingCart5" class="shoppingCart">
<ol id="amt1" align="center"style="list-style:none">
<li class="placeholder">0</li>
</ol>
</div>
</td>
<td>
<div id="shoppingCart6" class="shoppingCart">
<ol style="list-style:none" align="center" id="bank">
<li class="placeholder" ></li>
</ol>
</div>
</td>
</tr>
<tr>
<td>
<div id="shoppingCart04" class="shoppingCart">
<ol style="list-style:none" align="center" id="bank">
<li class="placeholder" >Owner's Euity</li>
</ol>
</div>
</td>
<td>
<div id="shoppingCart05" class="shoppingCart">
<ol id="amt1" style="list-style:none">
<li class="placeholder">10,000</li>
</ol>
</div>
</td>
<td>
<div id="shoppingCart06" class="shoppingCart">
<ol style="list-style:none" align="center" id="bank">
<li class="placeholder" ></li>
</ol>
</div>
</td>
</tr>
<tr>
<tr>
<td>
<div id="shoppingCart7" class="shoppingCart">
<ol style="list-style:none" align="center" id="bank">
<li class="placeholder" >Loan</li>
</ol>
</div>
</td>
<td>
<div id="shoppingCart8" class="shoppingCart">
<ol id="amt1" style="list-style:none">
<li class="placeholder">10,000
</li>
</ol>
...CSS
#products{font: 13px/20px 'Lucida Grande', Verdana, sans-serif;
color: #404040;
background: #f2f8fc;}
.ui-widget-content ul li
{
display: block;
float: left;
line-height: 30px;
list-style:none;
margin: 0 0px;
text-decoration:blink;
}
.ui-widget-content
{
min-height:40px;
}
.hidden{
visibility:hidden;
}
#equal
{display:none;
}
#e1
{display:none;
}
.button-purple {
background: #9966cb;
color:#FFFFFF;
border-color: #8040be #8040be #733aab;
background-image: -webkit-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
background-image: -moz-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
background-image: -o-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
background-image: linear-gradient(to bottom, #a87dd3, #9966cb 66%, #8f57c6);
}
.button-purple:active {
background: #9966cb;
color:#FFFFFF;
border-color: #733aab #8040be #8040be;
}
.button {
position: relative;
display: inline-block;
vertical-align: top;
height: 36px;
line-height: 35px;
padding: 0 20px;
font-size: 20px;
color:#FFFFFF;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
background-clip: padding-box;
border: 1px solid;
border-radius: 2px;
cursor: pointer;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.button:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color:#FFFFFF;
pointer-events: none;
background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: -o-radial-gradient(center top, farthest-corner, rgba(255, 255,...JavaScript
$("#text1").keyup(function(){
$("#text1").blur();
$("#text1").focus();
});
$("#text1").change(function(){
var assetname = document.getElementById('text1').value;
if(assetname =='32000')
{
$("#equal").show();
$("#equal a").html("correct.");
}
else{
$("#equal").show();
$("#equal a").html("Wrong.");
}
});
$("#text2").keyup(function(){
$("#text2").blur();
$("#text2").focus();
});
$("#text2").change(function(){
var assetname1 = document.getElementById('text2').value;
if(assetname1 =='10350')
{
$("#equal").show();
$("#equal a").html("correct.");
}
else{
$("#equal").show();
$("#equal a").html("Wrong.");
}
});
$("#text3").keyup(function(){
$("#text3").blur();
$("#text3").focus();
});
$("#text3").change(function(){
var assetname2 = document.getElementById('text3').value;
if(assetname2 =='10350')
{
$("#equal").show();
$("#equal a").html("correct.");
}
else{
$("#equal").show();
$("#equal a").html("Wrong.");
}
});
$("#text4").keyup(function(){
$("#text4").blur();
$("#text4").focus();
});
$("#text4").change(function(){
var assetname3 = document.getElementById('text4').value;
if(assetname3 =='21650')
{
$("#equal").show();
$("#equal a").html("correct.");
}
else{
$("#equal").show();
$("#equal a").html("Wrong.");
}
});