1. jQuery UI is needed to create the widgets in this assignments. jQuery UI folder is already downloaded and saved in the applications folder (in jquery-ui-1.11.4.custom folder). Use appropriate script and link elements in the head section of index.html to include necessary files of jQuery UI in index.html.

10%

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

30%

3. In reservation.js, add the jQuery code that implements the tabs.

15%

4. In reservation.js, add the jQuery code that implements the Datepicker widget for the workshop date. The date can be from the current date to 65 days after the current date.

25%

5. In reservation.js, code an event handler for the click event of the View Our Privacy Policy button. This event handler should display the div element with an id of dialog as a modal Dialog widget.

20%

You can watch the video of what your completed application will look like here:

https://www.useloom.com/share/9c66d389489a4bf2a58335df1faccfe4

*********************************************************

Html code

Workshop Reservation Request

name="reservation_form" id="reservation_form">

Workshop Selection

Workshop date:

Hours:

Subject:

HTML

CSS

JavaScript

Group size (persons):

1

2

3

4

5

Accomodation

Dinner:

Complete

Without drinks

Only refreshments

Airport pickup:

Bus

Taxi

Workshop personal guide

Contact Information

Name:

Email:

Phone:

Our privacy policy is based on regulations provided by the Personal Information Protection and Electronic Documents Act (PIPEDA or the PIPED Act) and other Canadian regulatory acts

*******************************************

response html code

Thank you for your request!

We will contact you within the next 24 hours.

********************************************

reservation j query

$(document).ready(function() {

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

// add a span element after each text box

$(":text").after("*");

// the handler for the submit event of the form

// executed when the submit button is clicked

$("#reservation_form").submit(

function(event) {

var isValid = true;

// validate the requested workshop date

if ($("#workshop_date").val() == "") {

$("#workshop_date").next().text("This field is required.");

isValid = false;

} else {

$("#workshop_date").next().text("");

}

// validate the number of hours

if ($("#hours").val() == "") {

$("#hours").next().text("This field is required.");

isValid = false;

} else if (isNaN($("#hours").val())) {

$("#hours").next().text("This field must be numeric.");

isValid = false;

} else {

$("#hours").next().text("");

}

// validate the name entry

var name = $("#name").val().trim();

if (name == "") {

$("#name").next().text("This field is required.");

isValid = false;

}

else {

$("#name").val(name);

$("#name").next().text("");

}

// validate the email entry with a regular expression

var email = $("#email").val();

if (email == "") {

$("#email").next().text("This field is required.");

isValid = false;

} else if ( !emailPattern.test(email) ) {

$("#email").next().text("Must be a valid email address.");

isValid = false;

} else {

$("#email").next().text("");

}

// validate the phone number

if ($("#phone").val() == "") {

$("#phone").next().text("This field is required.");

isValid = false;

} else {

$("#phone").next().text("");

}

// prevent the submission of the form if any entries are invalid

if (isValid == false) {

event.preventDefault();

}

} // end function

); // end submit

}); // end ready

**************************

main css

body {

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

font-size: 87.5%;

background-color: white;

margin: 0 auto;

width: 600px;

border: 3px solid blue;

padding: 10px 20px;

}

legend {

color: blue;

font-weight: bold;

margin-bottom: .8em;

margin-left: 3em;

}

label {

float: left;

width: 180px;

text-align: right;

}

input, select {

margin-left: 1em;

margin-right: 1em;

margin-bottom: .5em;

}

input {

width: 14em;

}

input.left {

width: 1em;

padding-left: 0;

}

fieldset {

border: none;

margin-left: 0;

margin-top: 1em;

padding: 0;

}

input.last {

margin-bottom: 1em;

}

#gr_size {

width: 35px;

}

#subjects {

width: 90px;

}

#guide {

width: 1em;

margin-left: 0;

}

#privacy {

margin-left: 0;

width: 15em;

}

#submit {

width: 10em;

}

#dialog p {

font-size: 85%;

}

.error {

float: none;

color: red;

font-size: 85%;

}