JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>

CSS

div{
    float:left;
    width:100px;
    height: 100px;
    border: 2px solid gray;
    background: silver;
}

JavaScript

function Block(id){
var id = id;
function addText(node) {
    node.innerHTML = 'I\'m understand JS!';
}

window.unload = function () {
    var node = document.getElementById(id);
    addText(node);
}();
    
    this.makeYellow = function(){document.getElementById(id).style.backgroundColor = 'yellow';}
    
    this.makeGreen = function(){document.getElementById(id).style.backgroundColor = 'green';}
    
    this.makeRed = function(){document.getElementById(id).style.backgroundColor = 'red';}

}

var l = new Block('left');
l.makeYellow();

var m = new Block('middle');
m.makeRed();

var r = new Block('right');
r.makeGreen();





/*(function() {
	'use strict';

	function addWrapper (node) {
		//
	}

	window.onload = function () {
		var node;

		node = document.getElementById('my-node');
		addWrapper(node);
	}
}()); */