waiting-list-basic.js

// This is the usual approach to creating functions in JS
var waitingList = [];
var buttons = document.querySelectorAll("button");
var input = document.querySelector("input");
var waitingListContainer = document.getElementById("waiting-list");

function addPeople(people) {
  if (Array.isArray(people)) {
    people.forEach(function(person, index) {
      waitingList.push(person);
    });
  } else {
    waitingList.push(people);
  }
}

function removePeople(people) {
  if (Array.isArray(people)) {
    people.forEach(function(person, index) {
      index = waitingList.indexOf(person);
      waitingList.splice(index, 1);
    });
  } else {
    index = waitingList.indexOf(people);
    waitingList.splice(index, 1);
  }
}

function updateWaitingList() {
  var waitingListHtml = "";
  waitingList.forEach(function(person, index) {
    waitingListHtml += "<li>" + person + "</li>";
  });
  waitingListContainer.innerHTML = waitingListHtml;
}

function bindEvents() {
  for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener("click", function(e){
        var people = input.value;

        if (people.includes(",")) {
          people = people.split(",");
        }

        if (people !== "") {
          if (e.target.className === "add") {
            addPeople(people);
            updateWaitingList();
          }

          if (e.target.className === "remove") {
            removePeople(people);
            updateWaitingList();
          }
        } else {
          alert("Please enter a name");
        }
      });
    }
}

bindEvents();