JavaScript Frontend

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

This above code helps me to debug code and check outputs.

// define a function to hold data for a Person
class Person {
    constructor(name, grade, school, category) {
        this.name = name;
        this.grade = grade;
        this.school = school;
        this.role = "";
        this.category = category;
    }
    // define a setter for role in Person data
    setRole(role) {
        this.role = role;
    }
    // define a JSON conversion "method" associated with Person
    toJSON() {
        const obj = { name: this.name, grade: this.grade, school: this.school, role: this.role, category: this.category };
        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 instructor = new Person("Krish P", 11, "Del Norte High School", ["Anatomy", "Codebusters"]);  // object type is easy to work with in JavaScript
logItType(instructor);  // before role
logItType(instructor.toJSON());  // ok to do this even though role is not yet defined

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

object ; Person {
  name: 'Krish P',
  grade: 11,
  school: 'Del Norte High School',
  role: '',
  category: [ 'Anatomy', 'Codebusters' ] }
string ; {"name":"Krish P","grade":11,"school":"Del Norte High School","role":"","category":["Anatomy","Codebusters"]}
object ; Person {
  name: 'Krish P',
  grade: 11,
  school: 'Del Norte High School',
  role: 'Instructor',
  category: [ 'Anatomy', 'Codebusters' ] }
string ; {"name":"Krish P","grade":11,"school":"Del Norte High School","role":"Instructor","category":["Anatomy","Codebusters"]}

I made the Person into a class definition, easier to read than the function. It is quite similar to Java, with getters and setters like setRole.

var students = [
    new Person("Don T", 11, "Del Norte High School", ["Bridge", "Roller Coaster"]),
    new Person("Rohan G", 11, "Del Norte High School", ["Fast Facts"]),
    new Person("John Doe", 11, "Oak Valley Middle School", ["Crave The Wave"])
];

class SciolyRoster {
    constructor(instructor, students) {
        // set instructors
        instructor.setRole("Instructor");
        this.instructor = instructor;
        // set students
        this.students = students;

        // initiate the array for roster
        this.roster = [instructor];

        // add all students to the array
        this.students.forEach(student => { student.setRole("Student"); this.roster.push(student); });

        // convert to JSON
        this.json = [];
        this.roster.forEach(person => this.json.push(person.toJSON()));
    }
}

[Function: SciolyRoster]

Creating a list of students to use, and then also making a class definition for easier reading.

roster2021 = new SciolyRoster(instructor, students);

logItType(roster2021.json);

object ; [ '{"name":"Krish P","grade":11,"school":"Del Norte High School","role":"Instructor","category":["Anatomy","Codebusters"]}',
  '{"name":"Don T","grade":11,"school":"Del Norte High School","role":"Student","category":["Bridge","Roller Coaster"]}',
  '{"name":"Rohan G","grade":11,"school":"Del Norte High School","role":"Student","category":["Fast Facts"]}',
  '{"name":"John Doe","grade":11,"school":"Oak Valley Middle School","role":"Student","category":["Crave The Wave"]}' ]

SciolyRoster.prototype._toHtml = function() {
    var style = (
        "display:inline-block;" + 
        "border: 2px solid black;" + 
        "box-shadow: 0.8em 0.4em 0.4em grey;"
    );

    var body = "";

    // set up top row of table
    body += "<tr>";
    body += "<th><mark>" + "Name" + "</mark></th>";
    body += "<th><mark>" + "Grade" + "</mark></th>";
    body += "<th><mark>" + "School" + "</mark></th>";
    body += "<th><mark>" + "Role" + "</mark></th>";
    body += "<th><mark>" + "Category" + "</mark></th>";
    body += "</tr>";

    for (var row in roster2021.roster) {
         // tr for each row, a new line
        body += "<tr>";
        // td for each column of data
        body += "<td>" + roster2021.roster[row].name + "</td>";
        body += "<td>" + roster2021.roster[row].grade + "</td>";
        body += "<td>" + roster2021.roster[row].school + "</td>";
        body += "<td>" + roster2021.roster[row].role + "</td>";
        body += "<td>" + roster2021.roster[row].category + "</td>";
        // tr to end line
        body += "<tr>";
    }


    return (
        "<div style='" + style + "'>" +
          "<header>2021 Roster</header>" + 
          "<table>" +
            body +
          "</table>" +
        "</div>"
      );

    
}

$$.html(roster2021._toHtml());

2021 Roster

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

As seen, this allows me to print the people in Scioly 2021 with a nice title at the start as well as extra categories for the event and school. Most of the data structure is similar to the person code in Mr Morts javascript, but they are class definitions instead of functions. This makes it easier to read and see within the funciton itself.

</div>

Name	Grade	School	Role	Category
Krish P	11	Del Norte High School	Instructor	Anatomy,Codebusters
Don T	11	Del Norte High School	Student	Bridge,Roller Coaster
Rohan G	11	Del Norte High School	Student	Fast Facts
John Doe	11	Oak Valley Middle School	Student	Crave The Wave