Sailing
Sailing
We have a ship and some ports - lets sail away!!!
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 ofship
. Setthis.ship
toship
and modify any other references toship
inController
to come fromthis.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 theController
constructor and set the callback function to an arrow function that callsthis.setSail
. - Add a
setSail
method to theController.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 usingsetInterval
, adding 1px every n (you choose) milliseconds, so the boat moves along gradually. Be sure to useclearInterval
when the ship reaches the port, and be sure to callship.dock
so our instance ofShip
is updated. - Alert the user that they're at the end of their cruise if they attempt to go further than the itinerary.