Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function solve() {
- return function (selector, defaultLeft, defaultRight) {
- var element = document.querySelector(selector);
- var documentFragment = document.createDocumentFragment();
- defaultLeft = defaultLeft || [];
- defaultRight = defaultRight || [];
- var container = document.createElement('div');
- container.className = 'column-container' ;
- container.style.display = "inline-block";
- var fruitsColumn = document.createElement('div');
- fruitsColumn.className = 'column';
- var vegetablesColumn = document.createElement('div');
- vegetablesColumn.className= 'column';
- var fruitsButtonDIV = document.createElement('div');
- fruitsButtonDIV.className= 'select';
- var fruitsButton = document.createElement('input');
- fruitsButton.type = 'radio';
- fruitsButton.name = 'Fruit';
- fruitsButton.checked = 'checked';
- var fruitsLabel = document.createElement('label');
- fruitsLabel.innerHTML = 'Add here';
- fruitsButtonDIV.appendChild(fruitsButton);
- fruitsButtonDIV.appendChild(fruitsLabel);
- fruitsColumn.appendChild(fruitsButtonDIV);
- var vegetablesButtonDIV = document.createElement('div');
- vegetablesButtonDIV.className = 'select';
- var vegetablesButton = document.createElement('input');
- vegetablesButton.type = 'radio';
- vegetablesButton.name = 'Fruit';
- var vegetablesLabel = document.createElement('label');
- vegetablesLabel.innerHTML = 'Add here';
- vegetablesButtonDIV.appendChild(vegetablesButton);
- vegetablesButtonDIV.appendChild(vegetablesLabel);
- vegetablesColumn.appendChild(vegetablesButtonDIV);
- var fruits = document.createElement('ol');
- for (var i = 0; i < defaultLeft.length; i += 1) {
- var li = document.createElement('li');
- li.innerHTML = defaultLeft[i];
- li.className= 'entry';
- var img = document.createElement('img');
- img.src = './imgs/Remove-icon.png';
- img.className='delete';
- li.appendChild(img);
- fruits.appendChild(li);
- fruitsColumn.appendChild(fruits);
- }
- var vegetables = document.createElement('ol');
- for (var i = 0; i < defaultRight.length; i += 1) {
- var li = document.createElement('li');
- li.innerHTML = defaultRight[i];
- li.className='entry';
- var img = document.createElement('img');
- img.src = './imgs/Remove-icon.png';
- img.className='delete';
- li.appendChild(img);
- vegetables.appendChild(li);
- vegetablesColumn.appendChild(vegetables);
- }
- var inputField = document.createElement('input');
- inputField.type = 'text';
- inputField.style.width = '300px';
- var addButton = document.createElement('button');
- addButton.style.width = '50px';
- addButton.style.height = '20px';
- addButton.innerText = 'Add';
- addButton.addEventListener('click', function () {
- if(inputField.value.match(/[ +]/) || inputField.value === ''){
- return;
- }
- var newListItem = document.createElement('li');
- newListItem.innerHTML = inputField.value;
- newListItem.className='entry';
- var img = document.createElement('img');
- img.src = './imgs/Remove-icon.png';
- img.className='delete';
- newListItem.appendChild(img);
- if (fruitsButton.checked) {
- fruits.appendChild(newListItem);
- fruitsColumn.appendChild(fruits);
- inputField.value = '';
- }
- else {
- vegetables.appendChild(newListItem);
- vegetablesColumn.appendChild(vegetables);
- inputField.value = '';
- }
- });
- container.addEventListener('click', function (ev) {
- var target = ev.target;
- if (target.tagName === 'IMG') {
- target.parentElement.style.display = 'none';
- inputField.value = target.parentElement.innerText;
- }
- });
- container.appendChild(fruitsColumn);
- container.appendChild(vegetablesColumn);
- documentFragment.appendChild(container);
- documentFragment.appendChild(inputField);
- documentFragment.appendChild(addButton);
- element.appendChild(documentFragment);
- };
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement