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;
}
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 dataAtribute = e.target.getAttribute('data-attribute');
     document.getElementById("myid").style.backgroundImage = dataAtribute;
     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;
                
             alert(h1);
          }
     }
    
 document.getElementById("redScin").addEventListener("click", handler);
 document.getElementById("blueScin").addEventListener("click", handler);
 document.getElementById("djigurda").addEventListener("click", handler);