Defining the Class Object and Classes array

function Class(name, period, timeStart, timeEnd, teacher) {
    this.name = name;
    this.period = period;
    this.timeStart = timeStart;
    this.timeEnd = timeEnd;
    this.teacher = teacher;
    this.grade = "";
}

Class.prototype.set_grade = function(grade) {
    this.grade = grade
}

var Classes = [new Class("AP Physics C: Mechanics", "1", "8:35", "9:44", "Mr. Liao"), 
new Class("AP Calculus BC", "2", "9:49", "10:58", "Mrs. Lanzi"), 
new Class("US History", "3", "11:13", "12:22", "Mr. Smith"), 
new Class("AP Computer Science: Principles", "4", "12:57", "2:06", "Mr. Mort (the goat)"), 
new Class("AP Physics C: Mechanics", "5", "2:36", "3:45", "Mrs. Dafoe")];

Classes[0].set_grade("A")
Classes[1].set_grade("B+")
Classes[2].set_grade("A+")
Classes[3].set_grade("A+")
Classes[4].set_grade("A")

console.log(Classes)

[ Class {
    name: 'AP Physics C: Mechanics',
    period: '1',
    timeStart: '8:35',
    timeEnd: '9:44',
    teacher: 'Mr. Liao',
    grade: 'A' },
  Class {
    name: 'AP Calculus BC',
    period: '2',
    timeStart: '9:49',
    timeEnd: '10:58',
    teacher: 'Mrs. Lanzi',
    grade: 'B+' },
  Class {
    name: 'US History',
    period: '3',
    timeStart: '11:13',
    timeEnd: '12:22',
    teacher: 'Mr. Smith',
    grade: 'A+' },
  Class {
    name: 'AP Computer Science: Principles',
    period: '4',
    timeStart: '12:57',
    timeEnd: '2:06',
    teacher: 'Mr. Mort (the goat)',
    grade: 'A+' },
  Class {
    name: 'AP Physics C: Mechanics',
    period: '5',
    timeStart: '2:36',
    timeEnd: '3:45',
    teacher: 'Mrs. Dafoe',
    grade: 'A' } ]

Constructing a table from the Classes Array

function toHtml (Classes) {
    // HTML Style is build using inline structure
    var style = (
      "background-color: rgb(8, 0, 124);" +
      "border-color: rgb(220, 220, 220);" +
      "color: rgb(220, 220, 220);"
    );
  
    // HTML Body of Table is build as a series of concatenations (+=)
    var body = "";
    // Heading for Array Columns
    body += "<tr>";
    body += "<th><strong>" + "Class" + "</strong></th>";
    body += "<th><strong>" + "Period #" + "</strong></th>";
    body += "<th><strong>" + "Starting Time" + "</strong></th>";
    body += "<th><strong>" + "Ending Time" + "</strong></th>";
    body += "<th><strong>" + "Teacher" + "</strong></th>";
    body += "<th><strong>" + "Grade" + "</strong></th>";
    body += "</tr>";
    // Data of Array, iterate through each row of compsci.classroom 
    for (var row of Classes) {
      // tr for each row, a new line
      body += "<tr>";
      // td for each column of data
      body += "<td>" + row.name + "</td>";
      body += "<td>" + row.period + "</td>";
      body += "<td>" + row.timeStart + "</td>";
      body += "<td>" + row.timeEnd + "</td>";
      body += "<td>" + row.teacher + "</td>";
      body += "<td>" + row.grade + "</td>";
      // tr to end line
      body += "<tr>";
    }
  
     // Build and HTML fragment of div, table, table body
    return (
      "<div style='" + style + "'>" +
        "<table>" +
          body +
        "</table>" +
      "</div>"
    );
  
  };
  
  // IJavaScript HTML processor receive parameter of defined HTML fragment
  $$.html(toHtml(Classes));

Class	Period #	Starting Time	Ending Time	Teacher	Grade
AP Physics C: Mechanics	1	8:35	9:44	Mr. Liao	A
AP Calculus BC	2	9:49	10:58	Mrs. Lanzi	B+
US History	3	11:13	12:22	Mr. Smith	A+
AP Computer Science: Principles	4	12:57	2:06	Mr. Mort (the goat)	A+
AP Physics C: Mechanics	5	2:36	3:45	Mrs. Dafoe	A