Javascript and HTML

I'm working on a javascript exercise and need an explanation and answer to help me learn.

The intent of this assignment is to demonstrate your ability to use JavaScript in several of the most common uses found on the web. Specifically, you will demonstrate your proficiency with loops, conditionals, arrays, and functions in JavaScript, as well as demonstrate your ability to respond to events, select and modify elements via the DOM, and to validate form data.

The grade for this assignment will be broken down as follows:

• Functional Requirements (85/100)
• Non-functional requirements (15/100)

Non-Functional Requirements

• You must submit valid and semantically appropriate HTML5.
• You have been provided with the two HTML files (BasicJavaScript.html and DOMJS.html) that includes the markup for the finished versions. Download and preview the files in a browser.
• All pages in your site must contain a comment with your name, section, and date

Functional Requirements: Basic JavaScript Hands on Practice

Demonstrate your proficiency with loops, conditionals, arrays, and functions in JavaScript. The final product should look similar to that shown below.

• Complete the assignment as directed below and within the image.
• Test the page in the browser. Verify that the calculations work appropriately by changing the values in the data.js file.

1. You have been Provided with the HTML file BasicJavaScript.html that includes the markup for the finished version. Preview the file in a browser.
2. Examine the data file data.js. It contains 4 arrays that we are going to use to programmatically generate the data rows (and replace the hard-coded values supplied in the HTML file).
3. Open the JavaScript file functions.js and create a function called calculateTotal () that is passed a quantity and price and returns their product (i.e., multiply the two parameter values and return the result).
4. Within functions.js, create a function called outputCartRow () that has the following signature: function outputCartRow(file, title, quantity, price total) {}
5. Implement the body of this function. It should use document.write () calls to display a row of the table using the passed data, Use the toFixed () method of number variables to display two decimal places.
6. Replace the three cart table rows in the original markup with a JavaScript Loop that repeatedly calls outputCartRow () function. Put this loop within the BasicJavaScript.js file. Add the appropriate <script> tag to reference this BasicJavaScript.js file within the <tbody> element.
7. Calculate the subtotal, tax, shipping, and grand total using JavaScript calculations. Use 10% as the tax amount. The shipping amount should be $40 unless the subtotal is above $1000, in which case it will be $0.

Test

• Test the page in the browser. Verify that the calculations work appropriately by changing the values in the data.js file.

Functional Requirements: DOM JavaScript Hands on Practice

• Complete the assignment as directed below.

1. You have been provided with the html file domjs,html that represents the data entry form shown below. Examine this file in your browser.
2. You will notice that some of the form elements have the CSS class hilightable specified in their class attribute. Add listeners to the focus and blur events of all elements that have this hilightable class. In your event handlers for these two events, simply toggle the class highlight (which is in the provided CSS file). This will change their styling of the current form element. Be sure to setup these listeners after the page has loaded.
3. You will notice that some of the form elements have the CSS class required specified in their class attribute. We will not submit the form if these elements are empty. Add an event handler for the submit event of the form. In this handler, if any of the required form elements are empty, add the CSS class error to any of the empty elements. As well, cancel the submission of the form (hint: use the preventDefault () method).
4. Add the Appropriate handler for these required controls that will remove the CSS class error that have changed content.

• Test the form in the browser. Verify the highlighting functionality works by tabbing from field to field. Try submitting the form with blank fields to verify the error formatting works. Verify the error formatting is removed if you add content and then resubmit.

In your Azure Web app resource, create 2 new folders named Website_5 and Website 6. Upload your completed BasicJavaScript website files (all html, css, images, JavaScript etc) to the website_5 folder.

Upload your completed DOMJS website files (all html, css, images, JavaScript etc) to the website_6 folder.

Post the URLs for your functioning websites to the Assignment JavaScript dropbox,

• Java Script Loop /8
• Calls to Function /8
• Function: single cart row /8
• function: calculate /8
• Required fields (3) /9
• Hilightable fields (7) /14
• handlers (2 – focus/blur) /6
• submission error (3) /15
• Submit handler /9

• Comments /5
• Submission /10