JSFiddle - React, Tailwind, and code Playground

by Maximilian Lindsey

HTML

<div id="workspace" data-bind="foreach:nodeArr, click:addNode">
    <div class="node" data-bind="attr:{id:nodeID},style:{left:nodeX,top:nodeY},text:nodeID, click:$parent.changeColor"></div>
</div>

CSS

#workspace {
    width:400px;
    height:400px;
    background-color:#ccc;
    position: absolute;
}
.node {
    width:50px;
    height:20px;
    color: white;
    background-color:black;
    position: absolute;
}

JavaScript

function ViewModel() {
    var self = this;
    var id = 0;
    self.nodeArr = ko.observableArray();
    self.addNode = function (data, event) {
        self.nodeArr.push({
            'nodeID': 'node' + id,
            'nodeX' : (event.offsetX - 25) + 'px',
            'nodeY' : (event.offsetY - 10) + 'px'
        })
        id++;
    }
    self.changeColor = function(data, event){
        event.stopPropagation();
        event.target.style.color = 'green';
        event.target.style.backgroundColor = 'white';
    }
}
ko.applyBindings(new ViewModel());