Table Builder
-
Create an HTML file named
table.html, and a JS file namedtable.js. -
Dynamically build a table with the data below. Copy the array of objects into your
table.jsfile. These values should not be hardcoded.
Don't all of the state objects have the same properties? Each state should be a in its own row with name and abbr as data cells.
let usStates = [
{ name: 'ALABAMA', abbr: 'AL'},
{ name: 'ALASKA', abbr: 'AK'},
{ name: 'ARIZONA', abbr: 'AZ'},
{ name: 'ARKANSAS', abbr: 'AR'},
{ name: 'CALIFORNIA', abbr: 'CA'},
{ name: 'COLORADO', abbr: 'CO'},
{ name: 'CONNECTICUT', abbr: 'CT'},
{ name: 'DELAWARE', abbr: 'DE'},
{ name: 'DISTRICT OF COLUMBIA', abbr: 'DC'},
{ name: 'FLORIDA', abbr: 'FL'},
{ name: 'GEORGIA', abbr: 'GA'},
{ name: 'HAWAII', abbr: 'HI'},
{ name: 'IDAHO', abbr: 'ID'},
{ name: 'ILLINOIS', abbr: 'IL'},
{ name: 'INDIANA', abbr: 'IN'},
{ name: 'IOWA', abbr: 'IA'},
{ name: 'KANSAS', abbr: 'KS'},
{ name: 'KENTUCKY', abbr: 'KY'},
{ name: 'LOUISIANA', abbr: 'LA'},
{ name: 'MAINE', abbr: 'ME'},
{ name: 'MARYLAND', abbr: 'MD'},
{ name: 'MASSACHUSETTS', abbr: 'MA'},
{ name: 'MICHIGAN', abbr: 'MI'},
{ name: 'MINNESOTA', abbr: 'MN'},
{ name: 'MISSISSIPPI', abbr: 'MS'},
{ name: 'MISSOURI', abbr: 'MO'},
{ name: 'MONTANA', abbr: 'MT'},
{ name: 'NEBRASKA', abbr: 'NE'},
{ name: 'NEVADA', abbr: 'NV'},
{ name: 'NEW HAMPSHIRE', abbr: 'NH'},
{ name: 'NEW JERSEY', abbr: 'NJ'},
{ name: 'NEW MEXICO', abbr: 'NM'},
{ name: 'NEW YORK', abbr: 'NY'},
{ name: 'NORTH CAROLINA', abbr: 'NC'},
{ name: 'NORTH DAKOTA', abbr: 'ND'},
{ name: 'OHIO', abbr: 'OH'},
{ name: 'OKLAHOMA', abbr: 'OK'},
{ name: 'OREGON', abbr: 'OR'},
{ name: 'PENNSYLVANIA', abbr: 'PA'},
{ name: 'RHODE ISLAND', abbr: 'RI'},
{ name: 'SOUTH CAROLINA', abbr: 'SC'},
{ name: 'SOUTH DAKOTA', abbr: 'SD'},
{ name: 'TENNESSEE', abbr: 'TN'},
{ name: 'TEXAS', abbr: 'TX'},
{ name: 'UTAH', abbr: 'UT'},
{ name: 'VERMONT', abbr: 'VT'},
{ name: 'VIRGINIA', abbr: 'VA'},
{ name: 'WASHINGTON', abbr: 'WA'},
{ name: 'WEST VIRGINIA', abbr: 'WV'},
{ name: 'WISCONSIN', abbr: 'WI'},
{ name: 'WYOMING', abbr: 'WY' }
];
Remember that tables follow the structure:
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>