Using JavaScript Kernels
Storing personal information with JavaScript
- Defining Function to Create Lists
- Adding Additional Attributes to Person
- Attempting to create HTML Table
function attribute(category, value, info) {
this.category=category;
this.value=value;
this.info=info;
}
attribute.prototype.toJSON = function() {
const obj = {category: this.category, value: this.value, info: this.info};
const json = JSON.stringify(obj);
return json;
}
function logItType(output) {
console.log(typeof output, ";", output);
}
var basic = new attribute("Name", "Trent", "Born on March 9, 2005")
logItType(basic)
logItType(basic.toJSON());
var additional = [
new attribute("Age", "17", "Senior in high school"),
new attribute("Hobbies", "Playing music, lacrosse, surfing", "Plays both drums and guitar"),
new attribute("Pets", "Dog", "Named Oscar, owned for about 5 years"),
new attribute("Class", "APCSP", "Period 3")
]
function person(basic, additional){
this.basic = basic
this.additional = additional
this.person = [basic]
this.additional.forEach(additional => { this.person.push(additional) })
this.json = []
this.person.forEach(attribute => this.json.push(attribute.toJSON()));
}
me = new person(basic, additional)
logItType(me.person);
logItType(me.person[0].name);
logItType(me.json[0]);
logItType(JSON.parse(me.json[0]));
person.prototype._toHtml = function () {
var style = (
"display:inline-block;" +
"background: #804175;" +
"border: 2 px white;" +
"box-shadow: 0.8 em 0.4 em 0.4 em black;"
);
var body = "";
body += "<tr>";
body += "<th><b>" + "Attribute" + "</b></th>";
body += "<th><b>" + "Value" + "</b></th>";
body += "<th><b>" + "More Info" + "</b></th>";
body += "</tr>";
for (var row of me.person) {
body += "<tr>";
body += "<td>" + row.category + "</td>";
body += "<td>" + row.value + "</td>";
body += "<td>" + row.info + "</td>";
body += "<tr>";
}
return (
"<div style='" + style + "'>" +
"<table>" +
body +
"</table>" +
"</div>"
);
}
$$.html(me._toHtml());