JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="inputBlock">
    <label>
        <span>Total monthly visitors</span>
        <span>
            <input class="totalVisitors" type="number" value="1000" min=0 />
        </span>
    </label>
    
    <label>
        <span>Subscriber/Lead value ($)</span>
        <span>
            <input class="subscriberValue" type="number" value="1.3" min=0 />
        </span>
    </label>
    
    <label>
        <span>Popup conversion rate (%)</span>
        <span>
            <input class="expectedConversionRate" type="number" value="3" min=0 max=100 />
        </span>
    </label>
</div>

<div class="estimationBlock">
    <div class="estimationDefItem">
        <p class="estimationDesc">Extra monthly subscribers</p>
        <p class="estimationDef monthSubs"></p>
    </div>
    
    <div class="estimationDefItem">
        <p class="estimationDesc">Extra monthly revenue</p>
        <p class="estimationDef monthRevenue"></p>
    </div>
    
    <div class="estimationDefItem">
        <p class="estimationDesc">Extra yearly revenue</p>
        <p class="estimationDef yearRevenue"></p>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

label,
label span,
label input {
    display: block;
}

label {
    margin-bottom: 1em;
}

label input {
    width: 100%;
}

body {
    margin: 30px auto;
    max-width: 300px;
}

.inputBlock {
    margin-bottom: 2em;
}

.estimationDefItem {
    margin-bottom: 1em;
}

.estimationDef {
    color: #777;
}

JavaScript

var $monthRev = $('.monthRevenue'),
    $yearRev = $('.yearRevenue'),
    $monthSubs = $('.monthSubs'),
    
    $inputs = $('input'),
    
    $visitors = $('.totalVisitors'),
    $subscriberVal = $('.subscriberValue'),
    $expectedCR = $('.expectedConversionRate');
        

function onValChange() {
    var monthly_visitors = $visitors.val(),
        subscriber_val = $subscriberVal.val(),
        conv_rate = $expectedCR.val(),
        
        rev = calculateRevenue(monthly_visitors, subscriber_val, conv_rate),
        subs = calculateSubs(monthly_visitors, conv_rate);
    
    updateResults(subs, rev.month, rev.year);     
}

function calculateRevenue( monthly_visitors, subscriber_val, conv_rate) {
    var month = monthly_visitors * subscriber_val * conv_rate / 100,
        year = month * 12;
    
    return {
        month: month.toFixed(2),
        year: year.toFixed(2)
    };
}

function calculateSubs(monthly_visitors, conv_rate) {
    return Math.floor(monthly_visitors * conv_rate / 100);
}

function updateResults( extra_subs, month_rev, year_rev ) {
    $monthSubs.text(extra_subs);
    $monthRev.text(month_rev + '$');
    $yearRev.text(year_rev + '$');
}

$inputs
    .on({
        'change': onValChange,
        'keyup': onValChange
    })
    .eq(1).trigger('change');