JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<dl>
    <dt>Name</dt>
    <dd class="name"></dd>
    <dt>Age</dt>
    <dd class="age"></dd>
    <dt>Gender</dt>
    <dd class="gender"></dd>
    <dt>Student</dt>
    <dd class="student"></dd>
    <dt>Works</dt>
    <dd class="works"></dd>
    <dt>Likes</dt>
    <dd class="likes"></dd>
</dl>

CSS

dl {
    font: 16px helvetica, arial;
}

dd {
    background-color: #222;
    color: #fff;
    font-weight: bold;
}

JavaScript

function getsSet() {
    this.set = function(prop, value) {
        if (this.hasOwnProperty(prop) || this[prop] === undefined) {
            var klass = "." + prop;
            this[prop] = value;
            $(klass).text(value);
        }
    };

    this.initialize = function() {
        for (var x in this) {
            if (this.hasOwnProperty(x)) {
                klass = "." + x;
                $(klass).text(this[x]);
            }
        }
    };
};

var Person = function Person(name) {
    this.name = name;
    this.age = 24;
    this.gender = "female";
    this.student = true;
    this.works = false;
};

Person.prototype = new getsSet();

var jane = new Person("Jane Fonda");

jane.initialize();
jane.set('student', false);