Fill This Form To Receive Instant Help

Help in Homework
trustpilot ratings
google ratings


Homework answers / question archive / In this Assignment, you will create a new webpage that represents a shopping cart

In this Assignment, you will create a new webpage that represents a shopping cart

Computer Science

In this Assignment, you will create a new webpage that represents a shopping cart. The user will select the items to be included in the customer’s shopping cart. The costs of all selected items will be processed and the total order price, including tax and shipping, will be calculated and displayed on the page. You will work with the HTML5/CSS3 template provided.

To prepare for this Assignment:

Review the assignment resources included in the Explore section.

Perform the following steps:

1. Download the template files Week5Project_template.zip, which include the markup .html file for the finished version of the page. (The .zip file also includes the related .css and unfinished .js files you will working on.)

2. Preview the Week5Project-template.html in a browser. It should look like this:

3. You will need to replace the static HTML markup in Week5Project-template.html with JavaScript codes, which will dynamically generate the same markup when the JavaScript–coded page is loaded and processed by a web browser:

4. Examine the data in the data.js. It contains four arrays that you will be using to programmatically generate the data rows (and replace the hard-coded markup supplied in the HTML file).

5. Open 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 a result).

6. Within functions.js file, create a function called outputCartRow() that has the following signature:

function outputCartRow(file, title, quantity, price, total) ()

7. Implement the body of the function. It should use the document.write() calls to display a row of the table using the passed data. Use tofixed() method of the number of variables to display two decimal places.

8. Replace the three cart table rows in the original markup with a JavaScript loop that repeatedly calls the outputCartRow() function. Put the loop within the chapter08-project01.js file. Add an appropriate <script> tag to reference this chapter08-project01.js file within the <body> element.

9. Calculate the subtotal, tax, shipping, and grand total using JavaScript. Replace the hard-coded values in the markup with your JavaScript calculations. Use 10% as the tax rate amount. The shipping amount should be $40 unless the subtotal is above $1,000, in which case it should be $0.

10. Test the final page in the browser. Verify that the calculations work appropriately by changing the values in the data.js file. Rename the .html file Week5ProjectFinal.html.

11. Add the created Week5ProjectFinal.html webpage (including images, css, js folders and files in those) to your web project.

12. Add the hyperlink to your index.html page pointing to the Week5ProjectFinal.hml. Check that when clicking that hyperlink a user will be forwarded to the Week5ProjectFinal page. Similarly, add the hyperlink to the Week5ProjectFinal page to allow a user to navigate back to the index.html home page of your website.

13. Test the new page and JavaScript codes thoroughly before publishing it to the web hosting server.

14. Publish your work by uploading the new files to your web host. Test the site again, verifying the access to and proper functioning of the Week5ProjectFinal webpage, then copy the URL to your MS Word deliverable document.

15. Take the screenshots of the updated index.html webpage previewed in the browser with the navigation link to the Week5ProjectFinal webpage, navigate to the Week5ProjectFinal page, preview it in the browser and take the screenshot. Paste all screenshots into an MS Word document. In the MS Word document, include your explanations about the functionality of JavaScript codes added, paste the JavaScript codes for the functions you have created and the codes how those functions were called in the HTML markup of the Week5ProjectFinal.html page.

16. Finally, include the valid URL to the location of your updated website index.html home page on the web hosting server. Do not forget that index.html page of your previous week site needs to allow the navigation to the newly created dynamic Week5ProjectFinal.html. Your complete website at this point is to be uploaded to the Week 5 bucket on the AWS S3 web hosting server. Zip all your website files and folders into a single .zip file, including the MS Word document and submit the .zip file as your deliverable.

17. Compile all your website files into a single .zip file, including the MS Word document, and submit the .zip file as your deliverable. Name the .zip file WK5Assgn+last name+first initial.zip.

Option 1

Low Cost Option
Download this past answer in few clicks

15.89 USD

PURCHASE SOLUTION

Already member?


Option 2

Custom new solution created by our subject matter experts

GET A QUOTE