JSFiddle - React, Tailwind, and code Playground

by Abdrey Katrusha

HTML

<div class="menu" id="see" style="height:200px;"></div>

<h1 class="pvo"> Добавление картинки </h1>

<div class="penel">
    <button class='but' data-attribute="url(http://cs314418.vk.me/v314418541/856e/Q5n3Ku9PO0g.jpg)" id="redScin">
        <img src="http://cs314418.vk.me/v314418541/856e/Q5n3Ku9PO0g.jpg" />Собачка</button>
    <button class='but' data-attribute='url(http://cs417030.vk.me/v417030227/d50/CHLRsDaHNmE.jpg)' id="blueScin">
        <img src="http://cs417030.vk.me/v417030227/d50/CHLRsDaHNmE.jpg" />Котик</button>
    <button class='but' data-attribute='url(https://pbs.twimg.com/profile_images/1295072720/djigurda_normal.jpg)' id="djigurda">
        <img src="https://pbs.twimg.com/profile_images/1295072720/djigurda_normal.jpg" />Ежик</button>
</div>

CSS

.panel {
    border-top: 15px solid black;
}
.menu {
    border: 5px solid black;
    width: 600px;
}
.blockMod, #myid {
    width: 80px;
    height: 80px;
    border: 1px solid;
    margin-top: 9px;
    margin-left: 14px;
    margin-bottom: 5px;
    float: left;
    background-position: center;
    background-repeat: no-repeat;
}
}
button {
    width: 80px;
    height: 80px;
}

JavaScript

var count = 0;
var handler = function (e) {
    var parentElem = document.body.children[0];
    var newDiv = document.createElement('div');
    newDiv.className = 'blockMod';
    newDiv.id = 'myid';
    newDiv.innerHTML = 'Red';
    parentElem.insertBefore(newDiv, parentElem.firstChild);
    var dataAttribute = this.getAttribute('data-attribute');
    document.getElementById("myid").style.backgroundImage = dataAttribute;
     document.getElementById("myid").style.backgroundPosition="center";
    //document.getElementById("myid").style.background = 'no-repeat';
    count++;
    if ((count % 6) === 0) {
        var h1;
        var h = document.getElementById("see").style.height;
        h1 = parseInt(h) + 100 + "px";
        document.getElementById("see").style.height = h1;
    }
}

document.getElementById("redScin").addEventListener("click", handler);
document.getElementById("blueScin").addEventListener("click", handler);
document.getElementById("djigurda").addEventListener("click", handler);