RaidGroup

Example for Habrahabr

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<body>
<div>
  <span id="name">Sergey</span>, <span id="country">Russia</span>  <div id="flag1"></div>
  </div>

<div id="mainzone">

</div>


</body>

CSS

#flag {
  display: infine-block;
  height: 15px;
  width: 20px;
  background-size: 20px 15px;
}
#flag1 {
  display: infine-block;
  height: 15px;
  width: 20px;
  background-size: 20px 15px;
}
#playerCard
{
    width:400px;
    display: table;
    border: 2px double black;
}
#playerPhoto
{
    width: 200px;
    height:300px;
    display: table-cell;
    background-position: top center;
    background-size: cover;
}
#playerInfo
{
    width: 200px;
    display: table-cell;
}

JavaScript

function users(n, r, l, p) {
    this.nick = n;
    this.role = r;
    this.level = l;
    this.portrait = p;
}

var userNames = ['Сергей', 'Алексей', 'Анна', 'Николай', 'Даниил', 'Вячеслав', 'Джордж', 'Наталья', 'Татьяна', 'Анастасия', 'Евгений', 'Евгения', 'Марина', 'Мария'];
var userCountry = ['Россия', 'Украина', 'Беларусь', 'Казахстан', 'Великобритания'];
var playerLevels = [];
var userFlag = ['http://uploads.webflow.com/565cb911c193e4557db200d9/565da100af373f6c6d3ff95e_lang-03.jpg'
    ,'http://www.ua.all.biz/img/ua/catalog/767310.jpeg'
    ,'http://www.belarus.by/relimages/000211_72754.jpg'
    ,'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Flag_of_Kazakhstan.svg/500px-Flag_of_Kazakhstan.svg.png'
    ,'http://uploads.webflow.com/565cb911c193e4557db200d9/565da11183428e142745e8e4_lang-05.jpg'];


for (i = 0;i <= 80;i++) {

    playerLevels[i] = i;
}

var players = [];
var cards = [];
var portrets = [];
var infozone = [];
var infos = [];
var mainzone = document.getElementById('mainzone');

    var namerand = Math.floor(Math.random() * userNames.length);
    console.log(namerand);
    var rolerand = Math.floor(Math.random() * (userCountry.length));


    var levelrand = Math.floor(Math.random() * (70 - 60 + 1) + 60);

    players[i] = new users(userNames[namerand], userCountry[rolerand], playerLevels[levelrand], userFlag[rolerand]);
    userNames.splice(namerand,1);
    userCountry.splice(rolerand,1);
    userFlag.splice(rolerand,1);


    cards = document.createElement('div');
    cards.id = 'playerCard';
    mainzone.appendChild(cards);

    portrets = document.createElement('div');
    portrets.id = 'flag';
    $(portrets).css('background-image', 'url('+players[i].portrait+')');
    cards.appendChild(portrets);
  
    infozone = document.createElement('div');
    infozone.id = 'playerInfo';
    cards.appendChild(infozone);

    infos = document.createElement('p');
    infos.innerHTML = '<strong>Nickname:</strong> '+players[i].nick+'<br>' +
    ...