jQuery Reservation app homework

In this exercise, you will modify a Reservation application (see screenshots) to use Tabs, Datepicker, and Dialog widgets.

Open the HTML and JavaScript files below. Run this application to see what the user interface looks like.

Modify the HTML so that the contents of the three fieldset elements can be implemented as three tabs of a Tabs widget. After you do that, you can delete the fieldset and legend elements. Set the headings for the tabs to the content of the legend elements.

Add the jQuery code that implements the tabs.

Add the jQuery code that implements the Datepicker widget for the arrival date. The date can be from the current date to 90 days after the current date.

Code an event handler for the click event of the View Cancellation Policies button. This event handler should display the div element with an id of dialog as a modal Dialog widget.

_________________________________index.html______________________________________

Reservation Request

name="reservation_form" id="reservation_form">

General Information

Arrival date:

*

Nights:

*

Adults:

1

2

3

4

Children:

0

1

2

3

4

Preferences

Room type:

Standard

Business

Suite

Bed type:

King

Double Double

Smoking

Contact Information

Name:

*

Email:

*

Phone:

*

________________________________________________main.css______________________________

body {

font-family: Arial, Helvetica, sans-serif;

background-color: white;

margin: 0 auto;

width: 600px;

border: 3px solid blue;

padding: 10px 20px;

}

fieldset {

margin-top: 1em;

margin-bottom: 1em;

padding: .5em;

}

legend {

color: blue;

font-weight: bold;

font-size: 85%;

margin-bottom: .5em;

}

label {

float: left;

width: 90px;

}

input, select {

margin-left: 1em;

margin-right: 1em;

margin-bottom: .5em;

}

input {

width: 14em;

}

input.left {

width: 1em;

padding-left: 0;

}

p {

margin-top: 0;

margin-bottom: .5em;

}

input.last {

margin-bottom: 1em;

}

#adults, #children {

width: 35px;

}

#smoking {

width: 1em;

margin-left: 0;

}

#submit {

margin-left: 0;

width: 10em;

}

span {

color: red;

}

___________________________________________response.html_____________________________

body {

font-family: Arial, Helvetica, sans-serif;

background-color: white;

margin: 0 auto;

width: 600px;

border: 3px solid blue;

padding: 20px;

}

Thank you for your request!

We will contact you within the next 24 hours.

_____________________________reservation.js_________script_____________________

$(document).ready(function() {

var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;

}); // end ready

Reservation Request General Information Preferences Contact Information Arrival date: Nights: Adults: Children: View Cancellation Policies Submit Request