Responsive list of icons

by DelphinPRO

HTML

<div class="panel">
  <button id=add>Добавить иконку</button>
  <button id=del>Удалить иконку</button>
</div>
<div class=icons id=icons>
  <div class="icon">
    <img src="http://lorempixel.com/food/100/100/" alt="">
  </div>
</div>

SCSS

/* present styles */
body {
  background: #fff;
  border: 1px solid #CFD6D9;
  min-height: 100vh;
  box-sizing: border-box;
}
.panel {
  padding: 10px;
  background: #F3F5F6;
  border-bottom: 1px solid #CFD6D9;
}

.icons {
  padding: 10px;
}

/* main styles */

.icons {
  display: flex;
}

.icon {
  padding: 5px;
  img {
    width: 100%;
    display: block;
  }
}

@for $i from 1 through 10 {
  .icon:nth-last-child($i):first-child, 
  .icon:nth-last-child($i):first-child ~ .icon {
    width: percentage(1/$i);
  }
}

JavaScript

function createIcon($container) {
	var $icon = $('<div/>', {class: 'icon'});
	var $iconImage = $('<img/>', {
  	src: 'http://lorempixel.com/food/100/100/'
  });
  $iconImage.appendTo($icon);
  $icon.appendTo($container);
}

var $icons = $('#icons');

$('#add').on('click', function(){
  createIcon($icons);
});

$('#del').on('click', function(){
  $icons.find('.icon:last').remove();
});