JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<button id="export">export</button>

<div id="result"></div>

CSS

#map {
    width:300px;
    margin:20px auto;
}

#result {
    position:relative;
    width:300px;
    height:300px;
    margin:20px auto;
    border:solid 1px #888;
}

.row {
    display:-webkit-box;
}
.dot {
    -webkit-box-flex:1;
    -webkit-box-sizing:border-box;
    border:solid 1px #ccc;
    width:10px;
    height:10px;
}

.black {
    background:#000;
}

JavaScript

var Map = new Class({
    
    Implements:[Options, Events],
    options:{
        rows:30, //↓
        cols:30, //→
        id:'map',
        onComplete:function(){}
    },
                    
    initialize:function(element, options){
        this.setOptions(options);
        
        this.container = new Element('div', {'id':this.options.id});
        
        this.container.inject(element,'top');
    },
    
    run:function(){
        var html = '';
        for(r = 0; r < this.options.rows; r++ ){
            for(c = 0; c < this.options.cols; c++){
                if(c === 0){
                    html += '<div id="row-'+r+'" data-row="'+r+'" class="row">';
                }
                
                html += '<div id="col-'+c+'" data-row="'+r+'" data-col="'+c+'" class="dot col"></div>';
                
                if(c === (this.options.cols-1)){
                    html += '</div>';
                }
            }
        }
        
        this.container.set('html', html);
        this.fireEvent('complete', [this.container]);
    }
});

var Palette = new Map($(document.body));

Palette.addEvent('complete', function(c){
    
    c.getElements('.dot').each(function(el){
        
        el.addEvent('click', function(){
            //console.log(this.get('data-row'), this.get('data-col'));
            this.toggleClass('active black');
        });
        
    });
    
});

Palette.run();

$('export').addEvent('click', function(){
    var map = $('map');
    var data = [];
    map.getElements('.active').each(function(el, i){
        var c = el.getCoordinates(map);
        c['className'] = el.get('class').replace(/(dot|active|col|\s)/ig, '');
        data.push(c);
    });
    
    console.log(JSON.stringify(data));
    
    var html = '';
    
    for(i = data.length; i--; ){
        var obj = data[i];
        
        html += '<div style="position:absolute;';
        html += 'top:'+ obj.top +'px;left:'+ obj.left...