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.
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.
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.
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.