Use a loop to generate a table of Smart Phone products

NOTE: You should have looked a the JavaScript eval() Function reading before attempting this WOD. If you have not you will not be able to do this WOD!

The goal of the WOD is to use a loop and a generic <section> to eliminate the redundant code for displaying the products. We also wish to generate the product display from the data rather than hard code each section.

Start by copying SmartPhoneProducts1. If you don’t have a working version of SmartPhoneProducts1 you can get a zip file with a copy here. You may also use any of the SmartPhoneProducts1 variants but you may find the spinning images annoying! Rename the folder SmartPhoneProducts2, load the products_display.html page and check that the display is as in SmartPhoneProducts1. You may also use SmartphoneProducts1_1 if you prefer. NOTE If your images do not appear note that The image sources have moved to http://dport96.github.io/ITM352/morea/080.flow-control-II (you may have 090 and now it’s 080)

In products_display.html for add the following variables to the <head> to serve as the product data:

     let name1 = "HTC";
     let price1 = 40.00;
     let image1 = "http://dport96.github.io/ITM352/morea/080.flow-control-II/HTC.jpg";

     let name2 = "Apple";
     let price2 = 75.00;
     let image2 = "http://dport96.github.io/ITM352/morea/080.flow-control-II/iphone-3gs.jpg";

     let name3 = "Nokia";
     let price3 = 35.00;
     let image3 = "http://dport96.github.io/ITM352/morea/080.flow-control-II/Nokia.jpg";

     let name4 = "Samsung";
     let price4 = 45.00;
     let image4 = "http://dport96.github.io/ITM352/morea/080.flow-control-II/Samsung.jpg";

     let name5 = "Blackberry";
     let price5 = 10.00;
     let image5 = "http://dport96.github.io/ITM352/morea/080.flow-control-II/Blackberry.jpg";

Make a copy of the last <section> and paste it underneath. Then convert this duplicate section into string template and use document.write() to output it. Reload the page and verify you get a duplicate section (you should see 6 sections now).
Now use templates (${}) to replace the innerHTML of <h2> with the variable name1, and the same for <p2> using the variable price1, and the src for the <img> use the variable image1. Test that the page still appears as expected. Now above the document.write() add a variable i and initialize it to 1. Use eval() in the templates to generate the variable names using i e.g. eval("name" + i). Check that the page displays as expected. Now change i to 2 and check that the first section is now the same as the second section. Delete the original 5 <sections> (the ones not in the string template). Check that section 2 is the only one displayed.
Now use a for-loop in place of the variable initialization to loop on the document.write() and change i from 1 until eval("typeof name"+i) != 'undefined'. Check that the page now displays as it originally did.

You can view the screencast solution here if you get stuck.

Rx: <14 min Av: 14-20 min Sd: 25-30 min DNF: 30+ min

Use a loop to generate a table of Smart Phone products

If you did SmartPhoneProducts1 with Variables make a copy of this, rename it SmartPhoneProducts2 and skip to step 3