Message Box

Lets give the user a bit more information about what's going on with a message box.

Challenge

Create a new renderMessage method and call it whenever a ship leaves a port, docks at another or reaches the end of its itinerary.

To complete this challenge, you will need to:

• Add a CSS ruleset for selector #message and add CSS rules to style your message box.
• Create a new renderMessage method on the Controller.prototype that accepts a parameter of message.
• Inside the renderMessage method, append a new div element to the #viewport container (using Element.appendChild) with an id of 'message' and set its innerHTML of the message variable.
• Add a setTimeout which will remove the #message div element from the DOM (using Element.removeChild) after 2 seconds.
• Call the method when the ship sets sail.
• Call the method when the ship docks.
• Call the method when the ship attempts to go further than its itinerary (in place of the alert).

Recommended Reading

• MDN: Element.innerHTML
• setTimeout
• appendChild
• removeChild