JavaScript辅导COMP2863 How Web Sites Work辅导Java编程

代写一个简单的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 amp; 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.