Exercise : Boot Loader (by Morgan Doocy)

Write a "Boot Loader" page that displays a randomly chosen fashionable boot when the "Load Boot" button is clicked. Start from this HTML skeleton. (sample solution)

• Write the JavaScript code to make an Ajax request to loader.php on Webster when the 'Load boot' button is clicked.
• The PHP service does not require any query parameters. Its output is simply a string containing a URL of an image of a random boot image to display.
• Whatever URL the loader service returns, inject a new img tag into the page that points to that image.

Exercise extra features

• The PHP service is slow; it takes 2-3 seconds to return the boot output. Make the page look better while it is waiting by temporarily displaying a "loading" animation. The page contains an element with id of loading that can be used to show an animated image while the page is waiting. Set its display DOM CSS property appropriately.
• The PHP service is flaky; every 5-6 requests, it crashes with an HTTP error 500. Make your page check for this and display an alert on errors so the user knows something went wrong. Don't try to display the boot image when there is an error.

Exercise Solution

You can view the solution javascript file here.