JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="editorWorkspace"></div>

CSS

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
#editorGenerated {
    background-color:red;
}
#editorWorkspace {
    position:relative;
}

JavaScript

window.onload = function () {
    //initialize variables and call setup functions
    var mouseDown = false;
    var mouseDownStartingDrag = false;
    //div that is currently being worked with by user
    var activeDiv = null;
    var defaultColorForShapes = '#ff0000';
    var workspace = document.getElementById('editorWorkspace');

    //set up event listeners and functions
    window.onmousedown = function (e) {
        mouseDown = true;
    };
    window.onmouseup = function (e) {
        mouseDown = false;
        mouseDownStartingDrag = false;
    };
    window.onmousemove = function (e) {
        if (mouseDown == true) {
            var yPos = e.pageY;
            var xPos = e.pageX;
            if (mouseDownStartingDrag != false) {
                //mouse down and user is dragging
                //make the shape bigger
				//console.log('true');
                //var divPosition = parseInt(activeDiv.style.width);
                //get current width of the div as an integer value
                var divPositionX = parseInt(activeDiv.style.width, 10);
                var divPositionY = parseInt(activeDiv.style.height);
                //alert(activeDiv.offsetLeft);
                //parseInt(activeDiv.style.width,10);
                //activeDiv.style.width = ;
                //activeDiv.style.
            } else {
                //mouse has being held down and moved
                //create div element
                //and append at position of drag
                mouseMoveWhileMouseDown = true;
                var shapeDiv = document.createElement('div');
                shapeDiv.style.position = 'absolute';
                shapeDiv.style.left = xPos + 'px';
                shapeDiv.style.top = yPos + 'px';
                shapeDiv.style.width = '50px';
                shapeDiv.style.height = '50px';
                shapeDiv.style.background = defaultColorForShapes;
                shapeDiv.className = 'editorGenerated';
               ...