Write a JS program that tracks the progress of a bus on it’s route and announces it inside an info box. The program should display which is the upcoming stop and once the bus arrives, to request from the server the name of the next one. Use the following HTML to test your solution:
<!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() {
// TODO ...
return {
depart,
arrive
};
}
let result = solve();
</script>
</body>
</html>
The bus has two states – moving and stopped. When it is stopped, only the button “Depart” is enabled, while the info box shows the name of the current stop. When it is moving, only the button “Arrive” is enabled, while the info box shows the name of the upcoming stop. Initially, the info box shows "Not Connected" and the "Arrive" button is disabled. The ID of the first stop is "depot".
When the "Depart" button is clicked, make a GET request to the server with the ID of the current stop to address https://judgetests.firebaseio.com/schedule/{currentId}.json (replace the highlighted part with the relevant value). As response, you will receive a JSON object in the following format:
stopId {
name: stopName,
next: nextStopId
}
Update the info box with information from the response, disable the “Depart” button and enable the “Arrive” button. The info box text should look like this (replace the highlighted part with the relevant value):
Next stop {stopName}
When the "Arrive" button is clicked, update the text, disable the “Arrive” button and enable the “Depart” button. The info box text should look like this (replace the highlighted part with the relevant value):
Arriving at {stopName}
Clicking the buttons in succession will cycle through the entire schedule. If invalid data is received, show "Error" inside the info box and disable both buttons.
Submit only the solve() function that returns an object, containing the two click event handlers for depart() and arrive(), as shown in the sample HTML.
Examples
Initially, the info box show Not Connected and the arrive button is disabled.
When Depart is clicked, a request is made with the first ID. The info box is updated with the new information and the buttons are changed:
Clicking Arrive, changes the info box and swaps the buttons. This allows Depart to be clicked again, which makes a new request and updates the information:
Account
