JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

<div class="conversion_calculator">
    <p>How much is this worth to your business?</p>
    <div class="calcinput_wrap">
        <p>Visits
            <input type="text" name="visits" />
        </p>
        <p>Transactions
            <input type="text" name="transactions" />
        </p>
        <p>Average Order Value &#40;&pound;&#41;
            <input type="text" name="average" />
        </p>
    </div>
    <div class="calctotals_wrap">
        <p>Your current conversion rate is:
            <br /> <span class="current_conversion"></span><span>&#37;</span>

        </p>
        <p>Your current total sales value is:
            <br /> <span>&pound;</span><span class="current_sales"></span>

        </p>
    </div>
    <div class="adjustconversion_wrap">
        <p>Adjust your conversion rate:
            <input type="text" name="newconversion" /><span>&#37;</span></p>
    </div>
    <div class="salesincrease_wrap">
        <p>Total increase in sales:
            <br /> <span>&pound;</span><span class="sales_increase">0</span>

        </p>
    </div>
</div>

CSS

body {
    font-family: sans-serif;
}
.conversion_calculator {
    background-color: #f4f4f4;
}
.conversion_calculator, .conversion_calculator * {
    text-align: center;
    box-sizing: border-box;
}
.conversion_calculator p {
    font-size: 20px;
    padding:8px;
    color: #999999;
    display:inline-block;
    text-align: left;
}
.calcinput_wrap, .calctotals_wrap {
    width:100%;
    max-width:960px;
    margin:auto;
}
.calcinput_wrap p, .calctotals_wrap p, .salesincrease_wrap p, .adjustconversion_wrap p{
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 0;
    text-align: left;
    color: #444444;
    max-width: 296px;
    word-wrap: break-word;
}
.calctotals_wrap p, .salesincrease_wrap p, .adjustconversion_wrap p {
    text-align: center;
    padding: 16px;
}
.calctotals_wrap span, .salesincrease_wrap span, .adjustconversion_wrap span {
    font-size: 32px;
    padding: 8px 4px;
    display:inline-block;
    vertical-align:middle;
}
.salesincrease_wrap p, .adjustconversion_wrap p {
    color:white;
}
.conversion_calculator input {
    padding: 8px;
    margin: 8px 0;
    width: 100%;
}
.adjustconversion_wrap input {
    padding: 8px;
    margin: 8px 0;
    width: 100%;
    max-width: 200px;
}
.adjustconversion_wrap {
    background-color:#f6468d;
}
.salesincrease_wrap {
    background-color:#de0067;
}

JavaScript

$(':input').bind('keypress keydown keyup change', function () {
    var visitsNumber = parseFloat($(':input[name="visits"]').val()),
        transNumber = parseFloat($(':input[name="transactions"]').val()),
        averNumber = parseFloat($(':input[name="average"]').val()),
        newConv = parseFloat($(':input[name="newconversion"]').val());
    var sales = '';
    var conversion = '';
    var newpercent = '';
    var newtotal = '';
    var newtrans = '';
    var salesincrease = '';
    if (!isNaN(visitsNumber) && !isNaN(transNumber) && !isNaN(averNumber)) {
        sales = (averNumber) * (transNumber);
        conversion = (transNumber) / (visitsNumber) * 100;
    }
    if (!isNaN(newConv)) {
        newpercent = (newConv) - (conversion);
        newtrans = ((newConv) / 100) * (visitsNumber);
        newtotal = (averNumber) * (newtrans);
        salesincrease = (newtotal) - (sales);
    }
    $('.current_sales').html(sales.toFixed(2));
    $('.current_conversion').html(conversion.toFixed(2));
    $('.sales_increase').html(salesincrease.toFixed(2));
});