It's time to apply what we've learn to a more complicated HTML setup. In this section, we'll test-drive a whole bunch of interconnected elements. To make things harder, we'll also be manipulating times and dates using the standard JavaScript Date object. As you'll soon see, our tests give us a structure to our work that makes even complicated scenarios straightforward.
We'd like to display available time slots over the next seven days as a grid, with columns representing days and rows representing 30-minute time slots, just like a standard calendar view. The user will be able to quickly find a time slot that works for them and then select the right radio button before submitting the form:
Here's an example of the HTML structure that we're aiming to build...
