It's time to move on to the second assignment in this course.
This week we had covered buttons, forms,
tables, cards, images, and media and then finally we covered badge.
So, this assignment we'll look at trying
to explore your understanding of all these topics.
Your second assignment consists of three tasks.
Let's go through each one of them step by step.
Your first task is to create a form in your index strategy table pitch.
So, this is right after the descriptions that we have so
use another row with the row content there.
Create a card in there with a title.
Reserve a table, and then inside that card,
in the card block, include a form.
The form will contain radio buttons.
You can check the documentation for forms to understand how to create radio buttons.
They are fairly straightforward.
So, we have inline radio buttons all the way ranging from one to
six and you will allow the user to select any one of these radio buttons.
So clicking on one of them,
will allow you to select the number of guests.
And the second piece of information is date,
and the third piece of information is time.
So, the date and time are going to be supported by two input fields
here and then we have a submit button here named
"reserve" with the button being in blue color.
So, remember all these different details here and this is in a card.
Now, this card if it is on a small to extra large screen size,
it will be centered in this row and it will occupy eight columns.
So you have two columns left here and two columns left there.
These are some clues about how you're going to position this.
For extra small screen sizes,
you occupy the entire screen width,
otherwise your form cannot be accommodated meaningfully there.
So, that's the first task in your second assignment.
If you recall, the left the second draw of our content unstyled,
you're going to use the media object now to style this content.
Note in particular that,
for the media object your image is going to appear on the right side,
so use the right set of
classes in order to make your image appear to the right side of the content,
unlike the other ones where the image appears on the left side.
And it has to be centered vertically here.
Also, note that you need to include a badge here with the word "new."
And so we have seen this already in
the exercise before so this should not be very difficult to achieve.
So, your second task, again,
is to use the media object to style this through.
The final task in the second assignment,
is to create a button here.
This would be a block button.
So, button block class which you're going to use.
Now, what you can do is you can reposition this content
here to occupy half the screen and
then these two will like the remaining part of the screen.
And use the words reserve table in there.
Not only that, when you click on this button,
you'll be taken down to the form at the bottom of the page,
which allows you to do the reservation.
So, this is where you need to use the HTML ways of
specifying IDs in order to achieve this action.
So going back again, this button should be positioned vertically in
table and should share the screen space half with your logo here.
The wordings here can occupy the remaining half of the scripts.
So you can use the column classes to adjust these things.
Jogesh K. MuppalaAssociate Professor
