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' id="txt_valor">
            <input type="hidden"  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

.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: 0;
}

input[type="text"],
select {
	color: #313442;
	border-radius: 7px;
	border: solid 1px rgba(117, 117, 124, .38);
	background-color:...

JavaScript

const 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 }
};

function initParcelasSelect() {
    const select = document.querySelector("select");
    const fragment = document.createDocumentFragment();

    for (let parcela in objParcelas) {
        let option = document.createElement('option');
        option.value = parcela;
        option.innerText = `${parcela} Meses`;
        fragment.appendChild(option);
    }

    select.appendChild(fragment);
}

function formatarMoeda(valor) {
    return "R$ " + parseFloat(valor).toFixed(2).replace(".", ",");
}

const CALCULAR = {
    prestacoes: function () {
        const valorInput = document.getElementById("txt_valor").value.replace("R$ ", "").replace(".", "").replace(",", ".");
        const valor = parseFloat(valorInput);
        const parcelas = parseInt(document.getElementById("parcelas").value);
        const tipoJuros = parseInt(document.getElementById("tiposjuros").value);
        const taxaJuros = parseFloat(objParcelas[parcelas]?.juros || 0);
        const parcial = taxaJuros / 100;
        let valorParcela, valorTotalDoBem, jurosTotais;

        if (isNaN(valor) || isNaN(parcelas) || isNaN(tipoJuros) || isNaN(taxaJuros)) {
            console.error("Valores inválidos!");
            return;
        }

        if (tipoJuros === 1) {
            valorParcela = valor * Math.pow(1 + parcial, parcelas);
            valorTotalDoBem = valorParcela;
            jurosTotais = valorParcela - valor;
        } else if (tipoJuros === 2) {
            valorTotalDoBem = valor + parcial * valor * parcelas;
            valorParcela = valorTotalDoBem / parcelas;
           ...