Command Shift

Sailing

Sailing

We have a ship and some ports - lets sail away!!!

Set sail

Challenge

Create a new "Set Sail" button which, when clicked, will move the ship gradually over to the next port.

To complete this challenge, you will need to:

  • Add a button to index.html with an id of #sailbutton.
  • Style and position the button using CSS.
  • Modify the Controller constructor so it takes a parameter of ship. Set this.ship to ship and modify any other references to ship in Controller to come from this.ship, not method parameters.
  • Modify your constructor call in index.html so it also takes a ship.
  • Add a click event listener to the button inside the Controller constructor and set the callback function to an arrow function that calls this.setSail.
  • Add a setSail method to the Controller.prototype.
  • Use the index of the next port in the ship's itinerary to find the corresponding DOM element
  • Set the ship's left position to the next port's offsetLeft - do so gradually using setInterval, adding 1px every n (you choose) milliseconds, so the boat moves along gradually. Be sure to use clearInterval when the ship reaches the port, and be sure to call ship.dock so our instance of Ship is updated.
  • Alert the user that they're at the end of their cruise if they attempt to go further than the itinerary.

On this page