JSFiddle - React, Tailwind, and code Playground

by kybernaut

HTML

<form action="" id="kalkulackaceny" onsubmit="return false;">
    
    <label>Počet znaků
    <input type="text" name="kyber-znaky"
    id="kyber-znaky"/><span id="totalNS"></span></label> 
    
    <label><input type="checkbox" name="kyber-specha" id="kyber-specha" val="yes"/> Spěchá to?</label>
    
    <label><input type="checkbox"  name="kyber-korektura" id="kyber-korektura" val="yes"//> Korektura?</label>
    
</form>
<div id="totalPrice"></div>

CSS

label {
    display:block;
}

JavaScript

var cenaStd = 599;
var cenaDeset = 99;
var cenaSpechato = 399;
var cenaKorektura = 39;
var cenaKorekturaSpechato = 79;

$(document).ready(function(){
    
    //update znaky
    $('#kyber-znaky').keyup(function(){
        var ns = $('#kyber-znaky').val();
        ns = Math.round(ns/1800);
        
        if (ns < 50){
            finalPrice = cenaStd;
        }
        else {
            finalPrice = cenaStd;
            x = ns - 49;
            while (x > 0){
                finalPrice += cenaDeset;
                x -= 10;
            }
        }
        
        $('#totalNS').text(" (celkem " +ns+ " NS)");
        //$('#totalPrice').text("Celková cena za zakázku " +finalPrice);
        
    });

    $('#kyber-specha').change(function() {        
        if($('#kyber-specha:checked').val() == 'yes'){
            finalPrice += cenaSpechato;
        }               
    });
    $('#kyber-korektura').change(function() {
    if($('#kyber-specha:checked').val() == 'yes'){    
        if($('#kyber-specha:checked').val() == 'yes'){
            finalPrice += ns*cenaKorekturaSpechato;
        }
        else {
            finalPrice += ns*cenaKorektura;
        }
    }
    });
    
    $('#kalkulackaceny').on('change',function(){
		$('#totalPrice').text("Celková cena za zakázku " +finalPrice);
	});
    
});