代写一个简单的JavaScript单页网站。
Purpose
The purpose of this assignment is to make use of Javascript for some common
functions on a web page.
Often in web applications, there are forms with automatically update fields
when changes occur, similar to when cells with formulas in Excel automatically
update when cells used in their calculation change.
Problem Description
Mimic “Checkout” (see past in-class example). Also see past example of
‘change’ event on a dropdown/select box. You can set variables, e.g. var
tuition = 7390; and use those in your calculations.
You’ll want to list Tuition, Technology Fee, and Athletic & Health Services
Fee. You’ll need to include a drop-down select box on the page where the user
can select “Full-Year” or “Per Semester”.
Assume that the current date/time is September 1st, and that a student is a
Nova Scotia Resident.
If a user selects “Full time”, according to the calendar of fees, half tuition
is due in September + both fees, with the second half of tuition due in
January. If a user selects “Per Semester”, their tuition and fees will all be
due in September (with $0 due in January).
On this page that you’ve created, at the bottom, you should have two totals
one for the amount due in September, the other for the amount due in January.
When the page loads, the select box should default to “Full Year”, and the
calculation should be made (e.g. use the ‘ready’ event when the page loads to
call a function). Also, if the user changes the select box (from full year to
per semester and vice versa, this change should also trigger a new calculation
(e.g. use the ‘change’ event on the Select element, to get notified when the
user changes the selection, where you can call the function again to make the
calculation). You’ll want to refer to Acadia’s Visual Identity and Style
Guides, etc., for any logos and colors that you plan to use on the page.
General Requirements
- The website will consist of one HTML page.
- All styling information must be in one stylesheet file, linked to as an external stylesheet.
- Use Bootstrap to lay out the website.
- The HTML Code must validate with no errors using the W3C Validator.
- The CSS Code must validate with no errors using the W3C CSS Validator.
- HTML Tags must all be used appropriately. For example, consider the use of bold vs. strong, italics vs. emphasis, and appropriate levels of heading.
- Use styling features that you know to help make the pages clearly readable, and to make the footer distinct from the main content area. Other than colour content within any images or by Bootstrap itself, use at most 3 colours other than black and white.
- Content should be formatted sufficiently for being easily read and skimmed.
- Spelling and grammar must be correct.
Advice
- Tackle one thing at a time. First, get the page looking the way you want, then get the totals all displaying $0 originally. Then choose one fee to make work (e.g. Technology Fee), and make that fee’s selection and calculation work. Then move on to a next one.
- You can implement this in a variety of ways. You certainly need an event handler for when the page loads, and one for when the dropdown selection changes (‘full time’, ‘per semester’). You can probably make one big event handler for when any option is changed by the student.
Bonus
Implement the following additional features in the tuition calculator:
- You can get fancy and add in other fees or situations (e.g. Canadian Students and International Students), residence and/or meal plans, etc.
