JSFiddle - React, Tailwind, and code Playground
by Jose A
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<h5>
Player Search Result
</h5>
<div id="js-player-search-result">
</div>
<h5>Players To Add</h5>
<div id="js-players-to-add">
</div>
</div>
JavaScript
var mockedObject = {
0: {
Id: "encryptedId",
PlayerName: "Night Stucker",
Gamertag: "A, b, c, d"
},
1: {
Id: "encryptedId 2",
PlayerName: "PG Arena",
Gamertag: "mao, ina, kumo"
},
2: {
Id: "encryptedId 3",
PlayerName: "JJA",
Gamertag: "kaoKao"
},
3: {
Id: "encryptedId 4",
PlayerName: "Destructo",
Gamertag: ""
}
};
/*
* Taken from:
* http://stackoverflow.com/a/5660165/1057052
*/
var Handler = (function(){
var i = 1,
listeners = {};
return {
addListener: function(element, event, handler, capture) {
element.addEventListener(event, handler, capture);
listeners[i] = {element: element,
event: event,
handler: handler,
capture: capture};
return i++;
},
removeListener: function(id) {
if(id in listeners) {
var h = listeners[id];
h.element.removeEventListener(h.event, h.handler, h.capture);
}
}
};
}());
function getChildrenCount() {
var result = document.querySelectorAll('#js-players-to-add > div').length;
console.log(result);
return result > 0 ? result - 1 : 0;
}
function getSelectedFromDropDown(element){
return element.options[element.selectedIndex].value;
}
function generateAddButton(){
let elem = document.createElement('button');
elem.setAttribute('class','btn btn-default btn-sm '+jsPlusBtnClass);
elem.innerHTML = "+";
return elem;
}
function generateDropDown(gamertags) {
var csv = gamertags.split(',');
var dropDown = document.createElement('select');
dropDown.setAttribute('class',jsSelectClass);
csv.forEach(element => {
var optionElem = document.createElement('option');
optionElem.setAttribute('value',...