JSFiddle - React, Tailwind, and code Playground

by OwenMelbz

HTML

<div id="project-wrap"></div>

CSS

#project-wrap {
    height: 500px;
    width: 500px;
    border: 1px solid red;
}
.bubble {height: 40px; width:40px; position: absolute;}

JavaScript

var project = "project-love";
var projectname = project;
// add bubble
$('#project-wrap').live('click', function(e) {
    $('#project-wrap').append('<div class="handle"><div class="bubble" id="' + id + '">new bubble</div></div>');
    var posY = (e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY);
    var posX = (e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX);
    $('#' + id).css('left', posX);
    $('#' + id).css('top', posY);
    var hue = 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',0.7)';
    $('#' + id).css("background-color", hue);
    $('.handle').draggableSetup();
/* building ended
time for cookies and data */
    var activecookie = $.cookie(project);
    //id:name:posy:posx:priority:colour
    var BubbleItem = id + ':new bubble:' + posY + ':' + posX + ':4:' + hue + '|';
    if (activecookie === "init") {
        activecookie = BubbleItem;
    }
    else {
        activecookie = activecookie + BubbleItem;
    }
    var cookie2edit = 'project-' + projectname;
    $.cookie(cookie2edit, activecookie, {
        expires: 365
    });
    // Auto Inc The ID Counter
    id++;
});