jasontwuk/eloquentJs_Ch14_Exercise_BuildATable.html

## eloquentJs_Ch14_Exercise_BuildATable.html
<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Ch14-exercise-Build A Table</title>
    </head>
    <body>
        <h1>Mountains</h1>
        <div id="mountains"></div>

        <script>
            const MOUNTAINS = [
                {name: "Kilimanjaro", height: 5895, place: "Tanzania"},
                {name: "Everest", height: 8848, place: "Nepal"},
                {name: "Mount Fuji", height: 3776, place: "Japan"},
                {name: "Vaalserberg", height: 323, place: "Netherlands"},
                {name: "Denali", height: 6168, place: "United States"},
                {name: "Popocatepetl", height: 5465, place: "Mexico"},
                {name: "Mont Blanc", height: 4808, place: "Italy/France"}
            ];
            // Your code here
            function buildTable(data){
                let table = document.createElement("table");
                let titles = Object.keys(data[0]);
                let tr_title = document.createElement("tr");
                table.appendChild(tr_title);
                for(let i = 0; i < titles.length; i++){
                    let th = document.createElement("th");
                    let title = document.createTextNode(titles[i]);
                    th.appendChild(title);
                    tr_title.appendChild(th);
                }
                for(let x = 0; x < data.length; x++){
                    let tr_contents = document.createElement("tr");
                    table.appendChild(tr_contents);

                    let dataObject = data[x];
                    let tdKeys = Object.keys(data[x]);
                    for(let y = 0; y < tdKeys.length; y++){
                        let td = document.createElement("td");
                        let value = document.createTextNode(dataObject[tdKeys[y]]);
                        td.appendChild(value);
                        tr_contents.appendChild(td);
                        // Right-align cells that contain number values
                        if(typeof dataObject[tdKeys[y]] == "number"){
                            td.style.textAlign = "right";
                        };
                    }
                }
                return table;
            }
            document.getElementById("mountains").appendChild(buildTable(MOUNTAINS));
        </script>

    </body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>Ch14-exercise-Build A Table</title>
	</head>
	<body>
	<h1>Mountains</h1>
	<div id="mountains"></div>

	<script>
	const MOUNTAINS = [
	{name: "Kilimanjaro", height: 5895, place: "Tanzania"},
	{name: "Everest", height: 8848, place: "Nepal"},
	{name: "Mount Fuji", height: 3776, place: "Japan"},
	{name: "Vaalserberg", height: 323, place: "Netherlands"},
	{name: "Denali", height: 6168, place: "United States"},
	{name: "Popocatepetl", height: 5465, place: "Mexico"},
	{name: "Mont Blanc", height: 4808, place: "Italy/France"}
	];
	// Your code here
	function buildTable(data){
	let table = document.createElement("table");
	let titles = Object.keys(data[0]);
	let tr_title = document.createElement("tr");
	table.appendChild(tr_title);
	for(let i = 0; i < titles.length; i++){
	let th = document.createElement("th");
	let title = document.createTextNode(titles[i]);
	th.appendChild(title);
	tr_title.appendChild(th);
	}
	for(let x = 0; x < data.length; x++){
	let tr_contents = document.createElement("tr");
	table.appendChild(tr_contents);

	let dataObject = data[x];
	let tdKeys = Object.keys(data[x]);
	for(let y = 0; y < tdKeys.length; y++){
	let td = document.createElement("td");
	let value = document.createTextNode(dataObject[tdKeys[y]]);
	td.appendChild(value);
	tr_contents.appendChild(td);
	// Right-align cells that contain number values
	if(typeof dataObject[tdKeys[y]] == "number"){
	td.style.textAlign = "right";
	};
	}
	}
	return table;
	}
	document.getElementById("mountains").appendChild(buildTable(MOUNTAINS));
	</script>

	</body>
	</html>