waiting-list-advanced.js

const ManageWaitingList = {
  init() {
    this.waitingList = [];
    this.buttons = document.querySelectorAll("button");
    this.input = document.querySelector("input");
    this.waitingListContainer = document.getElementById("waiting-list");
    this.bindEvents();
    this.onLoad();
  },
  addPeople(people) {
    if (Array.isArray(people)) {
      people.forEach(function(person, index) {
        waitingList.push(person);
      });
    } else {
      waitingList.push(people);
    }
  },
  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);
    }
  },
  updateWaitingList() {
    var waitingListHtml = "";
    waitingList.forEach(function(person, index) {
      waitingListHtml += "<li>" + person + "</li>";
    });
    this.waitingListContainer.innerHTML = waitingListHtml;
  },
  buttonClicked(e) {
    var people = this.input.value;

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

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

      if (e.target.className === "remove") {
        this.removePeople(people);
        this.updateWaitingList();
      }
    } else {
      alert("Please enter a name");
    }
  },
  bindEvents() {
    for (var i = 0; i < this.buttons.length; i++) {
      this.buttons[i].addEventListener("click", this.buttonClicked.bind(this));
    }
  },
  onLoad() {
    window.onload = function() {};
  }
};

ManageWaitingList.init();