Ship

We now want to bring a Ship into the equation.

Challenge

Create a new css rule that targets elements with an id of ship and sets the background-image to the ship.png file. Instantiate a new Ship object in JavaScript and then add a new method to the controller that selects's a #ship div and positions it under the .port element that corresponds to the ship's currentPort.

To complete this challenge, you will need to:

• Create a new instance of Ship inside the inline JS in index.html, passing in your itinerary.
• Create a new div with the id ship as a child of the #viewport div, and as a sibling of the .ports element.
• In style.css add a new #ship ruleset. You want to use the ship.png background image, and specify a width and height that matches that image's dimensions. You should also specify a position of absolute as later on we will want to control our element's X/Y co-ordinates within the viewport.
• Add a renderShip method to your Controller.prototype, which has a single parameter of ship.
• Back in index.html, call controller.renderShip and pass in your ship from before.
• In the renderShip method, find the index of the ship's currentPort inside of its itinerary. Use document.querySelector with an attribute selector to find a .port element that has a portIndex data attribute which corresponds to this index.
• Prior to appending to the DOM, set the top and left CSS properties of your ship element to the offsetTop and offsetLeft values for the port element.
• Add or subtract from your offsetLeft and/or offsetTop values to position your ship so it's centered directly underneath the port.

Recommended Reading

• Attribute presence and value selectors
• Attribute selectors
• offsetParent
• offsetTop
• offsetLeft