JSFiddle - React, Tailwind, and code Playground

by bigwelly

HTML

<form id="dadosFidelizacao">
<div style="position: absolute; width: auto; display: inline-block; ; text-align: center;">

	<br><br>
	
	<table style="border-color: #808080; border-width: 1px; border-style: solid;" cellpadding="5" cellspacing="0">
		<th colspan="2" style="background-color: #808080; color: #FFF;">
			Simulador de quebra de fidelização
		</th>
		<tr>
			<td>
				Valor da fidelização R$
			</td>
			<td>
				<input type="text" style="text-align: left;" size="12" id="valorFidelizacao" onKeyUp="maskIt(this,event,'###.###.###,##',true)" dir="rtl" />
			</td>
		</tr>	
		<tr>
			<td>
				Data da criação
			</td>
			<td>
				<input type="text" style="text-align: left;" size="12" id="dataCriacao" onkeyup="javascript:somenteNumero(this); Formatadata(this,event)" maxlength="10" />
			</td>
		</tr>
		<tr>
			<td>
				Data atual
			</td>
			<td>
				<input type="text" style="text-align: left; background-color: #EEE" size="12" id="dataAtual" readonly />
			</td>
		</tr>
		<tr>
			<td>
				Data da expiração
			</td>
			<td>
				<input type="text" style="text-align: left; background-color: #EEE" size="12" id="dataexpiracao" readonly />
			</td>
		</tr>
		<tr>
			<td>
				Meses restantes
			</td>
			<td>
				<input type="text" style="text-align: left; background-color: #EEE" size="12" id="mesesRestantes" readonly />
			</td>
		</tr>
		<tr>
			<td>
				Valor mensal <span style="margin-left: 47px;">R$</span>
			</td>
			<td>
				<input type="text" style="text-align: left; background-color: #EEE" size="12" id="valorMensal" readonly />
			</td>
		</tr>
		<tr>
			<td>
				Valor da multa <span style="margin-left: 38px;">R$</span>
			</td>
			<td>
				<input type="text" style="text-align: left; background-color: #EEE" size="12" id="valorMulta" readonly />
			</td>
		</tr>
		<tr>
			<td colspan="2" style="text-align: center;">
				<input type="button" value="Calcular" onclick="javascript: validaCampos();">
				<input type="button" value="Limpar" onclick="javascript:...

JavaScript

/*Limpa dados do form pois não estou usando submit, essa função tem um timeout (500 milisegundos) pra dar 
reload na página pois sem submit os dados não saem dos campos e para preencher novamente era necessário apertar F5*/
function limpaDados(){
	document.getElementById("dadosFidelizacao").reset();
	setTimeout("location.reload(true);", 500);
	dataAtual();
}

/*Valida se foi preenchido os campos necessários para o calculo*/
function validaCampos(){
	dataCriacao = document.getElementById("dataCriacao").value;
	valorFidelização = document.getElementById("valorFidelizacao").value;
	
	if (dataCriacao.length > 0 && valorFidelização.length > 0){
		valorMensal(); 
		diferencaDatas(); 
	}else{
		alert("Preencha os campos Valor da Fidelização e Data da Criação.")
	}
}

/*Pega data atual e formata para melhor visualização em padrão brasileiro DD/MM/YYYY*/
function dataAtual(){

	var data = new Date();
	var dia = data.getDate();
	var mes = data.getMonth()+1;
	var ano = data.getFullYear();
	var dataFormatada = dia +"/"+ mes +"/"+ ano;
	
	document.getElementById("dataAtual").value = dataFormatada;
}

dataAtual(); //Executa quando entra na página

/*Função pronta para formatar a data para melhor visualização em padrão brasileiro DD/MM/YYYY*/
function Formatadata(Campo, teclapres){
	var tecla = teclapres.keyCode;
	var vr = new String(Campo.value);
	vr = vr.replace("/", "");
	vr = vr.replace("/", "");
	vr = vr.replace("/", "");
	tam = vr.length + 1;
	if (tecla != 8 && tecla != 8)
	{
		if (tam > 0 && tam < 2)
			Campo.value = vr.substr(0, 2) ;
		if (tam > 2 && tam < 4)
			Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2);
		if (tam > 4 && tam < 7)
			Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4, 7);
	}
}

/*Esta função seria para inserir somente números mas por ser um campo data precisa da "/" então inclui ela na função*/
function somenteNumero(campo){  
var digits="0123456789/"  
var campo_temp   
	for (var i=0;i<campo.value.length;i++){ ...