Table for Competitors

Basing my code off the JS notebook code, I made a table based providing information that needs to be kept track of for each competitor. It keeps track of their name, grade, events, and role in Science Olympiad. More information can be added for other data as well.

//logging function
function logIt(output) {
    console.log(output);
}

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

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

// define a JSON conversion "method" associated with Person
Member.prototype.toJSON = function() {
    const obj = {name: this.name, grade: this.grade, events: this.events, role: this.role};
    const json = JSON.stringify(obj);  // json/string is useful when passing data on internet
    return json;
}

// make a new Person and assign to variable teacher
var vicePresident = new Member("Rohang Gaikwad", "11th", ["Dynamic planet", "Astronomy", "Rocks and Minerals"]);  // object type is easy to work with in JavaScript
logItType(vicePresident);  // before role
logItType(vicePresident.toJSON());  // ok to do this even though role is not yet defined

// output of Object and JSON/string associated with Teacher
vicePresident.setRole("Vice President");   // set the role
logItType(vicePresident); 
logItType(vicePresident.toJSON());

object ; Member {
  name: 'Rohang Gaikwad',
  grade: '11th',
  events: [ 'Dynamic planet', 'Astronomy', 'Rocks and Minerals' ],
  role: '' }
string ; {"name":"Rohang Gaikwad","grade":"11th","events":["Dynamic planet","Astronomy","Rocks and Minerals"],"role":""}
object ; Member {
  name: 'Rohang Gaikwad',
  grade: '11th',
  events: [ 'Dynamic planet', 'Astronomy', 'Rocks and Minerals' ],
  role: 'Vice President' }
string ; {"name":"Rohang Gaikwad","grade":"11th","events":["Dynamic planet","Astronomy","Rocks and Minerals"],"role":"Vice President"}

// define a student Array of Person(s)
var competitors = [ 
    new Member("John", "9th", ["Fermi questions", "Trajectory"]),
    new Member("Jack", "10th", ["Anatomy", "Cell Biology"]),
    new Member("Jill", "12th", ["Astronomy", "Write It Do It"]),
    new Member("Bob", "10th", ["Green Generation", "Environmental Chemistry"]),
    new Member("Becca", "11th", ["Flight", "Scrambler"])
];

// define a classroom and build Classroom objects and json
function SciOly(vicePresident, competitors){ // 1 teacher, many student
    // start Classroom with Teacher
    vicePresident.setRole("Vice President");
    this.vicePresident = vicePresident;
    this.scioly = [vicePresident];
    // add each Student to Classroom
    this.competitors = competitors;
    this.competitors.forEach(competitors => { competitors.setRole("Competitor"); this.scioly.push(competitors); });
    // build json/string format of Classroom
    this.json = [];
    this.scioly.forEach(member => this.json.push(member.toJSON()));
}

// make a CompSci classroom from formerly defined teacher and students
dnSciOly = new SciOly(vicePresident, competitors);

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

object ; [ Member {
    name: 'Rohang Gaikwad',
    grade: '11th',
    events: [ 'Dynamic planet', 'Astronomy', 'Rocks and Minerals' ],
    role: 'Vice President' },
  Member {
    name: 'John',
    grade: '9th',
    events: [ 'Fermi questions', 'Trajectory' ],
    role: 'Competitor' },
  Member {
    name: 'Jack',
    grade: '10th',
    events: [ 'Anatomy', 'Cell Biology' ],
    role: 'Competitor' },
  Member {
    name: 'Jill',
    grade: '12th',
    events: [ 'Astronomy', 'Write It Do It' ],
    role: 'Competitor' },
  Member {
    name: 'Bob',
    grade: '10th',
    events: [ 'Green Generation', 'Environmental Chemistry' ],
    role: 'Competitor' },
  Member {
    name: 'Becca',
    grade: '11th',
    events: [ 'Flight', 'Scrambler' ],
    role: 'Competitor' } ]
string ; Rohang Gaikwad
string ; {"name":"Rohang Gaikwad","grade":"11th","events":["Dynamic planet","Astronomy","Rocks and Minerals"],"role":"Vice President"}
object ; { name: 'Rohang Gaikwad',
  grade: '11th',
  events: [ 'Dynamic planet', 'Astronomy', 'Rocks and Minerals' ],
  role: 'Vice President' }

// define an HTML conversion "method" associated with Classroom
SciOly.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>" + "Grade" + "</mark></th>";
    body += "<th><mark>" + "Events" + "</mark></th>";
    body += "<th><mark>" + "Role" + "</mark></th>";
    body += "</tr>";
    // Data of Array, iterate through each row of compsci.classroom 
    for (var row in dnSciOly.scioly) {
      // tr for each row, a new line
      body += "<tr>";
      // td for each column of data
      body += "<td>" + dnSciOly.scioly[row].name + "</td>";
      body += "<td>" + dnSciOly.scioly[row].grade + "</td>";
      body += "<td>" + dnSciOly.scioly[row].events.join(", ") + "</td>";
      body += "<td>" + dnSciOly.scioly[row].role + "</td>";
      // tr to end line
      body += "<tr>";
    }
  
     // Build and HTML fragment of div, table, table body
    return (
      "<div style='" + style + "'>" +
        "<table id = 'result'>" +
          body +
        "</table>" +
      "</div>"
    );
  
  };
  
  // IJavaScript HTML processor receive parameter of defined HTML fragment
  $$.html(dnSciOly._toHtml());
</table></div> </div> </div> </div> </div> </div> </div>
Name Grade Events Role
Rohang Gaikwad 11th Dynamic planet, Astronomy, Rocks and Minerals Vice President
John 9th Fermi questions, Trajectory Competitor
Jack 10th Anatomy, Cell Biology Competitor
Jill 12th Astronomy, Write It Do It Competitor
Bob 10th Green Generation, Environmental Chemistry Competitor
Becca 11th Flight, Scrambler Competitor