JSFiddle - React, Tailwind, and code Playground

by ravan

HTML

<fieldset>
    <legend>Crescimento/Redução</legend>
    <label for="numero1">Número de Fãs Antigo</label>
    <input class="crescimento" type="text" id="numero1">
    <label for="numero2">Número de Fãs Atual</label>
    <input class="crescimento" type="text" id="numero2">
    <label for="resultado">Resultado</label>
    <input type="text" id="resultado">
</fieldset>
        
<fieldset>
    <legend>Engajamento</legend>
    <label for="numero3">Número de Fãs</label>
    <input class="engajamento" type="text" id="numero3">
    <label for="numero4">Falando sobre</label>
    <input class="engajamento" type="text" id="numero4">
    <label for="resultado2">Resultado</label>
    <input type="text" id="resultado2">
</fieldset>

CSS

body {
    font-family:'Tahoma';
}
input {
    display: block;
    width: 90%;
    padding: 5px;
    margin: 5px;
}
input, fieldset {
    border-radius: 10px 10px;
    border: 1px solid #ccc;    
}
fieldset {
    width: 200px;
    display: inline-block;
}

JavaScript

$('.crescimento').on('change', function () {
    var num1 = $('#numero1').val();
    var num2 = $('#numero2').val();
    var res = 0;
    if (num1 != '' && num2 != '') {
        res = num2 * 100 / num1;
        $('#resultado').val(Math.round(res - 100).toFixed(1) + '%');
    }
});

$('.engajamento').on('change', function () {
    var num3 = $('#numero3').val();
    var num4 = $('#numero4').val();
    var res2 = 0;
    if (num3 != '' && num4 != '') {
        res2 = num4 * 100 / num3;
        $('#resultado2').val(Math.round(res2).toFixed(2) + '%');
    }
});