JSFiddle - React, Tailwind, and code Playground

by stuartmemo

HTML

<div id="container"></div>

JavaScript

var keys = document.querySelectorAll('.key'),
    container = document.getElementById('container'),
    no_keys = 10,
    key_style = 'height: 60px;width: 30px; background: white; -webkit-user-select: none; list-style: none; padding: 0; margin: 0; display: inline-block; border-left: 1px solid black;',
    mouse_is_down = false,
    list = document.createElement('ul');

container.style.width = '400px';
container.style.height = '100px';
container.style.border = '0px solid black';
list.style.padding = 0;
list.style.margin = 0;

var getWidthOfKeys = function (keyboard_width, no_keys) {
    return Math.floor(keyboard_width / no_keys);
};

var mouseDown = function () {
    this.style.backgroundColor = 'pink';
    mouse_is_down = true;
};

var mouseUp = function () {
    this.style.backgroundColor = 'grey';
    mouse_is_down = false;
};

var mouseOver = function () {
    if (mouse_is_down) {
        this.style.backgroundColor = 'pink';
    } 
};

var mouseOut = function () {
    this.style.backgroundColor = 'grey';
};

for (var i = 0; i < no_keys; i++) {
    var key = document.createElement('li');
    key.style.cssText = key_style;
    
    if (i === no_keys - 1) {
        console.log('hui');
        key.style.borderRight = '1px solid';
    }
    
    key.addEventListener('mousedown', mouseDown);
    key.addEventListener('mouseup', mouseUp);
    key.addEventListener('mouseover', mouseOver);
    key.addEventListener('mouseout', mouseOut);
    list.appendChild(key);
}

container.appendChild(list);