ITEC 2080 Walden University Wk 5 Art Store Web Development Project Discussion
Assignment: Art Store In this Application, you will demonstrate your proficiency with loops, conditionals, arrays and functions in JavaScript. You will create a new web page which represents a shopping cart with several rows each corresponding to a separate product with specific image, description, quantity, item price and total cost of these items (if several identical items are being ordered). The costs of all items in the shopping cart are being processed then and total order price including tax and shipping is being calculated and displayed on the page. Your goal is to modify the HTML 5 / CSS3 template provided with the JavaScript codes and make the final Shopping Cart page flexible—allowing to display any number of items (as defined in the JavaScript code) and process total order amount for that number of items in the shopping cart. Perform the following steps: Download the template files Unit5Project_template.zip which includes the markup .html file for the finished version of the page (.zip file also included related .css and unfinished .js files you will working on) Preview the Unit5Project-template.html in a browser. It should look like this: You will need to replace static HTML markup in
Unit5Project-template.html with page with JavaScript codes which will
dynamically generate the same markup when the JavaScript coded page is loaded
and processed by a web browser: 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). 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). Within functions.js file, create a function called outputCartRow() that has the following signature: function outputCartRow(file, title, quantity, price, total) () 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 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 code text <script> tag to reference this chapter08-project01.js file within the <body> element. 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 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 as Unit5ProjectFinal.html. Add the created Unit5ProjectFinal.html web page (including images, css, js folders and files in those) to your web project. Add the hyperlink to your index.html page pointing to the Unit5ProjectFinal.hml. Check that when clicking that hyperlink a user will be forwarded to the Unit5ProjectFinal page. Similarly, add the hyperlink to the Unit5ProjectFinal page to allow a user to navigate back to the index.html home page of your website. Test the new page and JavaScript codes thoroughly before publishing it to the web hosting server. Publish your work by uploading the new files to your web host. Test the site anew verifying the access to and proper functioning of Unit5ProjectFinal web page, then copy the URL to your MS Word deliverable document. 1Take the screenshots of the updated index.html web page previewed in the browser with the navigation link to the Unit5ProjectFinal web page, navigate to the Unit5ProjectFinal page, preview it in the browser and take the screenshot. Paste all screenshots into a MS Word document. In the MS Word document include your explanations 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 Unit5ProjectFinal.html page. 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 needs to allow the navigation to the newly created dynamic Unit5ProjectFinal.html. 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. Assignment Art Store Connolly, R., & Hoar, R. (2018). Fundamentals of web development (2nd ed.). New York, NY: Pearson. Chapter 8, “JavaScript 1: Language Fundamentals,” Sections 8.3–8.7, 8.9 JavaScript Code Samples Submit by Day 7 Sunday’s midnight Required ReadingsConnolly, R., & Hoar, R. (2018). Fundamentals of web development (2nd ed.). New York, NY: Pearson. Chapter 8, “JavaScript 1: Language Fundamentals,” Sections 8.1–8.7, 8.9 These Chapter 8 sections explain the basics of the JavaScript language, such as variables and data types, JavaScript conditional and looping statements, arrays, and functions. It also reviews the inline JavaScript, embedded JavaScript, and external JavaScript options and their implementations.Optional ResourcesW3C. (n.d.) A short history of JavaScript, Retrieved Sep 29, 2017 from https://www.w3.org/community/webed/wiki/A_Short_History_of_JavaScriptHTML Goodies. (2018). Java vs. JavaScript: Similarities and differences. Retrieved from http://www.htmlgoodies.com/beyond/javascript/article.php/3470971Electronic Products. (2018). Java vs JavaScript: Differences and similarities. Retrieved from https://www.electronicproducts.com/Programming/Software/Java_vs_JavaScript_differences_and_similarities.aspxMcFarlin, T. (2016, May 17). What’s the difference between Java and JavaScript? Retrieved from https://code.tutsplus.com/tutorials/whats-the-difference-between-java-and-javascript--cms-26194Oracle. (n.d.). The Java EE 6 tutorial. Retrieved June 18, 2018, from http://docs.oracle.com/javaee/6/tutorial/doc/bnaaw.htmlGURU99. (2018). JavaScript tutorial for beginners. Retrieved from https://www.guru99.com/interactive-javascript-tutorials.htmlhttps://javascript.info/