JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<section class="container">
	<div id="form">
		<h3 title="Valor ideal divido pela mutiplicação dos dias e as horas trabalhadas..">Quanto vale sua hora?</h3> 
		<div class="code">&#60;<span style="color:#f92672"> valor ideal </span>&#62; <span style="color:#7fe22e">/</span> ( &#60;<span style="color:#f92672"> dias </span>&#62; <span style="color:#7fe22e"> * </span>&#60;<span style="color:#f92672"> horas </span>&#62; )
		</div>
		<hr>
		<div class="form-group">
			<label for="ideal">Quanto você quer ganhar por mês?</label>
			<input onkeypress="return isNumber(event)" placeholder="Quanto em média que você deseja ganhar por mês?" class="form-control" type="number" min="0" id="ideal" required>
		</div>
		<div class="form-group">
			<label for="dias">Quantos dias você trabalha em um mês?</label>
			<input onkeypress="return isNumber(event)" placeholder="Quantos dias da semana você trabalha?" class="form-control" type="number" id="dias" required>
		</div>
		<div class="form-group">
			<label for="ideal">Quantas horas por dia você trabalha?</label>
			<input onkeypress="return isNumber(event)" placeholder="Quantas horas você trabalha em um dia?" class="form-control" type="number" id="horas" required>
		</div>
		<div class="form-group">
			<input class="btn btn-default" onclick="calculo();" type="button" value="Calcular" id="submit">
		</div>
		<div class="bg-success" id="resultado"></div>
		<div class="bg-danger" id="error"></div>
	</div>
	<div title="Não inventei o cálculo, apenas fiz o código ;)" style="cursor:default;font-size:11px;margin:.3em 1em;font-weight:bold;float:right;">&#60; <span style="font-size:9px">&copy;</span> wagner souza &#62;</div>
</section>

CSS

.btn{display:inline-block;padding:4px 12px;margin-bottom:0;font-size:14px;line-height:20px;color:#333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,.75);vertical-align:middle;cursor:pointer;background-color:#F5F5F5;background-image:linear-gradient(to bottom,#FFF,#E6E6E6);background-repeat:repeat-x;border-width:1px;border-style:solid;-moz-border-top-colors:none;-moz-border-right-colors:none;-moz-border-bottom-colors:none;-moz-border-left-colors:none;border-image:none;border-color:rgba(0,0,0,.1)rgba(0,0,0,.1)#B3B3B3;border-radius:4px;box-shadow:0 1px 0 rgba(255,255,255,.2)inset,0 1px 2px rgba(0,0,0,.05)}#form *{outline:0;transition:all linear .2s .2s}#form{background-color:#F9F9F9;margin-top:5em;padding:1em;box-shadow:0 1px 0 rgba(255,255,255,.2)inset,0 1px 2px rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);border-radius:4px}#resultado,.bg-danger,.bg-success{text-align:center;padding:0 .5em;border-radius:4px;border:1px solid rgba(0,0,0,.1);display:none}.bg-danger,.bg-success{padding:.5em}h3{cursor:help}#form h3:hover~.code{display:block}.code{text-align:center;background:#333;color:#fff;border-radius:3px;padding:2px 10px;display:none}

JavaScript

function calculo(){

	var	jIdeal     = document.getElementById('ideal').value,
		jDias      = document.getElementById('dias').value,
		jHoras     = document.getElementById('horas').value,
		jResultado = document.getElementById('resultado'),
		oResultado = jIdeal / ( jDias * jHoras );
		jFinal = oResultado.toFixed( 2 ),
		jError = document.getElementById('error');

		if ( jIdeal == '' || jDias == ''|| jHoras == '' ){
			jError.innerHTML = 'Você deve preencher todos os campos!!';
			jError.style.display = "block";
			jResultado.style.display = "none";

			return false;
		}else{
			jError.style.display = "none";
			jResultado.style.display = "block";
			jResultado.innerHTML = 'Sua hora vale: R$' + jFinal;
		}
	}
	function isNumber( evt ){
		var charCode = ( evt.which ) ? evt.which : event.keyCode;
		if ( charCode > 31 && ( charCode < 48 || charCode > 57 ) ) {
			confirm('Somente números por favor!!');
			return false;
		};
		return true;
	}