Advertisement
Guest User

Untitled

a guest
Mar 29th, 2017
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function solve() {
  2.     return function (selector, defaultLeft, defaultRight) {
  3.         var element = document.querySelector(selector);
  4.         var documentFragment = document.createDocumentFragment();
  5.  
  6.         defaultLeft = defaultLeft || [];
  7.         defaultRight = defaultRight || [];
  8.  
  9.         var container = document.createElement('div');
  10.         container.className = 'column-container' ;
  11.         container.style.display = "inline-block";
  12.  
  13.         var fruitsColumn = document.createElement('div');
  14.         fruitsColumn.className = 'column';
  15.         var vegetablesColumn = document.createElement('div');
  16.         vegetablesColumn.className= 'column';
  17.  
  18.         var fruitsButtonDIV = document.createElement('div');
  19.         fruitsButtonDIV.className= 'select';
  20.         var fruitsButton = document.createElement('input');
  21.         fruitsButton.type = 'radio';
  22.         fruitsButton.name = 'Fruit';
  23.         fruitsButton.checked = 'checked';
  24.         var fruitsLabel = document.createElement('label');
  25.         fruitsLabel.innerHTML = 'Add here';
  26.         fruitsButtonDIV.appendChild(fruitsButton);
  27.         fruitsButtonDIV.appendChild(fruitsLabel);
  28.         fruitsColumn.appendChild(fruitsButtonDIV);
  29.  
  30.         var vegetablesButtonDIV = document.createElement('div');
  31.         vegetablesButtonDIV.className = 'select';
  32.         var vegetablesButton = document.createElement('input');
  33.         vegetablesButton.type = 'radio';
  34.         vegetablesButton.name = 'Fruit';
  35.         var vegetablesLabel = document.createElement('label');
  36.         vegetablesLabel.innerHTML = 'Add here';
  37.         vegetablesButtonDIV.appendChild(vegetablesButton);
  38.         vegetablesButtonDIV.appendChild(vegetablesLabel);
  39.         vegetablesColumn.appendChild(vegetablesButtonDIV);
  40.  
  41.         var fruits = document.createElement('ol');
  42.         for (var i = 0; i < defaultLeft.length; i += 1) {
  43.             var li = document.createElement('li');
  44.             li.innerHTML = defaultLeft[i];
  45.             li.className= 'entry';
  46.             var img = document.createElement('img');
  47.             img.src = './imgs/Remove-icon.png';
  48.             img.className='delete';
  49.             li.appendChild(img);
  50.             fruits.appendChild(li);
  51.             fruitsColumn.appendChild(fruits);
  52.         }
  53.  
  54.         var vegetables = document.createElement('ol');
  55.         for (var i = 0; i < defaultRight.length; i += 1) {
  56.             var li = document.createElement('li');
  57.             li.innerHTML = defaultRight[i];
  58.             li.className='entry';
  59.             var img = document.createElement('img');
  60.             img.src = './imgs/Remove-icon.png';
  61.             img.className='delete';
  62.             li.appendChild(img);
  63.             vegetables.appendChild(li);
  64.             vegetablesColumn.appendChild(vegetables);
  65.         }
  66.  
  67.         var inputField = document.createElement('input');
  68.         inputField.type = 'text';
  69.         inputField.style.width = '300px';
  70.         var addButton = document.createElement('button');
  71.         addButton.style.width = '50px';
  72.         addButton.style.height = '20px';
  73.        
  74.         addButton.innerText = 'Add';
  75.  
  76.         addButton.addEventListener('click', function () {
  77.             if(inputField.value.match(/[ +]/) || inputField.value === ''){
  78.                 return;
  79.             }
  80.             var newListItem = document.createElement('li');
  81.             newListItem.innerHTML = inputField.value;
  82.             newListItem.className='entry';
  83.             var img = document.createElement('img');
  84.             img.src = './imgs/Remove-icon.png';
  85.             img.className='delete';
  86.             newListItem.appendChild(img);
  87.  
  88.             if (fruitsButton.checked) {
  89.                 fruits.appendChild(newListItem);
  90.                 fruitsColumn.appendChild(fruits);
  91.                 inputField.value = '';
  92.             }
  93.             else {
  94.                 vegetables.appendChild(newListItem);
  95.                 vegetablesColumn.appendChild(vegetables);
  96.                 inputField.value = '';
  97.             }
  98.         });
  99.  
  100.         container.addEventListener('click', function (ev) {
  101.             var target = ev.target;
  102.             if (target.tagName === 'IMG') {
  103.                 target.parentElement.style.display = 'none';
  104.                 inputField.value = target.parentElement.innerText;
  105.             }
  106.         });
  107.  
  108.  
  109.         container.appendChild(fruitsColumn);
  110.         container.appendChild(vegetablesColumn);
  111.  
  112.         documentFragment.appendChild(container);
  113.         documentFragment.appendChild(inputField);
  114.         documentFragment.appendChild(addButton);
  115.  
  116.         element.appendChild(documentFragment);
  117.     };
  118. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement