JavaScript (Simple) Framework Homework Overview In this homework you will implement provider code (a function in an external JS file) that can produce a click sortable HTML table from any JSON string that contains an array of simple objects (see JSON string example below left) Click sortable means that whenever the user clicks on a column heading the HTML table sorts by the data in that column You'll type in two different JSON files (like below left) In NetBeans you can right click on a folder and do a File New JSON file NetBeans will help by identifying syntax errors if you make any You will then create a tester driver (consumer code) HTML page that uses your provider code to create two click sortable tables from the two different JSON files (that you typed in yourself) Example JSON File (that you would type in) Example HTML table created by provider code cars json x Image Make Condition Price make AudS image pics audi png condition fair , price 21000 Audi fair $21,000 00 make Disney image pics pixar png Disney condition superb price $0000 10 $50,000 00 12 14 15 16 17 18 19 20 21 make Buick image pics buick png condition great price 15000 Buick great $15,000 00 make Ford image pics ford png condition poor , price 5000 23 24 25 26 Ford poor $5,000 00 Requirements for MakeTable (provider code, function in external JS file) In an external JavaScript file, you shall have a single function named MakeTable that creates and returns a click sortable HTML table You will clearly need other functions such as sorting and formatting currency, so how do you manage this Place needed private functions inside of MakeTable and use them freely within MakeTable The input parameters of MakeTable shall include the id of a div inside of which you are to place the click sortable HTML table, and the name of a JSON file that holds the data to be placed inside of the HTML table o o Here is an example of how MakeTable might be called from the HTML page reads from the json file, creating a click sortable HTML table inside of the DOM object with id firstDiv var table1 MakeTable( firstDiv , jsonationalParks json ) reads from the json file, creating a click sortable HTML table inside of the DOM object with id secondDiv var table2 MakeTable( secondDiv , json airplanes json ) MakeTable shall get the column heading names from the field names within the JSON file Here is some sample code that shows how you can iterate over all the properties in an object ar list JSON parse(httpRequest responseText) var obj list 0) get the 1st object in the array (maybe add some code to be sure you have at least one object) for (var prop in obj) prop iterates through the properties that are in the object obj even though prop is a character string (field name), you can use it as if it were an index value inside of square brackets and it returns the value of the property This is called associative array notation (when you use a property name as if it were an index value) 1 console log('property is' propand its value is'objlpropl) MakeTable has to understand the data type of each field of the objects in the JSON string Field types that shall be handled by MakeTable include String (left justified, the value shown is the same value used for sort order) Image file (aligned center, data showing in the HTML table as the src attribute of an image tag, these columns are not click sortable) Dollar Amount (right justified, formatted like currency see sample code, numeric value used for sort order, for example 2 comes before 10 in numeric sort order but 2 does not come before 10 in character sort order You can implement more data types if you like, but the above 3 are required You might want your MakeTable function to accept a third parameter (array) that indicates the types of the JSON fields within the object array For example, s might mean string (left justify, sort as is), i might mean image (center, do not sort), $ might mean dollar amount( right justify, format as currency, sort numerically), etc Example For my cars JSON file, the array would show 1st field of each object is string, 2nd image, 3rd string, 4th field dollar amt var table1 MakeTable( firstDiv , json cars json , s , i , s , $ ) Or (instead of passing in an array of type indicators), you might just iterate over the fields of the first object to try to figure out the data type of each field To iterate over the properties of the first object in the array, you could use code as previously shown var list JSON parse(httpRequest responseText) var obj list O get the 1st object in the array (maybe add some code to be sure you have at least one object) for (var prop in obj) I prop iterates through the properties that are in the object obj console logl'property is' propand its value is' objlpropl Here is some code that you might find helpful in determining if a string contains something that could be converted to a number or not You can use JS built in function isNan() (stands for Is Not a Number) which returns true if a string contains something that cannot be converted to a number Example converting to Number var s 123 f (isNaN(s)) true means string cannot be converted to a number so just return the string as it came in false means string can be converted to a number return s else return Number(s) returns 123 (a number) Number is also a built in JS function you can use To figure out if a field is the name of an image file, you can just look for the common file name extensions as part of the string, e g , look for jpg or png or gif Just google something like in javaScript how to see if a string contains another string This might seem a bit silly, but in an attempt to give you some exposure to data persistence, but each time the clicksortable HTML table is sorted, the sort order shall be stored in local storage (this shall be handled in MakeTable js) Whenever the page is refreshed, the two tables should be displayed in the most recent same sort order (this also shall be handled in MakeTable js) Since you can assume that the ids passed into the MakeTable function are unique within the page, you can use these as ids as the unique identifiers for storing key value pair into local storage Here's how to test if you got this right refresh your page and note the sort order of both HTML tables Change the sort on your first table, change the sort on your second table Then refresh the page the sort order of both tables should stick and not revert to the original sort order The object returned by MakeTable shall have at least one public method that the HTML coder can invoke It's OK if this method has something to do with styling SON Files You'll type in two (syntactically correct) JSON files, each containing an array of like objects Each JSON file shall have at least one image (references images you have saved), at least one string, and at least one dollar amount type field Styling Create an external style sheet that your MakeTable code can rely upon to make the generated HTML table look good Avoid hard coding styling in MakeTable js wherever possible You can require the HTML coder to include a reference to this external style sheet This is the default styling they get it they do not want to change any ot the style Then if the HTML coder wishes, they are free to follow the external style sheet link with their own internal style sheet that overrides a few of your style settings if they make things look bad, it's their fault and they should back out that change and keep what you had Remember to limit the scope of your styling For example, instead of having styles like these table td Have styles like these and require the HTML coder to style the divs that will hold the click sortable tables as class clickSort clickSort table styles any table that is inside of a DOM element classed clickSort clickSort td In your JavaScript code, you can add a classname like this var element document createElement( td element classList add( numeric ) And then provide styling for that class in the external style sheet clickSort numeric text align right Index html index html shall have at least two divs that get HTML tables inserted inside with code like previously shown var table1 MakeTable( firstDiv , jsonationalParks json ) var table2 MakeTable( secondDiv , json airplanes json ) index html shall invoke a public method of at least one of the returned table objects (e g , table1 or table2 above Demonstrate the concept that the framework should make things easy by providing a nice looking default format, but the HTML coder can override it Have one of the click sortable tables accept the default styling provided by the external style sheet, and the other table have a few style rules overwritten by an internal style sheet Other Requirements use strict The first line of your JavaScript code (both in the tag in the HTML page as well as in the external JS file) shall have the use strict directive as its first line of code (see below) In this way, you won't be able inadvertently declare a new variable by misspelling a variable name 1 use strict 2 Project Organization Your code for this week shall go inside of a folder named 05 is fw (under web pages ) The code for this week will include a JSON folder that includes the two JSON files that you typed in Pick any topics you like but its better if it is related to your overall web site theme The two JSON files should not be overly similar to each other The image fields in the JSON must point to image files that you have selected and saved folders of images (named appropriately) to hold the images (as referenced by your JSON files) These are images you found from the internet and stored in image file under 500K so that your page does not load slowly You can set a filter for small or medium sized images when you search google images or you can edit the images in a program like MSPaint or paint net For this homework, the images do not need to all have the same aspect ratio You can style them all the same width and not care about the variations in heights of the various rows of data o your project Keep the size of each o Your provider code stored in an external JS file named MakeTable js (following our naming convention that each JS file is named the same as the single function defined within), an external style sheet (e g , clickSort css) this is provider code too (goes with MakeTable js), consumer (tester driver) code in index html This is the file that invokes MakeTable twice, once for each of the two click sortable HTML tables to be created on the page Web Pages carPics MakeTable js dickSort css index html 06 db 07 webAPIs WEB INF htmlPartials icons pics s style tutorial 3 Blog For each lab, you will add a blog to your blog content HTML partial and this lab is no exception In your blog, link to the work you did in this homework( O5 js fw index html ) and describe your experience doing this lab What aspects were easy Which were hard What were the most important things you learned in this lab 4 Navigation From 05 js fw index html provide a Back link that goes up one folder to your main index page a href index html Back 5 Originality Generally speaking, for homework, you must come up with something original For this assignment (because it is so specific as to what it is looking for), there may be similarity between student submissions However, if you have not done your own work, your test grade will reflect that So, please be sure to do your own work and learn from this exercise 6 Look and Feel Your page may have the same look and feel as your home page or it may have a different layout, but to get full credit, you have to create a page that is professional and visually appealing You have had two design labs so you should be in a position to come up with something that looks good 7 Good Programming Style At the top of the 3344 labs page, there is an entry entitled Requirements For All Homework and Project Make sure you adhere to the good programming and design practices listed in there This section has a list of requirements that I do not repeat in each lab assignment Grading and Submission After completing all the requirements, test locally (and syntax check) Don't forget to add the blog entry to your labs page and provide a link to the page you created this week Then publish, then test what you published Then submit into blackboard a zip file of your whole web site (including all the work you have done in all the labs so far) Make sure to include all the necessary files and folders in your zip file 1 2 Sample Deductions 9 if no zip file submitted into Canvas9 if page not published by the due date Up to 2 for no blog in the blog content area If we cannot find your work (you didn't link to it and you didn't name it exactly as requested), it's 9 as if it were not published o 0 5 if there is no link from the blog content back up to the main index html page 7 if only one click sortable HTML table is demonstrated by index html We need to see two HTML tables, each working independently to be sure your code is structured properly Up to 2 if columns not aligned properly in MakeTable js (numbers dollar amounts aligned right, strings aligned left, images aligned center) and or dollar amounts not formatted Up to 3 for violating the dependency injection principle (e g , code in MakeTable js makes an assumption about something in index html, something that was not passed to MakeTable as an input parameter) 3 if the two HTML tables do not have click sortable column headings 1 5 if numbers are not sorted numerically 2 if the sort orders of the two tables do not persist upon page refresh (using local storage) Up to 2 if the object returned by MakeTable does not have a public method and or the HTML page does not invoke this public method on at least one of the click sortable HTML table objects 2 if MakeTable js has more than 1 globally defined function or object (should just define function MakeTable) 1 if you didn't have one HTML table with the default styling (as provided by your external style sheet) and the other HTML table with some different styling provided by the HTML coder Up to 1 if too much styling is done by JS code in MakeTable js (instead of doing it in the external style sheet) Up to 2 for poor layout professionalism Up to 2 if your page loads too slowly, if you have selected images that are way larger than suggested Up to 2 for HTML CSS syntax errors which show in red font from Firefox View Source Up to 2 for poor coding style Code should be neat, properly indented, well named, and no unused code 6 JavaScript (Simple) Framework Homework Overview In this homework you will implement provider code (a function in an external JS file) that can produce a click sortable HTML table from any JSON string that contains an array of simple objects (see JSON string example below left) Click sortable means that whenever the user clicks on a column heading the HTML table sorts by the data in that column You'll type in two different JSON files (like below left) In NetBeans you can right click on a folder and do a File New JSON file NetBeans will help by identifying syntax errors if you make any You will then create a tester driver (consumer code) HTML page that uses your provider code to create two click sortable tables from the two different JSON files (that you typed in yourself) Example JSON File (that you would type in) Example HTML table created by provider code cars json x Image Make Condition Price make AudS image pics audi png condition fair , price 21000 Audi fair $21,000 00 make Disney image pics pixar png Disney condition superb price $0000 10 $50,000 00 12 14 15 16 17 18 19 20 21 make Buick image pics buick png condition great price 15000 Buick great $15,000 00 make Ford image pics ford png condition poor , price 5000 23 24 25 26 Ford poor $5,000 00 Requirements for MakeTable (provider code, function in external JS file) In an external JavaScript file, you shall have a single function named MakeTable that creates and returns a click sortable HTML table You will clearly need other functions such as sorting and formatting currency, so how do you manage this Place needed private functions inside of MakeTable and use them freely within MakeTable The input parameters of MakeTable shall include the id of a div inside of which you are to place the click sortable HTML table, and the name of a JSON file that holds the data to be placed inside of the HTML table o o Here is an example of how MakeTable might be called from the HTML page reads from the json file, creating a click sortable HTML table inside of the DOM object with id firstDiv var table1 MakeTable( firstDiv , jsonationalParks json ) reads from the json file, creating a click sortable HTML table inside of the DOM object with id secondDiv var table2 MakeTable( secondDiv , json airplanes json ) MakeTable shall get the column heading names from the field names within the JSON file Here is some sample code that shows how you can iterate over all the properties in an object ar list JSON parse(httpRequest responseText) var obj list 0) get the 1st object in the array (maybe add some code to be sure you have at least one object) for (var prop in obj) prop iterates through the properties that are in the object obj even though prop is a character string (field name), you can use it as if it were an index value inside of square brackets and it returns the value of the property This is called associative array notation (when you use a property name as if it were an index value) 1 console log('property is' propand its value is'objlpropl) MakeTable has to understand the data type of each field of the objects in the JSON string Field types that shall be handled by MakeTable include String (left justified, the value shown is the same value used for sort order) Image file (aligned center, data showing in the HTML table as the src attribute of an image tag, these columns are not click sortable) Dollar Amount (right justified, formatted like currency see sample code, numeric value used for sort order, for example 2 comes before 10 in numeric sort order but 2 does not come before 10 in character sort order You can implement more data types if you like, but the above 3 are required You might want your MakeTable function to accept a third parameter (array) that indicates the types of the JSON fields within the object array For example, s might mean string (left justify, sort as is), i might mean image (center, do not sort), $ might mean dollar amount( right justify, format as currency, sort numerically), etc Example For my cars JSON file, the array would show 1st field of each object is string, 2nd image, 3rd string, 4th field dollar amt var table1 MakeTable( firstDiv , json cars json , s , i , s , $ ) Or (instead of passing in an array of type indicators), you might just iterate over the fields of the first object to try to figure out the data type of each field To iterate over the properties of the first object in the array, you could use code as previously shown var list JSON parse(httpRequest responseText) var obj list O get the 1st object in the array (maybe add some code to be sure you have at least one object) for (var prop in obj) I prop iterates through the properties that are in the object obj console logl'property is' propand its value is' objlpropl Here is some code that you might find helpful in determining if a string contains something that could be converted to a number or not You can use JS built in function isNan() (stands for Is Not a Number) which returns true if a string contains something that cannot be converted to a number Example converting to Number var s 123 f (isNaN(s)) true means string cannot be converted to a number so just return the string as it came in false means string can be converted to a number return s else return Number(s) returns 123 (a number) Number is also a built in JS function you can use To figure out if a field is the name of an image file, you can just look for the common file name extensions as part of the string, e g , look for jpg or png or gif Just google something like in javaScript how to see if a string contains another string This might seem a bit silly, but in an attempt to give you some exposure to data persistence, but each time the clicksortable HTML table is sorted, the sort order shall be stored in local storage (this shall be handled in MakeTable js) Whenever the page is refreshed, the two tables should be displayed in the most recent same sort order (this also shall be handled in MakeTable js) Since you can assume that the ids passed into the MakeTable function are unique within the page, you can use these as ids as the unique identifiers for storing key value pair into local storage Here's how to test if you got this right refresh your page and note the sort order of both HTML tables Change the sort on your first table, change the sort on your second table Then refresh the page the sort order of both tables should stick and not revert to the original sort order The object returned by MakeTable shall have at least one public method that the HTML coder can invoke It's OK if this method has something to do with styling SON Files You'll type in two (syntactically correct) JSON files, each containing an array of like objects Each JSON file shall have at least one image (references images you have saved), at least one string, and at least one dollar amount type field Styling Create an external style sheet that your MakeTable code can rely upon to make the generated HTML table look good Avoid hard coding styling in MakeTable js wherever possible You can require the HTML coder to include a reference to this external style sheet This is the default styling they get it they do not want to change any ot the style Then if the HTML coder wishes, they are free to follow the external style sheet link with their own internal style sheet that overrides a few of your style settings if they make things look bad, it's their fault and they should back out that change and keep what you had Remember to limit the scope of your styling For example, instead of having styles like these table td Have styles like these and require the HTML coder to style the divs that will hold the click sortable tables as class clickSort clickSort table styles any table that is inside of a DOM element classed clickSort clickSort td In your JavaScript code, you can add a classname like this var element document createElement( td element classList add( numeric ) And then provide styling for that class in the external style sheet clickSort numeric text align right Index html index html shall have at least two divs that get HTML tables inserted inside with code like previously shown var table1 MakeTable( firstDiv , jsonationalParks json ) var table2 MakeTable( secondDiv , json airplanes json ) index html shall invoke a public method of at least one of the returned table objects (e g , table1 or table2 above Demonstrate the concept that the framework should make things easy by providing a nice looking default format, but the HTML coder can override it Have one of the click sortable tables accept the default styling provided by the external style sheet, and the other table have a few style rules overwritten by an internal style sheet Other Requirements use strict The first line of your JavaScript code (both in the tag in the HTML page as well as in the external JS file) shall have the use strict directive as its first line of code (see below) In this way, you won't be able inadvertently declare a new variable by misspelling a variable name 1 use strict 2 Project Organization Your code for this week shall go inside of a folder named 05 is fw (under web pages ) The code for this week will include a JSON folder that includes the two JSON files that you typed in Pick any topics you like but its better if it is related to your overall web site theme The two JSON files should not be overly similar to each other The image fields in the JSON must point to image files that you have selected and saved folders of images (named appropriately) to hold the images (as referenced by your JSON files) These are images you found from the internet and stored in image file under 500K so that your page does not load slowly You can set a filter for small or medium sized images when you search google images or you can edit the images in a program like MSPaint or paint net For this homework, the images do not need to all have the same aspect ratio You can style them all the same width and not care about the variations in heights of the various rows of data o your project Keep the size of each o Your provider code stored in an external JS file named MakeTable js (following our naming convention that each JS file is named the same as the single function defined within), an external style sheet (e g , clickSort css) this is provider code too (goes with MakeTable js), consumer (tester driver) code in index html This is the file that invokes MakeTable twice, once for each of the two click sortable HTML tables to be created on the page Web Pages carPics MakeTable js dickSort css index html 06 db 07 webAPIs WEB INF htmlPartials icons pics s style tutorial 3 Blog For each lab, you will add a blog to your blog content HTML partial and this lab is no exception In your blog, link to the work you did in this homework( O5 js fw index html ) and describe your experience doing this lab What aspects were easy Which were hard What were the most important things you learned in this lab 4 Navigation From 05 js fw index html provide a Back link that goes up one folder to your main index page a href index html Back 5 Originality Generally speaking, for homework, you must come up with something original For this assignment (because it is so specific as to what it is looking for), there may be similarity between student submissions However, if you have not done your own work, your test grade will reflect that So, please be sure to do your own work and learn from this exercise 6 Look and Feel Your page may have the same look and feel as your home page or it may have a different layout, but to get full credit, you have to create a page that is professional and visually appealing You have had two design labs so you should be in a position to come up with something that looks good 7 Good Programming Style At the top of the 3344 labs page, there is an entry entitled Requirements For All Homework and Project Make sure you adhere to the good programming and design practices listed in there This section has a list of requirements that I do not repeat in each lab assignment Grading and Submission After completing all the requirements, test locally (and syntax check) Don't forget to add the blog entry to your labs page and provide a link to the page you created this week Then publish, then test what you published Then submit into blackboard a zip file of your whole web site (including all the work you have done in all the labs so far) Make sure to include all the necessary files and folders in your zip file 1 2 Sample Deductions 9 if no zip file submitted into Canvas9 if page not published by the due date Up to 2 for no blog in the blog content area If we cannot find your work (you didn't link to it and you didn't name it exactly as requested), it's 9 as if it were not published o 0 5 if there is no link from the blog content back up to the main index html page 7 if only one click sortable HTML table is demonstrated by index html We need to see two HTML tables, each working independently to be sure your code is structured properly Up to 2 if columns not aligned properly in MakeTable js (numbers dollar amounts aligned right, strings aligned left, images aligned center) and or dollar amounts not formatted Up to 3 for violating the dependency injection principle (e g , code in MakeTable js makes an assumption about something in index html, something that was not passed to MakeTable as an input parameter) 3 if the two HTML tables do not have click sortable column headings 1 5 if numbers are not sorted numerically 2 if the sort orders of the two tables do not persist upon page refresh (using local storage) Up to 2 if the object returned by MakeTable does not have a public method and or the HTML page does not invoke this public method on at least one of the click sortable HTML table objects 2 if MakeTable js has more than 1 globally defined function or object (should just define function MakeTable) 1 if you didn't have one HTML table with the default styling (as provided by your external style sheet) and the other HTML table with some different styling provided by the HTML coder Up to 1 if too much styling is done by JS code in MakeTable js (instead of doing it in the external style sheet) Up to 2 for poor layout professionalism Up to 2 if your page loads too slowly, if you have selected images that are way larger than suggested Up to 2 for HTML CSS syntax errors which show in red font from Firefox View Source Up to 2 for poor coding style Code should be neat, properly indented, well named, and no unused code 6

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 04, 2024

JavaScript (Simple) Framework Homework Overview: In this homework you will implement provider code (a function in an external JS file) that can produce a click

image text in transcribed

JavaScript (Simple) Framework Homework Overview: In this homework you will implement provider code (a function in an external JS file) that can produce a click sortable HTML table from any JSON string that contains an array of simple objects (see JSON string example below left) "Click sortable" means that whenever the user clicks on a column heading the HTML table sorts by the data in that column. You'll type in two different JSON files (like below left). In NetBeans you can right click on a folder and do a File New-JSON file. NetBeans will help by identifying syntax errors if you make any You will then create a tester/driver (consumer code) HTML page that uses your provider code to create two click sortable tables from the two different JSON files (that you typed in yourself). Example JSON File (that you would type in) Example HTML table created by provider code cars.json x Image Make Condition Price make":AudS" image":"pics/audi png" condition": fair", price" :21000 Audi fair $21,000.00 make":"Disney" image": "pics/pixar png Disney condition": "superb" price" $0000 10 $50,000.00 12 14 15 16 17 18 19 20 21 make": "Buick" image": "pics/buick-png" condition": "great" price":15000 Buick great $15,000.00 make"Ford" image": "pics/ford.png" condition": "poor", price":"5000 23 24 25 26 Ford poor $5,000.00 Requirements for MakeTable (provider code, function in external JS file) In an external JavaScript file, you shall have a single function named MakeTable that creates and returns a click sortable HTML table. You will clearly need other functions such as sorting and formatting currency, so how do you manage this? Place needed private functions inside of MakeTable and use them freely within MakeTable The input parameters of MakeTable shall include: the id of a div inside of which you are to place the click sortable HTML table, and the name of a JSON file that holds the data to be placed inside of the HTML table o o Here is an example of how MakeTable might be called from the HTML page // reads from the json file, creating a click sortable HTML table inside of the DOM object with id "firstDiv var table1 MakeTable("firstDiv", "jsonationalParks.json"); // reads from the json file, creating a click sortable HTML table inside of the DOM object with id = secondDiv" var table2 MakeTable("secondDiv", "json/airplanes.json") MakeTable shall get the column heading names from the field names within the JSON file. Here is some sample code that shows how you can iterate over all the properties in an object. ar list JSON.parse(httpRequest.responseText); var obj list[0)://get the 1st object in the array (maybe add some code to be sure you have at least one object) for (var prop in obj) //"prop" iterates through the properties that are in the object obj even though "prop" is a character string (field name), you can use it as if it were an index value inside of square brackets and it returns the value of the property. This is called "associative array notation" (when you use a property name as if it were an index value). 1 console.log('property is'+propand its value is'objlpropl): MakeTable has to understand the data type of each field of the objects in the JSON string. Field types that shall be handled by MakeTable include: String (left justified, the value shown is the same value used for sort order) Image file (aligned center, data showing in the HTML table as the src attribute of an image tag, these columns are not click sortable) Dollar Amount (right justified, formatted like currency-see sample code, numeric value used for sort order, for example 2 comes before 10 in numeric sort order but "2" does not come before "10 in character sort order You can implement more data types if you like, but the above 3 are required. You might want your MakeTable function to accept a third parameter (array) that indicates the types of the JSON fields within the object array. For example, "s" might mean string (left justify, sort as is), "i" might mean image (center, do not sort), "$" might mean dollar amount( right justify, format as currency, sort numerically), etc. Example // For my cars JSON file, the array would show 1st field of each object is string, 2nd image, 3rd string,& 4th field dollar amt var table1 MakeTable("firstDiv", "json/cars.json", ["s","i", "s", "$"]); Or (instead of passing in an array of type indicators), you might just iterate over the fields of the first object to try to figure out the data type of each field. To iterate over the properties of the first object in the array, you could use code as previously shown: var list JSON.parse(httpRequest.responseText); var obj - list[O: // get the 1st object in the array (maybe add some code to be sure you have at least one object) for (var prop in obj) /I "prop" iterates through the properties that are in the object obj console.logl'property is'+propand its value is'+objlpropl: Here is some code that you might find helpful in determining if a string contains something that could be converted to a number or not. You can use JS built-in function isNan() (stands for Is Not a Number) which returns true if a string contains something that cannot be converted to a number. Example converting to Number: var s "123" f (isNaN(s)) // true means string cannot be converted to a number // so just return the string as it came in //false means string can be converted to a number return s else return Number(s); /returns 123 (a number) Number is also a built in JS function you can use To figure out if a field is the name of an image file, you can just look for the common file name extensions as part of the string, e.g., look for "jpg" or "png" or "gif". Just google something like "in javaScript how to see if a string contains another string This might seem a bit silly, but in an attempt to give you some exposure to data persistence, but each time the clicksortable HTML table is sorted, the sort order shall be stored in local storage (this shall be handled in MakeTable.js) Whenever the page is refreshed, the two tables should be displayed in the most recent same sort order (this also shall be handled in MakeTable.js) Since you can assume that the ids passed into the MakeTable function are unique within the page, you can use these as ids as the unique identifiers for storing key/value pair into local storage Here's how to test if you got this right: refresh your page and note the sort order of both HTML tables. Change the sort on your first table, change the sort on your second table. Then refresh the page-the sort order of both tables should stick and not revert to the original sort order The object returned by MakeTable shall have at least one public method that the HTML coder can invoke. It's OK if this method has something to do with styling SON Files You'll type in two (syntactically correct) JSON files, each containing an array of like objects. Each JSON file shall have at least one image (references images you have saved), at least one string, and at least one dollar amount type field Styling: Create an external style sheet that your MakeTable code can rely upon to make the generated HTML table look good. Avoid "hard coding" styling in MakeTable.js wherever possible. You can require the HTML coder to include a reference to this external style sheet. This is the default styling they get it they do not want to change any ot the style. Then if the HTML coder wishes, they are free to follow the external style sheet link with their own internal style sheet that overrides a few of your style settings-if they make things look bad, it's their fault and they should back out that change and keep what you had Remember to limit the scope of your styling. For example, instead of having styles like these table td Have styles like these and require the HTML coder to style the divs that will hold the click sortable tables as class-"clickSort" clickSort table styles any table that is inside of a DOM element classed "clickSort"/ clickSort td In your JavaScript code, you can add a classname like this var element document.createElement("td" element.classList.add("numeric") And then provide styling for that class in the external style sheet: clickSort.numeric text-align: right: Index.html index.html shall have at least two divs that get HTML tables inserted inside with code like previously shown var table1 MakeTable("firstDiv", "jsonationalParks.json"); var table2 MakeTable("secondDiv", "json/airplanes.json"); index.html shall invoke a public method of at least one of the returned table objects (e.g., table1 or table2 above Demonstrate the concept that the framework should make things easy by providing a nice looking default format, but the HTML coder can override it. Have one of the click sortable tables accept the default styling provided by the external style sheet, and the other table have a few style rules overwritten by an internal style sheet. Other Requirements: use strict. The first line of your JavaScript code (both in the