JSFiddle - React, Tailwind, and code Playground

by S1l3

HTML

Budget na mesec: <span id="budget_mesec">
</span>€
<br />
5k na mesec: <span id="5k_na_mesec">
</span>
<br />
Jointov na mesec: <span id="st_jointov_na_mesec">
</span>
<br />
<input id="zeljeni_budget" placeholder="Zeljeni budget" type="text"/>
<br />
Jointov na budget (na mesec): <span id="jointov_na_budget">
</span>
<br />
Jointov na budget (na dan): <span id="jointov_na_budget_na_dan">
</span>

JavaScript

var st_jointov_na_dan = 6,
    st_jointov_vikend_dan = 10, 
    dni_v_tednu = 7,
    dni_brez = Math.floor((Math.random()*5)+1),
    cena_5ke = 40,
    st_jointov_v_5ki = 15;
  
    var st_jointov_na_mesec = st_jointov_na_dan * 20 + st_jointov_vikend_dan * 8 - dni_brez,
    petk_na_mesec = st_jointov_na_mesec / st_jointov_v_5ki,
    budget_mesec = petk_na_mesec * cena_5ke;

    $('#budget_mesec').html(Math.floor(budget_mesec));
    $('#5k_na_mesec').html(Math.floor(petk_na_mesec));
    $('#st_jointov_na_mesec').html(Math.floor(st_jointov_na_mesec));
   
$('#zeljeni_budget').bind('keyup', function(){
    var self = $(this), 
        zeljeni_budget = self.val(),
        jointov_na_budget = zeljeni_budget / cena_5ke * st_jointov_v_5ki,
        jointov_na_budget_na_dan = jointov_na_budget / 30;    
    
        $('#jointov_na_budget').html(Math.floor(jointov_na_budget));
        $('#jointov_na_budget_na_dan').html(Number(jointov_na_budget_na_dan).toFixed(2));
});