Javascript Notebook

function logItType(output) {
    console.log(typeof output, ";", output);
}

//creation of Person function, class object, and JSON
//this refers to an object 

function Person(name, grade, ghID, icon, role) {
    this.name = name;
    this.grade = grade; 
    this.ghID = ghID;
    this.icon = icon;
    this.role = "";
}

// setter for icon in Person data
Person.prototype.setRole = function(role){
    this.role = role;
}

//defines JSON conversion "method" associated with Person
Person.prototype.toJSON = function(){
    const obj = {name: this.name, grade: this.grade, ghID: this.ghID, icon: this.icon, role: this.role};
    const json = JSON.stringify(obj); //useful to pass data on internet
    return json;
}

var teacher = new Person("Mr. M", "0", "jm1021", "Owl")

var students = [
    new Person("Calissa", "12", "CalissaT", "Pink Bird"),
    new Person("Evan", "12", "deimie", "Blue Bird"),
    new Person("Samuel", "12", "Samuelwaang", "Orange Bird"),
    new Person("Kian", "12", "kiannp44", "Yellow Bird"),
    new Person("Mr. M Jr", "12", "Mrmjr123", "Brown Bird"),
];

function Classroom(teacher, students){
    //classroom starts with Teacher
    teacher.setRole("Teacher");
    this.teacher = teacher;
    this.classroom = [teacher];
    //students are added
    this.students = students;
    this.students.forEach(student => {student.setRole("Student"); this.classroom.push(student); });
    //json/string format of Classroom
    this.json = [];
    this.classroom.forEach(person => this.json.push(person.toJSON()));
}

// make a CompSci classroom from formerly defined teacher and students
compsci = new Classroom(teacher, students);

// output of Objects and JSON in CompSci classroom
logItType(compsci.classroom);  // constructed classroom object

object ; [ Person {
    name: 'Mr. M',
    grade: '0',
    ghID: 'jm1021',
    icon: 'Owl',
    role: 'Teacher' },
  Person {
    name: 'Calissa',
    grade: '12',
    ghID: 'CalissaT',
    icon: 'Pink Bird',
    role: 'Student' },
  Person {
    name: 'Evan',
    grade: '12',
    ghID: 'deimie',
    icon: 'Blue Bird',
    role: 'Student' },
  Person {
    name: 'Samuel',
    grade: '12',
    ghID: 'Samuelwaang',
    icon: 'Orange Bird',
    role: 'Student' },
  Person {
    name: 'Kian',
    grade: '12',
    ghID: 'kiannp44',
    icon: 'Yellow Bird',
    role: 'Student' },
  Person {
    name: 'Mr. M Jr',
    grade: '12',
    ghID: 'Mrmjr123',
    icon: 'Brown Bird',
    role: 'Student' } ]

// define an HTML conversion "method" associated with Classroom
Classroom.prototype._toHtml = function() {
  // HTML Style is build using inline structure
  var style = (
    "display:inline-block;" +
    "border: 2px solid grey;" +
    "box-shadow: 0.8em 0.4em 0.4em lightseagreen;"
  );

  // HTML Body of Table is build as a series of concatenations (+=)
  var body = "";
  // Heading for Array Columns
  body += "<tr>";
  body += "<th><mark>" + "Name" + "</mark></th>";
  body += "<th><mark>" + "Grade" + "</mark></th>";
  body += "<th><mark>" + "GitHub ID" + "</mark></th>";
  body += "<th><mark>" + "Icon" + "</mark></th>";
  body += "<th><mark>" + "Role" + "</mark></th>";
  body += "</tr>";
  // Data of Array, iterate through each row of compsci.classroom 
  for (var row in compsci.classroom) {
    // tr for each row, a new line
    body += "<tr>";
    // td for each column of data
    body += "<td>" + compsci.classroom[row].name + "</td>";
    body += "<td>" + compsci.classroom[row].grade + "</td>";
    body += "<td>" + compsci.classroom[row].ghID + "</td>";
    body += "<td>" + compsci.classroom[row].icon + "</td>";
    body += "<td>" + compsci.classroom[row].role + "</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(compsci._toHtml());

</table></div> </div> </div> </div> </div> </div> </div>

Name	Grade	GitHub ID	Icon	Role
Mr. M	0	jm1021	Owl	Teacher
Calissa	12	CalissaT	Pink Bird	Student
Evan	12	deimie	Blue Bird	Student
Samuel	12	Samuelwaang	Orange Bird	Student
Kian	12	kiannp44	Yellow Bird	Student
Mr. M Jr	12	Mrmjr123	Brown Bird	Student