JSFiddle - React, Tailwind, and code Playground

by nocturnesound

HTML

<script src="http://d2o0t5hpnwv4c1.cloudfront.net/584_form/bg_form.png"></script>
<div id="mainCalc">    
<input name="value" placeholder="distantion" id="distantion"></input>
    <select id="selectCalc">
           <option value="sec">sec</option>
           <option value="min">mins</option>
           <option value="hr">hrs</option>
           <option value="day">days</option>
           <option value="year">years</option> 
   </select>
<input name="answer" placeholder="result" id="result" disabled="disabled"></input> 
<button onclick="calc();">ok</button>
<button onclick="clearCalc();">clear</button>
</div>

CSS

#mainCalc {
    border: solid 1px #fff;
    background-color: #eee;
    width:70%;
    padding: 30px;
    
    
}

input, select{
	padding: 9px;
	border: solid 1px #E5E5E5;
	outline: 0;
	font: normal 15px/100% Verdana, Tahoma, sans-serif;
	width: 200px;
	background: #FFFFFF url('bg_form.png') left top repeat-x;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}



button {
    padding: 9px;
	border: solid 1px #E5E5E5;
	outline: 0;
	font: normal 15px/100% Verdana, Tahoma, sans-serif;
	width: 50px;
	background: #FFFFFF url('bg_form.png') left top repeat-x;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    cursor: pointer;
    
}

input:hover, input:focus, select:hover, select:focus, button:hover, button:focus { 
	border-color: #C9C9C9; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

JavaScript

calc = function() {

    var value = document.getElementById('distantion').value;
    
    var choise = document.getElementById('selectCalc').value;
    
    var result = '';
    
    if(choise == 'sec') {
        result = value / 300000;
    } else if(choise == 'min') {
        result = value / 300000 / 60; 
    } else if(choise == 'hr') {
        result = (value / 300000) / 60 / 60; 
    } else if(choise == 'day') {
        result = value / 300000 / 60 / 60 / 24; 
    } else if(choise == 'year') {
        result = value / 300000 / 60 / 60 / 24 / 365; 
    }
    
    
    $('#result').attr('value', result);

}

clearCalc = function() {
     $('#distantion').attr('value', '');   
     $('#result').attr('value', '');
}