Mobile Web Application Assitance

Requirements: To create a Mobile Web Site for customer quotation. The site contains two pages Main and Quotation. A header (grid-area) and a footer (grid-area) are to be included on both pages. The header to display a h1 "Quotation System" and includes Assignment #1 / Your Name / Your Student Number on the next line. The footer includes Your Login Name / Your Campus. Each page to include a background image of your choice that fills the entire page (your choice of covering the page with one image or a repeating image). The image s/b transparent enough for readability (you can use the same image for both pages). Format the site for portrait view. Use jQuery and ES6/7 features. Use CSS Grid with grid-area for layout. Main Page: The Main Page has a header, footer, and the Content area (grid-area) includes a form with the following inputs: Input (with labeling) for the Customer's name Input (with labeling) for the Customer's email address Use to pick a room from these options - Living Room, Family Room, Bedroom. Input (with labeling) for the width of the room Input (with labeling) for the length of the room Input (with labeling) using a colour box to pick the colour for the room Use to pick a type of paint - standard paint (24.99 per can) or premium paint (39.99 per can) A button to save ALL the data to local storage before calling the Quotation Page Input validations are required to ensure valid data is stored to local storage. Quotation Page: The Quotation Page has a header, footer, and the content area (grid-area) pulls data from local Storage and creates a quote that includes the following: Customer's contact information (name and email) The room to be painted The square footage of the room based on length and width of all the walls A colour swatch showing the colour the customer picked The number of paint cans that will be needed to paint the room based on each can cover approximately 400 sq ft of wall space (rounded up) The final price for the number of cans plus 13% HST

I will use Chrome's Toggle Device Bar for iPhone 12 Pro / SE in Portrait mode. Remember, this is a mobile site so formatting and layout should reflect this; too much scrolling or whitespace will reduce your mark.

Other Requirements: Create a folder for this assignment. The index.html should be the only file in the assignment folder. All other files should be in sub-folders, for example: CSS sub-folder to include all CSS files images sub-folder to include all images js sub-folder to include all JavaScript files Be sure to include the viewport setting in the html files.