Untitled

<!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>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</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="result.depart()">

        <input id="arrive" value="Arrive" type="button" onclick="result.arrive()" disabled="true">

    </div>

</div>

<script>

    function solve() {
    let apiUrl = 'https://judgetests.firebaseio.com/schedule/';
    let currentStop = 'depot';
    let nextStop = 'depot';

    function depart() {
        toggleButtons('#arrive', '#depart');
        $.ajax({
            method: 'GET',
            url: apiUrl + currentStop + '.json',
            success: function (data) {
                nextStop = data.next;
                $('#info').find('span').text(`Next stop ${data.name}`);
            }
        });
    }

    function arrive() {
        toggleButtons('#depart', '#arrive');
        $.ajax({
            method: 'GET',
            url: apiUrl + currentStop + '.json',
            success: function (data) {
                $('#info').find('span').text(`Arriving at ${data.name}`);
                currentStop = nextStop;
            }
        });
    }

    function toggleButtons(buttonA, buttonB) {
        $(buttonA).removeAttr('disabled');
        $(buttonB).attr('disabled', 'disabled');
    }

    return {
        depart,
        arrive
    };
}

</script>

</body>

</html>