JSFiddle - React, Tailwind, and code Playground

by chepe263

HTML

<form accept-charset="UTF-8" action="#" id="calc" method="post">
    <div class="item-1">
        <label for="item-1">Item 1</label>
        <input class="income" id="item-1" size="50" />
        <select id="select-item-1" class="select">
            <option value="daily">Daily</option>
			<option value="weekly">Weekly</option>
			<option value="monthly">Monthly</option>
        </select>
    </div>
    <div class="item-2">
        <label for="item-2">Item 2</label>
        <input class="income" id="item-2" size="50" />
        <select id="select-item-2" class="select">
            <option value="daily">Daily</option>
			<option value="weekly">Weekly</option>
			<option value="monthly">Monthly</option>
        </select>
    </div>
    <div class="item-3">
        <label for="item-3">Item 3</label>
        <input class="income" id="item-3" size="50" />
        <select id="select-item-3" class="select">
            <option value="daily">Daily</option>
			<option value="weekly">Weekly</option>
			<option value="monthly">Monthly</option>
        </select>
    </div>
    <hr />
    <div class="grand-total">
        <label for="grand-total">Total :</label>
        <input id="grand-total" size="50" disabled />
        <select id="grand-total-filter" class="select">
            <option value="daily">Daily</option>
			<option value="weekly">Weekly</option>
			<option value="monthly">Monthly</option>
        </select>
    </div>
</form>

JavaScript

calculateToDays = function(type, value){
    var rValue = 0;
    switch(type){
        case 'daily':
            rValue = value;
            break;
        case 'weekly':
            rValue = value * 5;
            break;
        case 'monthly':
            rValue = value * 20;
            break;
    }
    return rValue;
}
calculateFromDays = function(type,value){
    var rValue = 0;
    switch(type){
        case 'daily':
            rValue = value;
            break;
        case 'weekly':
            rValue = value / 5;
            break;
        case 'monthly':
            rValue = value / 20;
            break;
    }
    return rValue;
}
jQuery('.income').keyup(function(){
        if (!isNaN(jQuery(this).val())){
			jQuery('#select-' + jQuery(this).attr('id')).attr('data-value',jQuery(this).val());			
			jQuery('#select-' + jQuery(this).attr('id')).attr('data-valueDays',calculateToDays(jQuery('#select-' + jQuery(this).attr('id')).val(),jQuery(this).val()));
			jQuery("#grand-total-filter").change();			
			}
	});

jQuery('.select').change(function(){
    
    jQuery(this).attr('data-valueDays',calculateToDays(jQuery(this).val(),jQuery(this).attr('data-value')));
	jQuery("#grand-total-filter").change();
});
jQuery("#grand-total-filter").change(function() {
		var value = 0;
		jQuery('.select').each(function(){
		if (!isNaN(jQuery(this).attr('data-valueDays')))
			value += parseFloat(jQuery(this).attr('data-valueDays'));
		});
		jQuery('#grand-total').val(calculateFromDays(jQuery(this).val(),value));
	});