JSFiddle - React, Tailwind, and code Playground

by de Montalembert Jonathan

HTML

<div class="wrap">
    <input type="number">
    <input type="number">
    <input type="number">
    <input type="number">
    <input type="number">
    <input type="number">
</div>
<div class="result">
    <div class="hourly"><span class="total">0</span> / <span class="hours"></span> h</div>
    <div class="multiplier">1
        <input type="range" min=1 step=1 max=48 value=0 />48</div>
</div>

JavaScript

var total = {
    day: 0,
    hour: 0
};
var prod = [0, 200, 400, 600, 800, 1000, 1300, 1600, 1900, 2200, 2500, 3000];
var max = [0, 500, 1000, 1500, 2500, 10000, 20000, 30000, 50000, 75000, 100000, 150000];
var $hours = $('.hourly .hours');
var hours = 1;
$('.wrap input[type=number]').on('keyup', function () {
    $.each($('.wrap input'), calc);
    $('.result .total').text(total.hour);
    total.hour = 0;
});
$('.multiplier input').on('input', function () {
    hours = $(this).val();
    $.each($('.wrap input'), calc);
    $('.result .total').text(total.hour);
    $('.result .hours').text(hours)
    total.hour = 0;
});

function calc() {
    if ($(this).val() > prod.length -1) return;
    var level = $(this).val() || 0;
    var currentProd = prod[level];
    var currentMax = max[level];
    total.hour += currentProd * hours > currentMax ? currentMax : currentProd * hours;
}