In this episode, we focus on displaying the time slots for a selected date and letting the user pick one using Alpine.js. We kick things off by iterating over the fetched slots and showing them in a nice grid layout. We make sure we only show this grid if there are actually slots to display, and we use responsive Tailwind classes to make the grid look good on all screen sizes.
After getting the slots onto the page, we use Alpine's x-text
directive to show the slot times inside styled divs. If you change the selected date, the slots update right away (thanks to how we've set up our data fetching in earlier steps).
Next, we make the slots interactive. When you click on a slot, it updates the time
property in our overall booking form state. We talk through how you might debug this if you want to see the stored value. To give users a clear visual cue, we make the selected slot stand out by highlighting it, and make sure the unselected slots still show a hover state. Once you click a slot, it stays selected until you pick another one.
By the end of this video, we have a working slot picker that updates the selected time in our main booking form. In the next episode, we'll move on to filling out the rest of the booking form and eventually submitting your booking.