JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<table>
    <tr>
        <td>Формат</td>
        <td>Тип</td>
        <td>Плотность</td>
        <td>Клик</td>
        <td>Кол-во</td>
        <td>Calculate</td>
        <td>Output</td>
    </tr>
<tr>        
<td><select id = "SelectFormat">
    <option selected disabled>choose format</option>
    <option>A3</option>
    <option>SRA3</option>
</select>
</td>
<td><select id = "SelectType">
    <option selected disabled>choose type</option>
    <option>Colotech+</option>
    <option>Colotech+ Gloss</option>
    <option>Colotech+ Silk</option>
</select>
</td>
<td><select id = "SelectWeight">    
</select></td>
<td><select id = "SelectSide">
</select></td>
<td><input id = "Sheets" size = "4"></input></td>
<td><button id = "Calculate">Calculate</button></td>
<td><input id = "Output" size = "4"></input></td>
</tr>
<tr>
    <td><button id = "minus5">-5%</button></td>
    <td><button id = "minus10">-10%</button></td>
    <td><button id = "minus15">-15%</button></td>
    <td><button id = "minus20">-20%</button></td>
    <td><button id = "Hello">Сказать привет</button></td>
    <td><input id = "FinalOutput" value = "aaaaaaa" ></input></td>
</tr>
</table>

CSS

body{font-size:12px;}

td {padding:5px;}

#SelectFormat, #SelectWeight{width:60px;}

table tr:first-child{text-align:center;}

#FinalOutput{color:red;
font-size:30px;
background:yellow;}

display{display:none;}

JavaScript

$(document).ready(function() {
    var Paper, PaperCost, Click, ClickCost, Sheets, PaperArray = [],
        Result, Temp;
    $('#SelectFormat').change(function() {
        PaperArray[0] = $('#SelectFormat option:selected').val() + ' ';
    });

    $('#SelectType').change(function() {
        PaperArray[1] = $('#SelectType option:selected').val() + ' ';
        switch (PaperArray[1]) {
        case 'Colotech+ ':
            $('#SelectWeight').html('<option selected disabled>choose weight</option><option>90</option>');
            break;
        case 'Colotech+ Gloss ':
            $('#SelectWeight').html('<option selected disabled>choose weight</option><option>120</option>');
            break;
        case 'Colotech+ Silk ':
            if (PaperArray[0] == 'A3 ') {
                $('#SelectWeight').html('<option selected disabled>choose weight</option><option>120</option>');
            } else {
                $('#SelectWeight').html('<option selected disabled>choose weight</option><option>120</option><option>250</option><option>280</option>');
            }
            break;
        }
    });

    $('#SelectWeight').change(function() {
        PaperArray[2] = $('#SelectWeight option:selected').val();
        Paper = PaperArray[0] + PaperArray[1] + PaperArray[2];
        if (PaperArray[2] != '') {
            $('#SelectSide').html('<option selected disabled>choose sides</option><option>1 сторона ч/б</option><option>2 стороны ч/б</option><option>1 сторона цвет</option><option>2 стороны цвет</option>');
        }
    });

    $('#SelectSide').change(function() {
        Click = $('#SelectSide option:selected').val();
        switch (Click) {
        case '1 сторона ч/б':
            ClickCost = 0.25;
            break;
        case '2 стороны ч/б':
            ClickCost = 0.50;
            break;
        case '1 сторона цвет':
            ClickCost = 0.70;
            break;
        case '2 стороны цвет':
            ClickCost = 1.4;
            break;
      ...