Web Assignment 3-Bootstrap CSS Components Solved

Assignment 2: Bootstrap CSS Components

Objectives and Outcomes

In this assignment, you will continue to work with the website that you have been developing in the exercises. You will edit the home page (index.html). You will start with the current home page at the end of the last exercise in this module. At the end of this assignment, you should have completed the following tasks:

• Designed a form to enable users to submit a reservation request for a table. Note that at this stage the form will be inactive. This form should have been included in a new content row that you create just before the footer of the page.
• Formatted the contents of the second row of the page using media class. The content column of the row should have been converted to a media object. In addition it should include a badge.
• Added a button to the Jumbotron to enable users to access the form to reserve a table at the restaurant. Clicking on this button should take you to the reservation form at the bottom of the page.Assignment and Requirements

  This assignment requires you to complete the following three tasks. Detailed instructions for each task are given below. The picture of the completed web page included below indicates the location within the web page that will be updated by the three tasks.

  Task 1

  In this task you will be adding another content row to the page. The content row should contain the following:

• You should create a reservation form for the user to reserve a table. The reservation form should contain a field using radio that enables the users to specify the number of guests (1-6).
• The form should contain fields to specify the date and time of the reservation. The fields should contain appropriate placeholder information and font-awesome icons to identify the purpose of the fields. Use the input-group addons for adding the icons.
• The form should contain a button named Reserve to initiate reservation of the table.
• The form should be enclosed inside a card with the heading “Reserve a Table”. The cardshould occupy 8 columns and centred in the row for small to extra-large screens. For extra-small screens, the card should span the entire row.

Task 2

In this task you will be formatting the content in the second row of the page. The formatting should result in the following:

• Format the content of the second column with the media class together with the media object class. Use the buffet.png image file provided for you in the img folder. The image should displayed to the right of the content description. See figure below.
• Add a badge with the word “NEW” to the content as shown in the figure below. Task 3In this task you will be adding a block-sized button to the Jumbotron to the right of the restaurant logo:

• The block-level button and the restaurant logo should share the right six columns of the row. The restaurant name and description can now be reduced to occupy the left six columns. Use the small button (btn-sm).
• Clicking on the button should take you down to the form for reserving a table.

Review criteria

Upon completion of the assignment, your submission will be reviewed based on the following criteria:

Task 1

• The new content row is correctly formatted and includes the reservation form and the “Reserve a Table” card header.
• The form contains the radios to enable specification of the number of guests.
• The form includes a date field with the font-awesome icon included
• The form includes a time field with the font-awesome icon included
• The form contains a reserve button.Task 2
• The content in the row has been correctly formatted using the media class
• The image is displayed to the right of the content using the correct media-* classes and atthe correct position.
• The badge is correctly displayed in the second row.Task 3
• The Reserve Table button is correctly included in the Jumbotron and is a block size button.
• The button is correctly enclosed inside a div with the correct column specification.
• The reserve button when clicked takes us to the form. The link in the button should be setup correctly to take us to the form.