02 Bus Schedule

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bus Schedule</title>
    <style>
        #schedule { text-align: center; width: 400px; }
        input { width: 120px; }
        #info { background-color:aquamarine; border:1px solid black; margin:0.25em; }
        .info { font-size: 1.5em; padding: 0.25em; }
    </style>


</head>
<body>
<div id="schedule">
    <div id="info"><span class="info">Not Connected</span></div>
    <div id="controls">
        <input id="depart" value="Depart" type="button" onclick="changeStatus('depart')">
        <input id="arrive" value="Arrive" type="button" onclick="changeStatus('arrive')" disabled="true">
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    let nextBusId = 'depot';
    function changeStatus(type) {
        $.ajax('https://judgetests.firebaseio.com/schedule/'+nextBusId+'.json', {
            method: 'GET',
            success: function (response) {
                if (type === 'depart') {
                    $('span.info').text('Next stop ' + response.name);
                    $('#depart').attribute('disabled', true);
                    $('#arrive').attribute('disabled', false);
                }
                else if (type === 'arrive'){
                    $('span.info').text('Arriving at  ' + response.name);
                    $('#arrive').attribute('disabled', true);
                    $('#depart').attribute('disabled', false);

                    nextBusId = response.next;
                }


            }
        });
    }
</script>
</body>
</html>