Bus Stop (task with Firebase and AJAX)

Write a JS program that retries arrival times for all buses by given bus stop ID when a button is clicked. Use the following HTML template to test your code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bus Stop</title>
  <style>
    #stopName {
      font-size: 1.5em;
      font-weight: 400;
      padding: 0.25em;
      background-color: aquamarine;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="stopInfo" style="width:20em">
  <div>
    <label for="stopId">Stop ID: </label>
    <input id="stopId" type="text">
    <input id="submit" type="button" value="Check" onclick="getInfo()"></div>
  <div id="result">
    <div id="stopName"></div>
    <ul id="buses"></ul>
  </div>
</div>
<script>
  function getInfo() {
    // TODO ...
  }
</script>
</body>
</html>

When the button with ID 'submit' is clicked, the name of the bus stop appears and the list bellow gets populated with all the buses that are expected and their time of arrival. Take the value of the input field with id 'stopId'. Submit a GET request to https://judgetests.firebaseio.com/businfo/{stopId}.json (replace the highlighted part with the correct value) and parse the response. You will receive a JSON object in format:

stopId: {

name: stopName,

buses: { busId: time, … }

}

Place the name property as text inside the div with ID 'stopName' and each bus as a list item with text:

"Bus {busId} arrives in {time}"

Replace all highlighted parts with the relevant value from the response. If the request is not successful, or the information is not in the expected format, display "Error" as stopName and nothing in the list. The list should be cleared before every request is sent.

The webhost will respond with valid data to IDs 1287, 1308, 1327 and 2334.

Examples:

busstop1

When the button is clicked, the results are displayed in the corresponding elements:

busstop2

If an error occurs, the stop name changes to Error:

busstop3

asked in JavaScript category by user andrew
edited by user andrew

share on fb share via email

2 Answers

>> HERE YOU CAN VIEW THE PROJECT ONLINE << (on GitHub io)

Here is the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bus Stop</title>
    <style>
        #stopName {
            font-size: 1.5em;
            font-weight: 400;
            padding: 0.25em;
            background-color: aquamarine;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="buses.js" type="application/javascript"></script>
</head>
<body>
<div id="stopInfo" style="width:20em">
    <div>
        <label for="stopId">Stop ID: </label>
        <input id="stopId" type="text">
        <input id="submit" type="button" value="Check" onclick="getInfo()"></div>
    <div id="result">
        <div id="stopName"></div>
        <ul id="buses"></ul>
    </div>
</div>
</body>
</html>

JavaScript code:

function getInfo() {
    let stopId = $("#stopId").val();

    let list = $("#buses");
    list.empty();//Clean the list with #buses every time it is loaded again

    let getRequest = {
        method: "GET",
        url: `https://judgetests.firebaseio.com/businfo/${stopId}.json`,
        success: displayBusStopInfo,
        error: displayError
    };

    $.ajax(getRequest);

    function displayBusStopInfo(busStopInfo) {
        $("#stopName").text(busStopInfo.name);//Displays the name of the bus stop in #stopName div

        let buses = busStopInfo.buses;
        for (let busNumber in buses) {
            let busMinutes = buses[busNumber];
            let listItem = $("<li>");
            listItem.text(`Bus ${busNumber} arrives in ${busMinutes} minutes`);
            list.append(listItem);
        }
    }

    function displayError(e) {
        console.dir(e.status);
        $("#stopName").text("Error");//Displays error
    }
}

answered by user icabe
edited by user golearnweb

Here is my JS function:

function getInfo() {
    let stopId = $("#stopId").val();

    let list = $("#buses");
    list.empty();//Clean the list with #buses every time it is loaded again

    $.get(`https://judgetests.firebaseio.com/businfo/${stopId}.json`)
        .then(displayBusStopInfo)
        .catch(displayError);

    function displayBusStopInfo(busStopInfo) {
        $("#stopName").text(busStopInfo.name);//Displays the name of the bus stop in #stopName div

        let buses = busStopInfo.buses;
        for (let busNumber in buses) {
            let busMinutes = buses[busNumber];
            let listItem = $("<li>");
            listItem.text(`Bus ${busNumber} arrives in ${busMinutes} minutes`);
            list.append(listItem);
        }
    }

    function displayError(e) {
        console.dir(e.status);
        $("#stopName").text("Error");//Displays error
    }
}

answered by user matthew44
edited by user golearnweb

Q: Bus Stop (task with Firebase and AJAX)

Examples:

Log in (click HERE) or Register (click HERE) to answer this question

2 Answers

Please Log in (click HERE) or Register (click HERE) to add a comment.

Please Log in (click HERE) or Register (click HERE) to add a comment.

Q: Bus Stop (task with Firebase and AJAX)

Examples:

Log in (click HERE) or Register (click HERE) to answer this question

2 Answers

Please Log in (click HERE) or Register (click HERE) to add a comment.

Please Log in (click HERE) or Register (click HERE) to add a comment.

Related questions