JSFiddle - React, Tailwind, and code Playground

by Ivo Tanev

HTML

<!-- Logger div -->
<div id="log"><h4>Logs:</h4></div>

CSS

#log {display: none;background-color: black;font-family: "Courier New", Courier, monospace;color: white;margin-top: 60px;}#log h4 {text-align: center;}#log p {padding: 0 5px;}hr {border-color: rgb(63, 63, 63);}

/*CSS starting here ----> */

JavaScript

// Just Looger inside the iframe.
var Logger = {count: 1,log: function(obj) {var msg = JSON.stringify(obj) || '-Cannot show this obj-';var $line = $('<p>').text(this.count + '. ' + msg);$('#log').show().append($line).append($('<hr>'));this.count++;}};function log(obj) {Logger.log(obj);}

// Code starting here --->

function Class() {
    this.asd = 'asd';
}
Class.prototype.fnChangeThisProp = function() {
    this.prop = 'changed prop';
}
Class.prototype.prop = 'asdasdasd';

var foo = new Class();
var bar = new Class();

foo.prop = 'a2';
log('foo.prop = ' + foo.prop);
log('bar.prop = ' + bar.prop);

bar.fnChangeThisProp();
log('after fn call foo.prop = ' + foo.prop);
log('after fn call bar.prop = ' + bar.prop);