JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Duncan's Just-In-Time Donuts</title>

    <link rel="stylesheet" type="text/css" href="DuncanForm.css" />
    <script src="DuncanForm.js"></script>
</head>
<body onload="initForm()">
    <div id="formBlock">
        <H1 class="heading">Duncan's Just-In-Time Donuts</H1>
        <H3 class="subheading" >All donuts 50 cents each, cake or glazed!</H3>

        <form id="orderForm" method="POST" name="orderForm" action="orderDonuts.php">
            <div class="inputField"><label for="name">Ваше имя:</label> <input id="name" type="text" name="name" onchange="updateOrder();" onclick="clickName()" onblur="updateOrder();" autocomplete="on"></div>
            <div style="color: black; margin-top: 12px; text-align: right">Введите количество пончиков</div>
            <div class="inputField"><label for="cakeDonuts">обычных:</label><input id="cakeDonuts" type="number" maxlength="4" size="4" name="cakeDonuts" onchange="updateOrder();"><input id="checkbox_ed_cakeDonuts" type="checkbox"><label for="checkbox_ed_cakeDonuts">десятки</label> </div>
            <div class="inputField"><label for="glazedDonuts">глазированных: </label><input id="glazedDonuts" type="number" maxlength="4" size="4" name="glazedDonuts" onchange="updateOrder();"> <input id="checkbox_ed_glazedDonuts" type="checkbox"><label for="checkbox_ed_glazedDonuts">десятки</label></div>
            <div class="inputField"><label for="pickUpMinutes">Время готовности(минут):</label> <input id="pickUpMinutes" type="number" name="pickUpMinutes" onchange="updateOrder();"> </div>
            <div class="inputField"><label for="subtotalField">Без налога: </label><input id="subtotalField" type="number" name="subtotalField" disabled> </div>
            <div class="inputField"><label for="taxField">Налог: </label><input id="taxField" type="number" name="taxField" disabled> </div>
            <div class="inputField"><label...

CSS

body{
    font-size: 12pt;
    font-family: Arial, Helvetica,serif;
}
#formBlock{
    width: 440px;
}
.heading, .subheading{
    margin: 0;
    text-align: center;
}
.heading{
    font-size: 16pt;
    font-weight: bold;
    margin-bottom: 5px;
}
.subheading {
    font-size: 11pt;
    font-weight: normal;
    font-style: italic;
    margin-bottom: 10px;
}
#orderForm {
    background: url("donuttime.png") no-repeat;
    padding: 0 0 10px 0;
}
#orderForm div{
    vertical-align: baseline;
    margin: 0 0 10px;
    color: #999;
    position: relative;
}

#orderForm label{
    width: 188px;
    display: block;
    text-align: right;
    position: absolute;
    left: 90px;
}

#orderForm input{
    padding-left: 5px;
    color: black;
    width: 152px;
    position: relative;
    left: 288px;
}

#orderForm input[type='checkbox']{
    width: auto;
    display: inline-block;
    position: absolute;
    left: 340px;
}
#orderForm input[type='checkbox']+label{
    display: inline-block;
    position: absolute;
    width: auto;
    left: 363px;
}

input#cakeDonuts, input#glazedDonuts{width: 3em;}

#totalField, #subtotalField, #taxField{font-weight: bold;}

JavaScript

function initForm(){
    document.getElementById('name').focus('name');
    document.getElementById('subtotalField').value = "0.00";
    document.getElementById('totalField').value = "0.00";
    document.getElementById('taxField').value = "0.00";
    updateOrder();
}

function clickName(){
    document.getElementById('name').value = "";
}

function updateOrder(){
    /*Константы*/
    var TAXRATE = 0.095;
    var DONUTPRICE = 0.5;

    var name = document.getElementById('name').value;

    if(!name)
    {    document.getElementById('name').value ="Введите ваше имя";
        document.getElementById('name').style.color = '#070';
        document.getElementById('name').style.fontStyle = 'italic';
    }

    var numCakeDonuts = parseInt(document.getElementById('cakeDonuts').value, 10);
    var numGlazedDonuts = parseInt(document.getElementById('glazedDonuts').value, 10);

    if(isNaN(numCakeDonuts)) numCakeDonuts = 0;
    if(isNaN(numGlazedDonuts))numGlazedDonuts = 0;

    if(document.getElementById('checkbox_ed_cakeDonuts').checked)
    {    numCakeDonuts = parseInt(document.getElementById('cakeDonuts').value, 10)*10;
    }
    if(document.getElementById('checkbox_ed_glazedDonuts').checked)
    {    numGlazedDonuts = parseInt(document.getElementById('glazedDonuts').value, 10) * 10;
    }
//    alert(numCakeDonuts +', ' + numGlazedDonuts);

    var pickUpMinutes = parseInt(document.getElementById('pickUpMinutes').value, 10);

    var subtotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE;
    var tax = subtotal * TAXRATE;
    var total = subtotal+ tax;

    if(isNaN(pickUpMinutes))
        {    document.getElementById('pickUpMinutes').value = "Введите время";
            document.getElementById('pickUpMinutes').style.color ='#070';
            document.getElementById('pickUpMinutes').style.fontStyle ='italic';
    }

document.getElementById('subtotalField').value = subtotal.toFixed(2);
    document.getElementById('taxField').value = tax.toFixed(2);
   ...