JSFiddle - React, Tailwind, and code Playground

by kybernaut

HTML

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

CSS

label {
    display:block;
}

JavaScript

function getTotal()
{
    
    //ceny
    var cenaStd = 599;
    var cenaDeset = 99;
    var cenaSpechato = 399;
    var cenaKorektura = 39;
    var cenaKorekturaSpechato = 79;
    
    var theForm = document.forms["kalkulackaceny"];
    var finalPrice = 0;
    
    //nacte pocet znaku a spocita cenu
    var znaky = theForm.elements["kyber-znaky"];
    var ns = 0;
    
    if(znaky.value!="") {
        var chars = parseInt(znaky.value);
        ns = Math.round(chars/1800);
        
        if (ns < 50){
            finalPrice = cenaStd;
        }
        else {
            finalPrice = cenaStd;
            x = ns - 49;
            while (x > 0){
                finalPrice += cenaDeset;
                x -= 10;
            }
        }
    }
    
    //spěchá to
    var spechato = theForm.elements["kyber-specha"];
    if(spechato.checked==true) {
        finalPrice += cenaSpechato;    
    }
    
    // korektura
    var korektura = theForm.elements["kyber-korektura"];
    if(korektura.checked==true) {
        
        if(spechato.checked==true) {
            finalPrice += ns*cenaKorekturaSpechato;
        }
        else {
            finalPrice += ns*cenaKorektura;
        }
        
    }
    
    //display the result
    document.getElementById('totalPrice').innerHTML =                                           "Celková cena za zakázku"+finalPrice;
 
}