Dress List JavaScript

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


// define a function to hold data for a Dress
function Dress(brand, color, price) {
    this.brand = brand;
    this.color = color;
    this.price = price;
    this.fav = "";
}

// define a setter for fav in Dress data
Dress.prototype.setFav = function(fav) {
    this.fav = fav;
}

// define a JSON conversion "method" associated with Person
Dress.prototype.toJSON = function() {
    const obj = {brand: this.brand, color: this.color, price: this.price, fav: this.fav};
    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 dress1 = new Dress("Lucy In the Sky", "blue", 55);  // object type is easy to work with in JavaScript
logItType(dress1);  // before role
logItType(dress1.toJSON());  // ok to do this even though role is not yet defined

// output of Object and JSON/string associated with Teacher
dress1.setFav("#1");   // set the role
logItType(dress1); 
logItType(dress1.toJSON());

object ; Dress { brand: 'Lucy In the Sky', color: 'blue', price: 55, fav: '' }
string ; {"brand":"Lucy In the Sky","color":"blue","price":55,"fav":""}
object ; Dress { brand: 'Lucy In the Sky', color: 'blue', price: 55, fav: '#1' }
string ; {"brand":"Lucy In the Sky","color":"blue","price":55,"fav":"#1"}

var dresses = [ 
    new Dress("Windsor", "maroon", 60),
    new Dress("Windsor", "dark green", 50),
    new Dress("Lucy in the Sky", "white", 55),
    new Dress("Cider", "black", 40),
];

// define a classroom and build Classroom objects and json
function favorite_list(dress1, dresses){ // 1 teacher, many student

    dress1.setFav("Favorite");
    this.dress1 = dress1;
    this.js = [dress1];
  
    this.dresses = dresses;
    this.dresses.forEach(dresses => { dresses.setFav("Backup Options"); this.js.push(dresses); });

    this.json = [];
    this.js.forEach(person => this.json.push(person.toJSON()));
}

// make a CompSci classroom from formerly defined dress1 and dresses
dress_list = new favorite_list(dress1, dresses);

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

object ; [ Dress {
    brand: 'Lucy In the Sky',
    color: 'blue',
    price: 55,
    fav: 'Favorite' },
  Dress {
    brand: 'Windsor',
    color: 'maroon',
    price: 60,
    fav: 'Backup Options' },
  Dress {
    brand: 'Windsor',
    color: 'dark green',
    price: 50,
    fav: 'Backup Options' },
  Dress {
    brand: 'Lucy in the Sky',
    color: 'white',
    price: 55,
    fav: 'Backup Options' },
  Dress {
    brand: 'Cider',
    color: 'black',
    price: 40,
    fav: 'Backup Options' } ]
string ; Lucy In the Sky
string ; {"brand":"Lucy In the Sky","color":"blue","price":55,"fav":"Favorite"}
object ; { brand: 'Lucy In the Sky',
  color: 'blue',
  price: 55,
  fav: 'Favorite' }

// define an HTML conversion "method" associated with Classroom
favorite_list.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>" + "Brand" + "</mark></th>";
  body += "<th><mark>" + "Color" + "</mark></th>";
  body += "<th><mark>" + "Price" + "</mark></th>";
  body += "<th><mark>" + "Opinion" + "</mark></th>";
  body += "</tr>";
  // Data of Array, iterate through each row of compsci.classroom 
  for (var row in dress_list.js) {
    // tr for each row, a new line
    body += "<tr>";
    // td for each column of data
    body += "<td>" + dress_list.js[row].brand + "</td>";
    body += "<td>" + dress_list.js[row].color + "</td>";
    body += "<td>" + dress_list.js[row].price + "</td>";
    body += "<td>" + dress_list.js[row].fav + "</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(dress_list._toHtml());

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

Brand	Color	Price	Opinion
Lucy In the Sky	blue	55	Favorite
Windsor	maroon	60	Backup Options
Windsor	dark green	50	Backup Options
Lucy in the Sky	white	55	Backup Options
Cider	black	40	Backup Options