JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div id="controls">
    <div id="purple" class="main"></div>    
</div>
<div id="wrapper"></div>

CSS

body{
	margin:0;
}

.main{
    width: 150px;
    height: 150px;
    background: purple;
}

#controls{
    float: left;
}

#wrapper{
    float: left;
}

.container{
    width: 100px;
    height: 100px;
	background: silver;
	color:black;

   /* float: right;*/
}

JavaScript

/*
document.createElement('node_name'); // for example document.createElement('div'); создаёт элемент div.
node.appendChild(node); // for example document.body.appendChild( document.createElement('div')); 
создаёт элемент div и вставляет его в document.body.
*/
window.onload = function() {
	//конструктор блоков
	function Block(obj) {
		var id = obj.id; 

		//создаем новый блок и добавляем в DOM
		//(function() {

			var container = document.createElement('div');
			container.className = 'container';
	        container.id = id;

	        var wrapper = document.getElementById('wrapper');
			wrapper.appendChild(container);

			var nameOfBlock = document.createElement('div');
			nameOfBlock.className = 'nameOfBlock';
			nameOfBlock.innerHTML = obj.name;



		//}());

		this.addFilter = function() {
			console.log('filter added :) just joking ;)');
		};
		this.getId = function() {
			console.log(id);
		};
		this.makeYellow = function () { 
			document.getElementById(id).style.backgroundColor = 'yellow';
			return this;
		};
		this.makeRed = function () { 
			document.getElementById(id).style.backgroundColor = 'red';
			return this;
		}; 
	} 

	var price = new Block({id:'priceFilter',name: 'Price range'});
	var color = new Block({id:'colorFilter',name: 'Colors'});
	color.makeRed();
	console.log(price);
	price.makeYellow();
	//alert(price);
	color.makeYellow();
};