Untitled

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">

        const $ = (id) => {
            return document.querySelector(id);
        }

        const getTax = () => {
            let desiredValue = Number($('#x-value').value || "0");
            let costTable = { 30: 1, 60: 1.75, 120: 3 }

            if(desiredValue < 1)
                return alert(`Valor insuficiente, valor mínimo R$: ${costTable["30"].toFixed(2)}`);

            let usedTime = (desiredValue >= 1 && desiredValue < 1.75) ? 30 :
                        (desiredValue >= 1.75 && desiredValue < 3) ? 60 : 120;

            $("#inLabelTroco").textContent = `Tempo: ${usedTime} min`;
            $("#inLabelTempo").textContent = `Troco R$: ${(desiredValue - costTable[usedTime]).toFixed(2)}`;
        }

        window.addEventListener('load', () => {
            $('#x-calcular').addEventListener('click', () => {
                getTax();
            })
        })

    </script>
</head>
<body>
    <input type='text' id='x-value'/>
    <input type='button' id='x-calcular' value='calcular'/><br/>
    <label id="inLabelTroco"></label><br>
    <label id="inLabelTempo"></label>
</body>
</html>