Prototyping

JavaScript is an important langauge used for front-end, so here I'll be doing a bit of testing with it.

Our group project involves rebuilding a website from the ground up, so a lot of the student data has to be displayed somewhere. So I (with a bit of help from my partner) wrote code to display a table. Each student in the table has a name, grade, school, role, and event list.

// 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;
    }
}

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


// make a new Person and assign to variable teacher
var instructor = new Person("Carry P", 11, "Del Norte High School", ["Forensics", "Forestry"]);  // object type is easy to work with in JavaScript

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

var students = [
    new Person("Hugh A", 11, "Del Norte High School", ["It's about Time", "Anatomy"]),
    new Person("Banana B", 11, "Del Norte High School", ["Fermi Questions"]),
    new Person("Biscuit M", 11, "Westview High School", ["Astronomy"])
];

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()));
    }
}

roster2021 = new SciolyRoster(instructor, students);

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>

The Process

Writing all of this code took quite a while as more and more classes were introduced.

I started from the most basic component, a Person. I added the basic attributes like name, grade, school, role, and category. Note how the roles haven't been specified yet. Next, I created my first specific instructor, using the setRole() method to give the specific role of "instructor". Instructors have special roles to play so they are distinct from students, which I made next in a list. Combining both the instructor and students, I created the SciolyRoster class which is going to be used to create the table.

The table mainly using a function _toHtml() which required manually typing in each line that would be used to create the table along with filling each row in with the data from the SciolyRoster class. At the end, it returned the html code to create the table, and when called by $$.html, it automatically converted it into a real html table.

</div>
Name Grade School Role Category
Carry P 11 Del Norte High School Instructor Forensics,Forestry
Hugh A 11 Del Norte High School Student It's about Time,Anatomy
Banana B 11 Del Norte High School Student Fermi Questions
Biscuit M 11 Westview High School Student Astronomy