extract the script from this code : 

const PATH_BASE = 'https://calcolatore.kerakoll.com/calc-stucchi';
const PATH_CALC = 'product-calc';
const PARAM_PRODUCTCODE = 'productCode';
const PARAM_MARKETCODE = 'marketCode';

const FIELDS_INPUT = [
    '#input-tile-length', '#input-tile-width', '#input-tile-thickness', '#input-joint-width', '#input-area'
];

$(function() {
    var productCode = getProductCode();

    if (productCode === null || productCode === undefined)
        $('input, button').prop('disabled', true);

    setupCalculateEvent();
    setupResetEvent();
});

function getProductCode() {
    var url = new URL(window.location.href);

    return url.searchParams.get(PARAM_PRODUCTCODE);
}

function getMarketCode() {
    var url = new URL(window.location.href);

    return url.searchParams.get(PARAM_MARKETCODE);
}

function setupCalculateEvent() {
    $('#calc-form').on('submit', function(e) {
        e.preventDefault();

        var i;
        var sel;
        var el;

        var anyInvalid = false;

        for (i = 0; i < FIELDS_INPUT.length; i++) {
            sel = FIELDS_INPUT[i];
            el = $(sel);

            el.removeClass('is-invalid');

            if (el.attr('type') === 'number') {
                var val = el.val();

                if ($.trim(val) === '' || val <= 0) {
                    el.addClass('is-invalid');
                    anyInvalid = true;
                }
            }
        }

        if (anyInvalid)
            return;

        var data = {
            productCode: getProductCode()
        };

        for (i = 0; i < FIELDS_INPUT.length; i++) {
            sel = FIELDS_INPUT[i];
            el = $(sel);

            var name = el.attr('name');

            data[name] = el.val();
        }

        sendRequest(
            PATH_BASE + '/' + PATH_CALC,
            'GET',
            data,
            function (response) {
                $('.package-div:visible').remove();

                var len = response.length;

                var quantityLabel = '';

                for (var i = 0; i < len; i++) {
                    var product = response[i];

                    quantityLabel = product.quantity + ' ' + product.packageWeightUnit;

                    var el = createPackageInput(product);

                    $('.package-div:last').after(el);
                }

                $('#output-quantity').val(quantityLabel);
            },
            function (response) {
                alert(response.responseJSON.error);
            },
            false
        );
    });
}

function setupResetEvent() {
    $('#btn-reset').on('click', function() {
        $('input').val('');
        $('.package-div:visible').remove();
    });
}

function createPackageInput(product) {
    var el = $('#mock-package').clone().removeClass('d-none');

    var calcPackagesLabel = product.packages + ' (' + product.packageWeight + ' ' + product.packageWeightUnit + ')';

    $(el).find('.package-input').val(calcPackagesLabel);

    return el;
}

function sendRequest(url, method, data, successCallback, errorCallback, silent) {
    method = method.toUpperCase();
    if (method === 'DELETE' || method === 'PUT')
        url = url + '?' + $.param(data);

    $.ajax({
        url: url,
        type: method,
        data: data,
        dataType: 'json',
        cache: false,
        success: function(response, textStatus, xhr) {
            if (!silent) {
                if (xhr.status !== 200 || response === null || response === undefined || response.length === 0) {
                    if (errorCallback)
                        errorCallback(response);
                } else if (successCallback) {
                    successCallback(response);
                }
            }
        },
        error: function(response) {
            if (!silent) {
                var errorText = response.responseText;
                if (errorText === undefined || errorText === null)
                    return;

                if (errorCallback)
                    errorCallback(response);
            }
        }
    });
}


and combine it with this code: 

 <!-- Custom -->
        <script>
            const LABEL_OF = '';
        </script>

        <script src="/calc-stucchi/js/index.js?v=1.1.1"></script>

        <title>Calcolatore Stucchi - Kerakoll</title>
    </head>
    <body>
        <div class="container justify-content-center">
            <form id="calc-form">
                <div class="row">
                    <div class="col form-group">
                        <label for="input-tile-length">Länge der Fliesen (mm)</label>
                        <input type="number" min="1" step="any" class="form-control" name="tileLength" id="input-tile-length" placeholder="mm" required>
                    </div>

                    <div class="col form-group">
                        <label for="input-tile-width">Breite der Fliesen (mm)</label>
                        <input type="number" min="1" step="any" class="form-control" name="tileWidth" id="input-tile-width" placeholder="mm" required>
                    </div>
                </div>

                <div class="row">
                    <div class="col form-group">
                        <label for="input-tile-thickness">Dicke der Fliesen (mm)</label>
                        <input type="number" min="1" step="any" class="form-control" name="tileThickness" id="input-tile-thickness" placeholder="mm" required>
                    </div>

                    <div class="col form-group">
                        <label for="input-joint-width">Fugenbreite (mm)</label>
                        <input type="number" min="1" step="any" class="form-control" name="jointWidth" id="input-joint-width" placeholder="mm" required>
                    </div>
                </div>

                <div class="row">
                    <div class="col form-group">
                        <label for="input-area">Zu verlegender Bereich (m²)</label>
                        <input type="number" min="1" step="any" class="form-control" name="area" id="input-area" placeholder="m&#178;" required>
                    </div>
                </div>

                <div class="row justify-content-center">
                    <button type="reset" class="btn btn-secondary" id="btn-reset">Zurücksetzen</button>
                    <i class="mx-2"></i>
                    <button type="submit" class="btn btn-success" id="btn-calculate">Berechnen</button>
                </div>
            </form>

            <hr />

            <div class="text-center">
                <div class="row">
                    <div class="col form-group">
                        <label class="lead" for="output-quantity">Benötigte Produktmenge</label>
                        <input type="text" class="form-control form-control-lg" id="output-quantity" readonly>
                    </div>
                </div>

                <div class="row">
                    <div class="col form-group">
                        <span class="lead">Verpackung</span>
                    </div>
                </div>

                <div class="package-div form-group text-left row d-none" id="mock-package">
                    <div class="w-100">
                        <input type="text" class="form-control package-input" id="mock-package-input" readonly>
                    </div>
                </div>
            </div>

            <hr class="my-2 hr-normal">

            <div class="text-center">
                <small class="mx-2">
                    Verfügbarkeit der Verpackungsart für die gewählte Farbe prüfen
                </small>
            </div>
        </div>
    </body>
</html>


give me a python code with tkinder interface back