JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<div class='calculadora'>
   <div class="titulo">
      <h2>Simulador de Juros Simples e Compostos</h2>
   </div>
   <div class="grids">
      <div class="calculo">
         <div class="box">
            <label>Aplicaçao inicial:</label>
            <input type="text" placeholder='0,00' class='moeda' id="valor">
         </div>
         <div class="box">
            <label>Parcelas:</label>
            <select id="parcelas"></select>
         </div>
         <div class="box">
            <label>Tipo de Juros:</label>
            <select id="tiposjuros">
               <option value='1'>Composto</option>
               <option value='2'>Simples</option>
            </select>
         </div>
         <div class="box">
            <label>Taxa de Juros:</label>
            <input type="text" id="juros" disabled>
         </div>
      </div>
      <div class="box-resultado">
         <div class="topo">
            <span>Total Futuro</span>
            <div class="valor">
               <span>R$:</span>
               <h1 id="bem">0,00</h1>
            </div>
         </div>
         <div class="info-geral">
            <div class="item">
               <h3>Aplicaçao inicial:</h3>
               <div class="valor">
                  <span>R$:</span>
                  <h2 id='resultado_aplicacao'>00,00</h2>
               </div>
            </div>
            <div class="item">
               <h3>Juros totais:</h3>
               <div class="valor">
                  <span>R$:</span>
                  <h2 id='jurostotais'>0,00</h2>
               </div>
            </div>
            <div class="item">
               <h3>Soma aplicações:</h3>
               <div class="valor">
                  <span>R$:</span>
                  <h2 id='resultado_aplicacaoes'>00,00</h2>
               </div>
            </div>
            <div class="item">
               <h3>Dividido em :</h3>
               <div class="valor">
                  <span...

CSS

body {
  font-family: 'Roboto', sans-serif;
  background: #1f2330;
}

.calculadora {
  border-radius: 8px;
  box-shadow: 0 8px 35px 0 rgba(181, 181, 188, .28);
  background-color: #fff;
  margin-top: 50px;
  padding: 20px 20px;
  margin: 0 18%;
}

.titulo h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #f87f4b;
  background: #1f2330;
  border-radius: 5px;
  padding: 30px;
  margin: 0;
  margin-bottom: 20px;
}

.grids {
  display: grid;
  grid-template-columns: auto auto;
}

.box-resultado {
  width: 470px;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0 19px 35px 0 rgba(117, 117, 124, .1);
  background-color: #fff;
  overflow: hidden;
}

.box-resultado .topo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 152px;
  background-image: linear-gradient(77deg, #f9844b, #f4324e);
}

.box-resultado .topo>span {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.13;
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
  display: block;
}

.box-resultado .topo .valor {
  display: flex;
  align-items: flex-end;
  color: #fff;
}

.box-resultado .topo .valor h1 {
  font-size: 60px;
  font-weight: 900;
  line-height: .8;
  letter-spacing: -1.3px;
  color: #fff;
  margin: 0;
}

.info-geral {
  padding: 26px 39px;
}

.info-geral .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: solid 1px rgba(151, 151, 151, .21);
  padding-bottom: 9px;
}

.info-geral .item h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.13;
  color: #313442;
}

.info-geral .item span {
  font-size: 15px;
  color: #75757c;
  width: 26px;
  margin-right: 5px;
}

.info-geral .item .valor {
  width: 168px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-end;
}

.info-geral .item h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.7px;
  color: #313442;
  margin:...

JavaScript

var objParcelas = {
	2: {
		juros: 1.60
	},
	3: {
		juros: 10.0
	},
	4: {
		juros: 1.60
	},
	5: {
		juros: 1.60
	},
	6: {
		juros: 1.60
	},
	7: {
		juros: 1.60
	},
	8: {
		juros: 1.60
	},
	9: {
		juros: 1.60
	},
	10: {
		juros: 1.60
	},
	11: {
		juros: 1.60
	},
	12: {
		juros: 1.60
	},
	18: {
		juros: 1.66
	},
	24: {
		juros: 1.64
	},
	36: {
		juros: 1.62
	},
	48: {
		juros: 1.70
	},
	60: {
		juros: 1.79
	}
};

for (parcela in objParcelas) {
	let option = document.createElement('option');
	option.value = parcela;
	option.innerText = parcela + ' Meses';
	document.querySelector("select").appendChild(option);
}
const CALCULAR = {
	prestacoes: function () {
		let $this = document.getElementById("valor");
		let str = parseFloat($this.value.replace('.', ','));
		let parcelas = parseInt(document.getElementById("parcelas").value);
		let tipoJuros = parseInt(document.getElementById("tiposjuros").value);
		let taxaJuros = parseFloat(objParcelas[parcelas].juros);
		var parcial = parseFloat(taxaJuros) / 100; //taxa de juros anual
		var valorParcela;
		var valorTotalDoBem;
		var jurosTotais;
		if (tipoJuros == 1) {
			valorParcela = (str * Math.pow((1 + parcial), parcelas) / parcelas);
			valorTotalDoBem = valorParcela * parcelas;
			jurosTotais = (str * Math.pow((1 + parcial), parcelas) - str);
		} else if (tipoJuros == 2) {
			valorTotalDoBem = parseFloat(str + parcial * str * parcelas);
			valorParcela = parseFloat(valorTotalDoBem / parcelas);
			jurosTotais = parseFloat(valorTotalDoBem - str);
		}
		document.getElementById("juros").value = taxaJuros + '%';
		document.getElementById("jurostotais").innerText = jurosTotais.toLocaleString('pt-br', {
			minimumFractionDigits: 2
		});
		document.getElementById("parcelas_txt").innerText = parcelas + 'x';
		document.getElementById("resultado").innerText = valorParcela.toLocaleString('pt-br', {
			minimumFractionDigits: 2
		});
		document.getElementById("resultado_aplicacaoes").innerText = str.toLocaleString('pt-br',...