JSFiddle - React, Tailwind, and code Playground

by phrontisteries

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Creating a table using javascript and AJAX</title>
        <link rel="stylesheet" href="styles.css" />
</head>

<body>

<div class="wrapper">
    <button id="button">Create Table!</button>
</div>

</body>
</html>

CSS

.wrapper {
        text-align: center;
    }
    .jsTable * {
        border: 3px solid black;
        text-align: center;
        padding: 0;
    }
    .jsTable { 
        width: 95%;
        margin: 10px auto;
    }
    .jsTableHead {
        font-weight: bold;
        font-size: 24px;
        background-color: lightgrey;
    }
    .jsTableRowHead {
        font-size: 18px;
        background: lightgrey;
    }

    @media (min-width: 470px) {
        .jsTable {
            width: 85%;
        }
    }

    @media (min-width: 640px) {
        .jsTable {
            width: 65%;
        }
    }

JavaScript

var petsandpeople = {/*
	"tableHeading"     : "Table with Pet and People Names!",
	"tableCellsPets"   : ["Pet Names", "Sparky", "Roxy", "Cat Meowington"],
 	"tableCellsPeople" : ["People Names", "Larry", "Julie", "Joel"]
};*/
    "header": {
        "version": "0.0.8",
        "status": 1,
        "message": ""
    },
    "response": [{
        "productLine": "Classic Cars",
        "products": 38
    }, {
        "productLine": "Motorcycles",
        "products": 13
    }, {
        "productLine": "Planes",
        "products": 12
    }, {
        "productLine": "Ships",
        "products": 9
    }, {
        "productLine": "Trains",
        "products": 3
    }, {
        "productLine": "Trucks and Buses",
        "products": 11
    }, {
        "productLine": "Vintage Cars",
        "products": 24
    }]
};

//create AJAX function to bind to button click
var getTableDataAJAX = function() {
/*
    var getTableData = new XMLHttpRequest();

    getTableData.onreadystatechange = function() {
        //checking for when response is received from server
        if(getTableData.readyState === 4) {
            var tableInfo     = JSON.parse(getTableData.responseText);*/
            var tableInfo     = petsandpeople;
            var tableHeading  = tableInfo.tableHeading;
            var tableCellsPets   = tableInfo.tableCellsPets;
            var tableCellsPeople   = tableInfo.tableCellsPeople;

            var createTable = function() {
                //Create Table and Heading Rows 
                var newTable = document.createElement('table');
                var tableHeadingRow = document.createElement('tr');
                var tableHeader = document.createElement('th');
                tableHeadingRow.appendChild(tableHeader);

                //Create first row with header and data
                var tableRowFirst = document.createElement('tr');
                var tableRowFirstHead = document.createElement('th');
               ...