Populate SharePoint sub sites in a table using PnP JS core component and Office UI Fabric

pnpjsfabric.Populatesubsites.html

//Author: Shantha Kumar T
//Supports: SharePoint Online, SharePoint 2013+
//PnP JavaScript file available from https://github.com/OfficeDev/PnP-JS-Core

//Fabric Core CSS file available from https://github.com/OfficeDev/office-ui-fabric-core
//https://github.com/OfficeDev/office-ui-fabric-core/<Release build>/dist/css/fabric.min.css

//Fabric JS file available from https://github.com/OfficeDev/office-ui-fabric-js
//https://github.com/OfficeDev/office-ui-fabric-js/<Release build>/dist/js/fabric.min.js

<script type="text/javascript" src="/siteassets/scripts/fetch.js"></script> 
<script type="text/javascript" src="/siteassets/scripts/es6-promise.js"></script> 
<script type="text/javascript" src="/SiteAssets/Scripts/pnp.js"></script> 
<link href="/SiteAssets/Styles/fabric/fabric.min.css" rel="stylesheet" type="text/css">
<link href="/SiteAssets/Styles/fabric/fabric.components.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/SiteAssets/Scripts/jquery.min.js"></script> 
<script type="text/javascript" src="/SiteAssets/Scripts/fabric/fabric.min.js"></script> 

<div class="ms-font-xxl ms-bgColor-themeDarker ms-fontColor-themeLighterAlt">Sub Sites</div>

<table class="ms-Table ms-Table--selectable" id="webTable">  
    <thead>  
    <tr> 
<th class="ms-Table-rowCheck"></th>	
        <th>Title</th>  
        <th>Description</th>  
        <th>Created</th>  
        <th>Web Template</th>  
    </tr>  
    </thead>  
    <tbody id="webTableBody"></tbody>
</table>  
    <p class="ms-font-m" id="countid">No websites</p>
</div>
	
 
<script type="text/javascript">

//Convert the HTML table to Fabric Table Component
var TableElements = document.querySelectorAll(".ms-Table");
    for(var i = 0; i < TableElements.length; i++) {
        new fabric['Table'](TableElements[i]);
    }

//Retrieve the subsites and then populating the values in a Fabric Table
$pnp.sp.web.webs.get().then(function(result) {
if(result.length > 0)
 document.getElementById('countid').innerHTML ="Total subsites: "+ result.length;
 var tabhtml = "";
 for(var i=0; i< result.length; i++){
 var createdDate = new Date(result[i].Created);
 tabhtml += "<tr><td class='ms-Table-rowCheck'></td>"+ 
 "<td><a href='"+result[i].Url+"' target='_blank'>"+result[i].Title+"</a></td>"+ 
 "<td>"+result[i].Description+"</td>"+ 
 "<td>"+createdDate+"</td>"+ 
 "<td>"+result[i].WebTemplate+"</td>"+ "</tr>";
 }
 document.getElementById("webTableBody").innerHTML = tabhtml;
 }).catch(function(err){ alert(err);});
 
</script>