JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="text" name="barvy" id="barvy">
    <div id="nabidkaBarev" style="height: 200px;"></div>
    <input type="submit">
</form>

JavaScript

// TODO sem přidej seznam všech barev 
var barvy = {
    'red': 'červená',
    'blue': 'modrá',
    'green': 'zelená'
};

function pridejOdeber(event) {
    event = event || window.event;
    var ctverec = event.target ? event.target : event.srcElement;
    var barva = ctverec.id;
    
    var input = document.getElementById('barvy');
    var pole = input.value.length == 0 ? [] : input.value.split(",");
    
    var index = pole.indexOf(barva);
    if (index >= 0) {
        pole.splice(index, 1);
        input.value = pole.join(',');
        ctverec.style.width = '100px';
        ctverec.style.height = '100px';
        ctverec.innerHTML = "přidej " + barvy[barva];
    } else {
        pole.push(barva);
        input.value = pole.join(',');
        ctverec.style.width = '200px';
        ctverec.style.height = '200px';
        ctverec.innerHTML = "odeber " + barvy[barva];
    }
}

var input = document.getElementById('barvy');
input.value = '';
// následující řádek zakomentuj, aby uživatel neviděl input, ale jen nabídku barev
// input.style.display = 'none';
var nabidka = document.getElementById('nabidkaBarev');
for (var barva in barvy) {
    var ctverec = document.createElement("div");
    ctverec.id = barva;
    ctverec.innerHTML = "přidej " + barvy[barva];
    ctverec.style.background = barva;
    ctverec.style.width = '100px';
    ctverec.style.height = '100px';
    ctverec.style.cssFloat = 'left';
    ctverec.onclick = pridejOdeber;
    nabidka.appendChild(ctverec);
}