main.js
/**
 * Create and append a DOM node for a developer
 * @param {*} person The dev for which to create a DOM node for
 */
Create and append a DOM node for a developer
@param {*} person The dev for which to create a DOM node for
Create and append a DOM node for a developer @param { * } person The dev for which to create a DOM node for
function createElement(person) {
  let personElement = document.createElement("div");
  personElement.className = "person-element row align-items-center border no-border-sm rounded p-3 mb-3";
  let nameElement = document.createElement("div");
  nameElement.className = "person__name col-4 col-md-8 h3";
  nameElement.innerHTML = person.name;
  let teamElement = document.createElement("div");
  teamElement.className = "person__team text-center col-5 col-md-2";
  let teamSelect = document.createElement("select");
  teamSelect.className = "custom-select";
  teamSelect.name = "team";
  let option1 = document.createElement("option");
  option1.value = "Core";
  option1.text = "Core";
  option1.selected = person.team === "Core";
  let option2 = document.createElement("option");
  teamSelect.add(option1);  
  option2.value = "Sparkles";
  option2.text = "Sparkles";
  option2.selected = person.team === "Sparkles";  
  teamSelect.add(option2);
  let dayElement = document.createElement("div");
  dayElement.className = "person__days text-center col-3 col-md-2";
  let dayInput = document.createElement("input");
  dayInput.className = "form-control js-person-days";
  dayInput.type = "number";
  dayInput.placeholder = "0";
  dayInput.step = ".5";
  dayInput.min = "0";
  dayInput.max = "10";
  dayInput.value = person.days;
  personElement.appendChild(nameElement);
  personElement.appendChild(teamElement);
  teamElement.appendChild(teamSelect);
  personElement.appendChild(dayElement);
  dayElement.appendChild(dayInput);
  pageContainer.appendChild(personElement);
}
function createElement ( person ) { let personElement = document . createElement ( "div" ) ; personElement . className = "person-element row align-items-center border no-border-sm rounded p-3 mb-3" ; let nameElement = document . createElement ( "div" ) ; nameElement . className = "person__name col-4 col-md-8 h3" ; nameElement . innerHTML = person . name ; let teamElement = document . createElement ( "div" ) ; teamElement . className = "person__team text-center col-5 col-md-2" ; let teamSelect = document . createElement ( "select" ) ; teamSelect . className = "custom-select" ; teamSelect . name = "team" ; let option1 = document . createElement ( "option" ) ; option1 . value = "Core" ; option1 . text = "Core" ; option1 . selected = person . team === "Core" ; let option2 = document . createElement ( "option" ) ; teamSelect . add ( option1 ) ; option2 . value = "Sparkles" ; option2 . text = "Sparkles" ; option2 . selected = person . team === "Sparkles" ; teamSelect . add ( option2 ) ; let dayElement = document . createElement ( "div" ) ; dayElement . className = "person__days text-center col-3 col-md-2" ; let dayInput = document . createElement ( "input" ) ; dayInput . className = "form-control js-person-days" ; dayInput . type = "number" ; dayInput . placeholder = "0" ; dayInput . step = ".5" ; dayInput . min = "0" ; dayInput . max = "10" ; dayInput . value = person . days ; personElement . appendChild ( nameElement ) ; personElement . appendChild ( teamElement ) ; teamElement . appendChild ( teamSelect ) ; personElement . appendChild ( dayElement ) ; dayElement . appendChild ( dayInput ) ; pageContainer . appendChild ( personElement ) ; }
Create and append a DOM node for a developer
 @param {*} person The dev for which to create a DOM node for
Create and append a DOM node for a developer @param { * } person The dev for which to create a DOM node for