JSFiddle - React, Tailwind, and code Playground

HTML

<div>Width:<span id="width" />
</div>
<div>Height:<span id="height" />
</div>
<div>Property area:<span id="propArea" />
</div>
<div>Function area:<span id="funcArea" />
</div>
<button id="createNew">Create new rectangle</button>
<input id="widthInput" placeholder="width" />
<input id="heightInput" placeholder="height" />

CSS

input, button, div {
    display: block;
    margin: 10px;
    padding: 5px;
}
span {
    margin: 3px;
}

JavaScript

'use strict'

class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    //this is a property accessor
    get area() {
        return this.calcArea();
    }

    //this is a function added to the prototype
    calcArea() {
        return this.width * this.height;
    }
}

$('#createNew').click(function () {
    var width = $('#widthInput').val();
    var height = $('#heightInput').val();
    //add validation here if you like
    //perhaps alert if the input values are not a number

    var r = new Rectangle(width, height);

    $('#width').text(r.width);
    $('#height').text(r.height);
    $('#propArea').text(r.area);
    $('#funcArea').text(r.calcArea());
    console.log(r);
});