[SOLVED] Web Assignment 4-Bootstrap, JQuery and Sass

Assignment 4: Bootstrap, JQuery and Sass

1. Instructions
2. My submission 3. Discussions

In this assignment you will use the JavaScript methods to control the showing and hiding of the modals in the index.html page. You will replace the data-* attributes of the buttons and instead add JavaScript method to control the modals. In addition, you will write some SCSS code to style the modal background.

Step-By-Step Assignment Instructions

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), the JavaScript code (scripts.js) and the SCSS code (styles.scss). 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:

• Removed the data-* attributes from the Reserve Table button and the Login link in the Navbar that control the two modals.
• Updated the button and the link so that they will trigger the appropriate JavaScript code when clicked.
• Included appropriate JavaScript code using the modal methods to toggle the showing and hiding of the modals when the two buttons are clicked.
• Add SCSS code to style the modal with colors. Assignment RequirementsThis assignment requires you to complete the following four tasks. Detailed instructions for each task are given below.

  Task 1

  In this task you will be removing the data-* attributes from the Reserve Table button in the Jumbotron that enable the toggling of the Reserve Table modal. Similarly you will also remove the data-* attributes from the Login link in the Navbar that triggers the Login modal.

  Task 2

  In this task you will add appropriate JavaScript code to the page so that the Reserve Table modal will be toggled when the Reserve Table button is clicked:

• You will add the appropriate JavaScript code to scripts.js.
• You will update the button so that the modal is triggered when the button is clicked.
• Note: Read Bootstrap Modal Methods for more information on how to implement theJavaScript methods.

  Task 3

  In this task you will add appropriate JavaScript code to the page so that the Login modal will be toggled when the Login link is clicked:

• You will add the appropriate JavaScript code to scripts.js.
• You will update the Login link so that the modal is triggered when the link is clicked.Task 4

  In this task you will add appropriate SCSS code to styles.scss whereby the colors of the Modal are appropriately styled.

• You will set the modal header to dark background and change the text color to floralwhite, and use nesting to change the color of the close button to floralwhite.
• You will set the modal body to the pale background
• You will set the modal footer to the light background.Submission

• You should submit the updated index.html file, scripts.js and styles.scss with all the tasks completed. A reviewer should easily be able to take your files and substitute it into their own web project and see it working correctly.

Review criteria

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

Task 1:

• The data-* attributes have been removed from the Reserve Table button.
• The data-* attributes have been removed from the Login link. Task 2:
• Appropriate JavaScript code has been added to the page to trigger the Reserve Table modal.
• The Reserve Table button has been appropriately updated to enable the triggering of the modal.

Task 3:

• Appropriate JavaScript code has been added to the page to trigger the Login modal.
• The Login link has been appropriately updated to enable the triggering of the modal. Task 4:
• Appropriate SCSS code has been added to styles.scss to set the modal header, body and footer background colors appropriately.
• Set up the modal header text color to floralwhite.
• Set up the close button color to floralwhite.