Begin this assignment with the completed version of Project Six, including the external style sheet and the images folder that you createdforthatproject. ProjectSixculminatedwiththreewebpages and one external style sheet with each page constructed according to thewireframe shownbelow(desktopversion). See image.
In this project you will add a new Reservations page to the existing web site. This new page will consist of a CSS styled form. The Reservations page will be modeled on the same formatasthemainIndexpageforthewebsite.
The Reservations page will not feature the large image that appears on the Index page, but the bulk of the styling will be the same as for the Index page, so you can use the Index page asthestartingpointforyournewReservationspage.
The wire frame (desktop version) for the form on the Reservationspageisshownonthenextpage.
The Reservations page will also have tablet and mobile phone versions using the same media queries you created in Project Six. Reservations form wire frame. Desktop version.
Your first task for Project Seven is to create the Reservations pagewiththeformasshownonthepreviouspage.
Notice inthe wireframe the various types of input fields that the formcontains. Inadditionthefollowingwillapplytothisform:
Your second task for Project Seven is to link the form that you created to the following PHP script which is residing on my publicpageontheEustisserver.
While testing your form, you can simply set the action attribute oftheformto#,whichwillnotactivateanyscript.
When your form is complete, change the action attribute of the formto: http://eustis.eecs.ucf.edu/~markl/atlanticformreport.php
This PHP script is residing on the eustis server and will simply read the information entered into the form and return the values in a table as shown on the next two slides. You do not need to do anythingwiththephpscriptnorthestylingforthispage. User enters information into the form. PHP script on server returns the values that the user entered.
Your third task for Project Seven is to add JavaScript functionality to the pages of your website. You will add both staticanddynamicJavaScripteffectstoyourpages.
On the Main (index), Accommodations, and Activities pages you will invoke a JavaScript function that writes the date and time intothefooter ofthe page below the contact link. See next page. The JavaScript function that accomplishes this should be located in an external JavaScript file which is linked to each of these three pages via a The date and time are added here via javascript.
Your second JavaScript effect involves the tables on the Activities page. In Project Six you created the necessary CSS rules to style all of the tables and give them a zebra-stripe effect as a default setting. In this project you will created three different classes of tables. The first table (the Hiking activities) table will have an interactive effect added to it by JavaScript that you will construct and place inthe same external JavaScript file as part 1 of this task. This first table on the Activities page will belong to a class called stripe_table. The interactive effect will be tochangethe background, text,and linkcolorsfor all the table elements belonging to this class on the row (except the table header row) which the user has currently placed their mouse (a mouseover event), and will restore to its original colorswhentheusersmousehasmovedoutofthattablerow(a mouseoutevent). Thiseffectisshownonpages21-23.
Do not use the pseudo-class hover to achieve this effect. The JavaScript function that modifies the table presentation on the Activities page should be a targeted function. The targeted elementswillhavetheirCSSpropertiesmodifiedbythefunction.
The function should not apply to all the tables that appears on a webpage, but only those tables that are members of a specific class. Inthiscase,thestripe_tableclass.Ingeneral,thewebpage mightcontainmanydifferenttablesandwedontwantthefunction tonecessarilyaltereverytableonthepage.
Thus,themarkupmustbealteredtoaddclassestothetablesonthe Activities page. The JavaScript function will check to see if a table is a member of the class and if so, the function would alter the tables presentation accordingly. If the a table is not a member of the class, then the function would simply ignore that table and it wouldhavenoeffectonthetablespresentation.
Notice that the tables contain hyperlinks (an < a> element). Its very common tohavelinksandotherelementsintablecells.
The code you develop for this assignment must be robust enough to handle such circumstances. What this link is doing is providing an additional level of content hierarchy within the < td> elements of the table.
Theideahereisthattheelementwiththeeventlisteneristhe < tbody> the element that will trigger the event (on a mouseover or mouseout) is either a < td> or an < a> element, and the element that ismodifiedintheDOMasaresultoftheeventisa < tr> element.
In other words, the element that triggered the event doesnt handle the event and the element that is modified as a result of the event is neither the element that caused the event nor the element which handles the event.
Because events bubble up, the event listeners for the mouseover and mouseout events will need to be attached to the < tbody> element. You want the highlighting effect to occur only to the rows within the bodyofthetabletheelementsinthe < thead> elementshouldnotbe highlightedwhenthecursormovesoverthem.
Thus, the highest level at which you can detect the mouseover and mouseout events would be the < tbody>.If you went higher the DOMhierarchyyouwouldreceiveeventsfromthetablerowsthatarein theheader,whichyoudontwanttohighlight.
Once you attach the event listeners, your next task will be to determine the target element that is, the element that is actually triggering the event.
To do this, you need to get the target elements nodeName, which in thecaseofanelementgivesthenameofthetag.
Be aware that your problem here is that the < tr> elements do not trigger events when themouse goesoverthem, because they are entirely filled with their child < td> elements. There is simply no where you canplacethecursortogetthe< tr> elementtotriggeramouseevent.
The target element, i.e., the element directly under the mouse, will always be the < td> element unless you explicitly add padding or marginstocreatespacebetweenitandthe< tr> element.
The< td> element,becauseitsachildofa< tr> elementwillalways be on top of the < tr> element in the element stacking order and will thereforealwaysbethetargetofanymouseevent.
Since Ive added an anchor element to a < td> element in the first table, if the mouse is over the < a> element within the < td> element, thenthe< a>elementbecomesthetarget.
The most important thing to remember at this step is that the target element, be it the< td>, < a>, or some other element that might appear withinatablecell,isachildoftherowthatyouwanttohighlight.
Your next step is to find the target elements ancestor table row so that youapplythehighlightingtothattablerow.
Youll start moving up the DOM tree from the target element until you find the element with the node name < tr> and apply the highlighting classtothatelement. ThisisknownastraversingtheDOM.
To traverse the DOM youll run a loop that resets the event target element to its parent node until the node name of the parent is equal to < tr>.
All that is left to do once youve found the new target element is to applythehighlightingtothisrow.
Give some thought at this point though on how youll restore the originalrowstylingwhenthemouseouteventoccurs. See image.
Your third JavaScript effect also involves the tables on the Activities page. The second table on this page (Kayaking) will remain unaffected by any JavaScript, so it will continue to appear as a default styled table. The last table (Bird Watching), will have a static JavaScript effect of again altering the color schemeofthetableasshownonthenextpage. However,rather than writing the JavaScript yourself to do this, you will use jQuery. Use a CDN version of jQuery in the version you submit, but you can test and develop with a locally hosted version. For this last JavaScript effect, it is static only, so the effect you see on the next page will appear as soon as the page isloadedanddoesnotrequireanyuserinteractiontoinitiateit.