Overview
Throughout the chapter a web form is being enhanced and validated. This form with some modifications will be incorporated into your website project.
Need a Visual Reference?
The following video displays the basic functionality of the assignment and not the entire web page. Each student's site will be tailored to meet their talents and style. The following is just the most basic. If you see something that is contradictory to our class assignments, please ask. Do not assume that since it is on the video that it is 100% correct. All pages and items must validate for HTML5 and CSS3.
JavaScript(6e) Personal Website: Chapter 07-Objects
Note: The video does not display the updated footer with the date last modified since that will part of the document that is displayed on every page.
Specifics
- Make a copy of the JSChapter06 and rename it JSChapter07. This week's work will be done using the files in this folder.
- There will be two parts for this assignment:
- Formatting the Date Last Modified which is displayed in the footer on each page
- Adding a Photo Gallery Order Form which incorporates form validation and use of objects
- In CSP.js,
- Update the top and bottom navigation such that the generic name of CH 07 is replaced by Objects and the corresponding links will link to the new page, objects.htm/l.
- At the top of the code (just below the initial comments) add a comment something similar to
/* ~~~~~~~~~~~ Chapter 7: Using Object Oriented JavaScript - Photo Order ~~~~~~~~~~~~ */
The JavaScript code is located in objects.js
Date Last Modified
- Just below the Chapter 7 comments, create a getLastModified() function in the .js file. This will be called in the displayFooter() function. Change all webpages, so that the current date last modified code is replace by a call to this new function.
- The date must be formatted as: Last Modified: 18-December-2018
- The methods of the Date class must be used to format the date
- Hint: Check out the Date constructor function (p. 464 - second code example). Consider using document.lastModified as the argument instead of (1776, 6, 4).
Example:
- Photo Gallery Order Form
- When the user prepares an order
- The form fields will be validated. No fields can be left blank and the number of copies must be a number between 1 and 25.
- If there is an error, a red inline message will appear and if it is a textbox, the background will be changed to lightyellow. If there is more than one error, the cursor will be on the field with an error that closest to the top of the form. Once the error has been corrected and the Place Order button is clicked (form is revalidated), the red inline message will be hidden and the textbox's background will return to white.
- Once validation has been passed, an instance of the PhotosOrder class will be created. The properties and methods from this class will be used to calculate the cost and display the properties.
- Students are welcome to create all of the files themselves or to download the templates and use those as starter files
JS6eAssignmentFiles_Chapter07Objects.zip
Screen shot of the starter file
- There are three files objects.hml, objects.css, and objects.js which will be incorporated into the website in the same manner as was done in Chapters 5 and 6.
- Make a copy of forms.html and name it objects.htm/l. Replace the contents of the main area with the contents from objects.htm/l. Also add the code to link objects.css and objects.js
- The CSS file should be usable as is. Other than comments, probably no other modifications are needed unless you choose to do so.
- Select two images of your choosing for the photo gallery. The size should be approximately 250w x 175h. If the size varies the height and width properties will need to be modified. Do not make the images much larger than that. In in the gallery code change the references and corresponding alt tags reflect the content of your new images (replace imageOne and imageTwo with meaningful names)
Need to find images?
Use your personal images of use the Library's resources. https://librarynt.occc.edu/login?url=http://quest.eb.com
If an MLA citation is required include it at the bottom of the main content area. These images can be used for educational purposes only and may not continued to be used outside that realm.
Need to resize images?
Photoshop and similar products may be used to resize images. If you do not have access to photo editing software, PicMonkey http://www.picmonkey.com/ is one that I have used when creating online photobooks. At the time of this writing you do not need to sign up for or purchase Royale. If you MouseOver/Click Edit at the top of the screen and you should have access to the necessary tools
- At this point in the course, we have not covered how to pass data from one form to another so we will have to be a little creative. There will only be one form, no processor form as in the last assignment. Document.write will be used to display the completed order.
- Form validation will be a different technique than was used in the previous chapter. There are red inline error messages which are visible/hidden depending on the circumstances. This method was introduced in Chapter 6's sample code. it might be helpful to review it at this time. JS6eClassSampleCode_Chapter06.zip
- Process
- Create Event Listeners such that when the Place Order (AKA Submit) button is clicked, the code will validate the user's entries. If they validate, instead of returning true, call the GetValues() function followed by the DisplayOutput() function.
- In the objects.js file, add the code needed as described in the comments. This includes event listeners, validation, on creating/implementing a class.
- Create a PortraitOrder class using the following specifications
- Properties: portrait, copies, size, buyer
- Method: CalculateCost () -- determines the price by size (radio buttons) and then multiplies this price by the number of copies
- Create a new instance of the class named portraits as a global variable in the ,js file
- Create a GetValues() function that will
- retrieve the values from the form fields (document.forms[0].element.value) and assign them the properties of the instance of the PortraitOrder class.
- use a for loop to retrieve the value from the radio buttons
- use the prototype property to add a new property named email to the instance of the class
- retrieve the value from the form field and assign it to the new email property
- Create a DisplayOutput() function that
- calls the CalculateCost () method for the current instance of the class.
- displays the image using the value from the portrait property which contains the filename. Be sure to include height and width (and that would be why all of the images had to be the same dimension. These values can be hard-coded. The filename, however, may NOT be hard coded.. it must use the object.property format.
- displays the buyer, email, copies, size, and cost using the object.property format (document.forms[0].element.value is not permitted)
- The cost must be formatted as ##.## where # represents a number (Hint: Use a method of the Number class). It is NOT okay just to concatenate .00 to then end of the cost.
- The order form must include the site's header and footer and coordinate with the rest of the site.
- There is no form processing file, everything is done in the .js file.