//Define data
function Data(name, github, fastpages) {
    this.name = name;
    this.git = github;
    this.fastpages = fastpages;
}

Data.prototype.setRole = function(role) {
    this.role = role;
}
Data.prototype.toJSON = function() {
    const obj = {name: this.name, github: this.github, fastpages: this.fastpages};
    const json = JSON.stringify(obj);
    return json;
}

//Make new data and put in a list
var colin = new Data("Colin", "https://github.com/BobTheFarmer/Colin-Blog2", "https://bobthefarmer.github.io/Colin-Blog2/");
var orlando = new Data("Orlando", "https://github.com/Orlando-c", "https://orlando-c.github.io/que-pro/");
var ethan = new Data("Ethan", "https://github.com/dolphinalt/APCSP-Fastpages", "https://github.com/dolphinalt/APCSP-Fastpages")
var jaden = new Data("Jaden", "https://raisinbran25.github.io/csp2/", "https://github.com/raisinbran25/csp2")
allData = [colin, orlando, ethan, jaden];

//Make a object to hold the data
function DataHolder(allData) {
    this.allData = allData;
}

//Use object to hold data
dataHolder = new DataHolder(allData);



//HTML conversion method
DataHolder.prototype._toHtml = function() {
    var style = (
      "display:inline-block;" +
      "border: 2px solid grey;" +
      "box-shadow: 0.8em 0.4em 0.4em grey;"
    );
  
    var table = "";
    table += "<tr>";
    table += "<th><mark>" + "Name" + "</mark></th>";
    table += "<th><mark>" + "GitHub" + "</mark></th>";
    table += "<th><mark>" + "Fastpages" + "</mark></th>";
    table += "</tr>";

    //Go through all data and each data's properties in a table format
    for (var row of allData) {
        table += "<tr>";
        table += "<td>" + row.name;
        table += "<td>" + row.name + "'s Github: " + row.git + "</td>";
        table += "<td>" + row.name + "'s Fastpages: " + row.fastpages + "</td>";
        table += "<tr>"
    }
     //Return table
    return (
      "<div style='" + style + "'>" +
        "<table>" +
            table +
        "</table>" +
      "</div>"
    );
  };
  
  // IJavaScript HTML processor receive parameter of defined HTML fragment
  $$.html(dataHolder._toHtml());