inventory

by dpnminh

HTML

<div id="test">
</div>

CSS

.background{
  background: red;
  width: 100px;
  height:100px;
  position:relative;
}
.background > span{
  background: white;
  height:25px;
  width:100%;
  opacity: 0.5;
  bottom: 0;
  position:absolute;
  text-align: center;
  box-sizing: border-box;
  padding: 5px;
  color: grey;
  font-family: Arial;
  font-size: small;
  
}

ul{
  list-style: none;
}
li{
  margin: 5px;
  flex: 1;
  box-sizing: border-box;
  display:inline-block;
}

JavaScript

function test(){
	var ul = document.createElement('ul');
  for(let i = 0; i<= 10; i++){
  	var li = document.createElement('li');
    var div = document.createElement('div');
    var span = document.createElement('span');
    
    div.setAttribute('class', 'background');
    div.style.background = "blue";
    span.innerHTML = "#43553";
    div.appendChild(span);
    li.appendChild(div);
    ul.appendChild(li);
  }
  
  var div = document.getElementById('test');
  div.appendChild(ul);
  
}

test();