Issues

This should have taken only about 30 minutes or so. It took me like 5 hours. I had so many issues and it stemmed from my kernel because it did not pop up that I had Node.Js and instead only Python. I tried redownloading it many times and using isjsinstall in my terminal. I even tried seein gif I could do it on a friends computer and it did not work.I tried putting the code on websites that could run Javascript but they would not work because the code in the table only works in vscode in specific. I finished this Wednesday morning when I checked and when I clicked on Kernels Node.Js actually showed up and I completed it.

console.log("Hello, World!");

Hello, World!

var msg = "Hello Luke";
console.log(msg);

Hello Luke

function logIt(output) {
    console.log(output);
}
logIt(msg);

Hello Luke

console.log("Whats Up")
logIt("What year is it?");
logIt(2022)

How are you doing?
What day is today?
2022

function logItType(output) {
    console.log(typeof output, ";", output);
}
console.log("Different types of outputs")
logItType("Whats Up"); // String
logItType(2022);    // Number
logItType([1, 2, 3]);  // Object is generic for this Array, which similar to Python List

Different types of outputs
string ; Whats Up
number ; 2022
object ; [ 1, 2, 3 ]

// define a function to hold data for a Person
function Person(name, age, classOf) {
    this.name = name;
    this.age = age;
    this.classOf = classOf;
    this.role = "";
}

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

// define a JSON conversion "method" associated with Person
Person.prototype.toJSON = function() {
    const obj = {name: this.name, age: this.age, classOf: this.classOf, role: this.role};
    const json = JSON.stringify(obj);
    return json;
}

// make a new Person and assign to variable devOps
var devOps = new Person("Luke", "17", 2023);
devOps.setRole("DevOps");

// output of Object and JSON/string associated with DevOps
logItType(devOps);  // object type is easy to work with in JavaScript
logItType(devOps.toJSON());  // json/string is useful when passing data on internet

object ; Person { name: 'Luke', age: '17', classOf: 2023, role: 'DevOps' }
string ; {"name":"Luke","age":"17","classOf":2023,"role":"DevOps"}

// define a student Array of Person(s)
var members = [ 
    new Person("James", "16", 2024),
    new Person("Ethan", "16", 2024),
    new Person("Jeffrey", "17", 2023),
];

// define a classroom and build Classroom objects and json
function Group(devOps, members){ // 1 DevOps, many members
    // start group with DevOps
    devOps.setRole("DevOps");
    this.devOps = devOps;
    this.group = [devOps];
    // add each member to group
    this.members = members;
    this.members.forEach(members => { members.setRole("Members"); this.group.push(members); });
    // build json/string format of group
    this.json = [];
    this.group.forEach(person => this.json.push(person.toJSON()));
}

// make a CompSci group from formerly defined teacher and students
compsci = new Group(devOps, members);

// output of Objects and JSON in CompSci group
logItType(compsci.group);  // constructed classroom object
logItType(compsci.group[0].name);  // abstract 1st objects name
logItType(compsci.json[0]);  // show json conversion of 1st object to string
logItType(JSON.parse(compsci.json[0]));  // show JSON.parse inverse of JSON.stringify

object ; [ Person { name: 'Luke', age: '17', classOf: 2023, role: 'DevOps' },
  Person { name: 'James', age: '16', classOf: 2024, role: 'Members' },
  Person { name: 'Ethan', age: '16', classOf: 2024, role: 'Members' },
  Person { name: 'Jeffrey', age: '17', classOf: 2023, role: 'Members' } ]
string ; Luke
string ; {"name":"Luke","age":"17","classOf":2023,"role":"DevOps"}
object ; { name: 'Luke', age: '17', classOf: 2023, role: 'DevOps' }

// define an HTML conversion "method" associated with Group
Group.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 grey;"
    );
  
    // 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>" + "Age" + "</mark></th>";
    body += "<th><mark>" + "classOf" + "</mark></th>";
    body += "<th><mark>" + "Role" + "</mark></th>";
    body += "</tr>";
    // Data of Array, iterate through each row of compsci.group 
    for (var row of compsci.group) {
      // tr for each row, a new line
      body += "<tr>";
      // td for each column of data
      body += "<td>" + row.name + "</td>";
      body += "<td>" + row.age + "</td>";
      body += "<td>" + row.classOf + "</td>";
      body += "<td>" + 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());

Name	Age	classOf	Role
Luke	17	2023	DevOps
James	16	2024	Members
Ethan	16	2024	Members
Jeffrey	17	2023	Members