JSFiddle - React, Tailwind, and code Playground

by balintbako

HTML

<div style="position:fixed;left:0px;bottom:0px;" onclick="cancelClick(event)">
    <div id="convbox" style="display:none">
    <table>
    <tr>
        <td>
        <input id="txtconvrtfrom" type="text" onkeypress="return OnlyNumbersWithDecimal(event,this);" maxlength="10"/>=
        </td>
        <td>
         <input id="txtconvrtto" type="text" readonly="readonly"/>
        </td>
    </tr>
    <tr>
        <td>
            <select id="dlconvfrom">
            <option value="hectare">Hectare</option>
            <option value="acre">Acre</option>
            <option value="are">Are</option>
            <option value="gunta">Gunta</option>
            <option value="sqmeter">Square Meter</option>
            <option value="sqfoot">Square Foot</option>
        </select>
        </td>
        <td>
             <select id="dlconvto">
            <option value="hectare">Hectare</option>
            <option value="acre">Acre</option>
            <option value="are">Are</option>
            <option value="gunta">Gunta</option>
            <option value="sqmeter">Square Meter</option>
            <option value="sqfoot">Squeare Foot</option>
        </select>
        </td>
    </tr>
    </table>

    <input type="button" value="Convert" id="btnconvert" onclick="btnconvert_click(event)" />
    </div>
    <div id="convrtrmain">
    <div id="btnconvrtr" class="btnconvrtr" onclick="btnconvrtr_click(event)" >
        Show Area Convertor
    </div>
    </div>

</div>

CSS

/*Global*/
select
{
    white-space:nowrap;
    border:1px solid rgba(0,0,0,.5);
    -webkit-appearance: button;
    appearance: button;
}
input
{
    border:1px solid rgba(0,0,0,.5);
    display:inline-block;
}
/*For UnitConversion*/
#txtUType
{
    width:20px;
}
#btnconvrtr
{
    border: 1px solid #3079ed;
    color:#fff;
    font-weight:bold;
    display:inline-block;
    text-decoration:none;
    width:157px;
    text-align:center;
    cursor:pointer;
    border-radius:4px;
    padding:2px;
    appearance: button;
}
.btnconvrtr
{
    BACKGROUND-COLOR: #4d90fe;
}
.btnconvrtrpressed
{
    BACKGROUND-COLOR: #3f81ff;
}
#convbox
{
    border:1px solid rgba(0,0,0,.5);
    padding:5px;
    font-family: arial, sans-serif;
    font-size:19px;
    background:#fff;
    right:0;
    box-shadow: 4px 4px 4px rgba(0,0,0,.3);
    margin:0 15px 0px 15px ;
    border-radius:4px;
}


#dlconvto
{
    margin-left:2px;
}
#btnconvert
{
    width:100px;
    display:inline-block;
    margin:5px 2px 2px 2px;
    margin-left:30%;
    border-radius:2px;
    height:30px;
}

/*for User Type*/
.utype
{
    padding:5px 5px 5px 5px;
    border:1px solid #dcdcdc;
    width:310px;
    background:#fff;
    display:inline-block;
    margin-left:30%;
    margin-top:20%;
}
.utype input[type=text]
{
    height:20px;
    margin:4px 4px 4px 4px;
    border-radius:2px;
}
#dvddlutype,#dvtxtutype
{
    display:inline;
}
#dvbtns
{

}
#dvlbler
{
    color:Red;
}

#convrtrmain
{
    overflow:visible;
    display:block;
    position:static;
}

JavaScript

function btnconvrtr_click(event) {
    var btnconvrtr = document.getElementById('btnconvrtr');
    var convbox = document.getElementById('convbox');
    console.log("c1");
    if (convbox.style.display == '') {

        btnconvrtr.className = 'btnconvrtr';
        btnconvrtr.innerHTML = 'Show Area Converter';
        convbox.style.display = 'none';
    }
    else {
        btnconvrtr.className = 'btnconvrtrpressed';
        btnconvrtr.innerHTML = 'Hide Area Converter';
        convbox.style.display = '';
    }
    event.stopPropagation();
    return false;
}
function cancelClick(event){
    event.stopPropagation();
    return false;
}

function btnconvert_click(event) {

    var convertfrom = document.getElementById('dlconvfrom').value;
    var convertto = document.getElementById('dlconvto').value;
    var qty = document.getElementById('txtconvrtfrom').value;

    var result = Area_convert(convertfrom, convertto, qty);
    document.getElementById('txtconvrtto').value = (isNaN(result) ? '' : result);
    event.stopPropagation();
    return false;
}

function Area_convert(convert_from,convert_to,qty)
{
    var tblconvert = {
        'area': {
            'hectare': 1,
            'sqmeter': 10000,
            'sqfoot': 107639,
            'acre': 2.47105,
            'are': 100,
            'gunta': 98.842
        }
    };
    var result = qty * (tblconvert.area[convert_to] / tblconvert.area[convert_from]);
    result = Math.ceil(result * 1000000) / 1000000
    return result;
}

function doc_click() {
    console.log("c2");
    var convbox = document.getElementById('convbox');
    convbox.style.display = 'none';
}
document.onclick = doc_click;