IDE installer

by Bilal Zafar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="installer">
      <div class="data">
        <div class="left-box box container"></div>
      
        <div class="container-buttons container"> 
          <button id="toRight" class="left button-arrow">
            <div class="icon left-arrow"></div>
          </button>
          <button id="toLeft" class="right button-arrow"> 
            <div class="icon right-arrow"></div>
          </button>
        </div>

        <div class="right-box box container"></div>
      </div>

      <div class="install-button">
        <button id="install"> Install </button>
      </div>
    </div>

CSS

body {
  padding: 15px;
  text-align: center;
  color: black;
  font-family: Arial, Helvetica, sans-serif;  
}

.box {
  box-shadow: 2px 2px 4px 1px #bbb;
}

.container {
  flex: 3;
  margin: 3px;
  padding: 10px;   
}

.container-buttons {
	flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.data {
	flex-direction: row;
  display: flex;

}
.installer {
  flex-direction: column;
  max-width: 500px;
}

.right-arrow {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iIAogICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIKICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAJPGcgaWQ9ImFycm93LWJhY2siPjxwYXRoIGQ9Ik0yMCwxMUg3LjhsNS42LTUuNkwxMiw0bC04LDhsOCw4bDEuNC0xLjRMNy44LDEzSDIwVjExeiIvPjwvZz4KPC9zdmc+Cgo=);
  
}

.left-arrow {
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iIAogICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIKICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KCTxnIGlkPSJhcnJvdy1mb3J3YXJkIj48cG9seWdvbiBwb2ludHM9IjEyLDQgMTAuNiw1LjQgMTYuMiwxMSA0LDExIDQsMTMgMTYuMiwxMyAxMC42LDE4LjYgMTIsMjAgMjAsMTIgIi8+PC9nPgo8L3N2Zz4KCg==);
 
}

.icon {
  height: 25px;    
  width: 25px;  
}

.button-arrow {
	height: 40px;   
  width: 50px; 
  
  margin: 3px;  
  display: flex;
  align-items: center;
  justify-content: center;
 
}

.item {
  user-select: none;
  padding: 2px;
  margin: 6px;
  border-bottom: 3px solid transparent;
}

.item.picked {
  border-bottom: 3px solid red; 
  background-color: rgba(200, 0, 0, 0.1);
}

.item:hover {
  cursor: pointer;
}

.install-button {
 ...

JavaScript

let picked = null;

const leftLibs = [
  {
    id: 1,
    name: 'express'
  },
  {
    id: 2,
    name: 'async'
  },
  {
    id: 3,
    name: 'request'
  },
  {
    id: 4,
    name: 'browserify'
  },
  {
    id: 5,
    name: 'grunt'
  }
];

const rightLibs = [
  {
    id: 6,
    name: 'socket.io'
  },
  {
    id: 7,
    name: 'mocha'
  }
];

function pickLib(lib) {
  //TODO: implement
}

function libToRight() {
  //TODO: implement
}

function libToLeft() {
  //TODO: implement
}

function install() {
  //TODO: implement
}

function fillContainer(listLibs, classContainerName) {
  listLibs.sort((e1, e2) => {return (e1.id - e2.id);});
  
  const container = document.querySelector('.' + classContainerName);
  while (container.firstChild) {
    container.removeChild(container.firstChild);
  }
  listLibs.forEach(lib => {
    const libElement = document.createElement('div');
    libElement.className = classContainerName + '-item item';
    libElement.innerHTML = lib.name;
    
    if (picked === lib.id) {
      libElement.classList.add("picked");
    }

    libElement.onclick = () => pickLib(lib);
    container.appendChild(libElement);
  });
}


function render() {
  fillContainer(leftLibs, 'left-box');
  fillContainer(rightLibs, 'right-box');
}


document.querySelector('#toRight').addEventListener('click', libToRight);
document.querySelector('#toLeft').addEventListener('click', libToLeft);
document.querySelector('#install').addEventListener('click', install);


render();