Fork and clone this repo into your Development
folder
In this website, whenever a user presses on an island, it will appear on the right side, with 'Boubyan' being the default island when you first open the app.
For the bonus 🎁, a user can book a trip to the island they choose by typing their information, and confirming their booking.
- In
App.js
we are rendring theIslandList
andIslandForm
. Island form is taking the valueisland
that you have to make a state. - Change the variable island to a state called
island
that holds the island to be shown with an intial value of boubyan island object. - In
App.js
pass our state to theIslandForm
. - Pass this
setIsland
toIslandList
. - From
IslandList
let's pass it again toIsland
. - In
Island
add anonClick
function to the wholediv
that calls oursetIsland
and give it the current island.
- Change the type of the phone number input to be phone
- When clicking (book now) button in
IslandForm
, show a confirm message to confirm if the user really wants to book the trip with the following message: "Are you sure you want to book to{ISLAND_NAME}
with the Name:{NAME}
, phone:{PHONE_NUMBER}
"
- If confirmed (clicking on OK button), you should increment the counter of visitor inside the island selected.