dom-manipulation

/*
  Hi there! Thanks for taking on this code test. The requirements are listed below:
  
  1. Create a "Foods" class or constructor that will take two arguements: a root element and a data object (foodData).
  2. Render all of the items in the data object into the DOM with the root element as the parent
  3. If the user clicks a food item, it should be removed from the list
  
  Rules:
  - Only vanilla JS
  - Feel free to use Google, Bing, DuckDuckGo to look things up
  - Time limit: 30 minutes
*/

/* DO NOT MODIFY */
const rootElement = document.querySelector(".foods");

const foodData = [
  {
    id: 1,
    image: "🌮",
    name: "taco"
  },
  {
    id: 2,
    image: "🍔",
    name: "burger"
  },
  {
    id: 3,
    image: "🍆",
    name: "eggplant"
  },
  {
    id: 4,
    image: "🍎",
    name: "apple"
  },
  {
    id: 5,
    image: "🥞",
    name: "pancakes"
  }
];
/* DO NOT MODIFY */

/** YOUR CODE BELOW **/
class Foods {
  constructor(root, data) {
    this._root = root;
    this._data = [...data];
    this._displayedData = this._data;
  }

  renderList() {
    this._root.innerHTML = "";

    this._root.addEventListener("click", event => {
      const { target } = event;
      const key = target.getAttribute("data-key");

      this._displayedData = this._displayedData.filter(item => item.id !== key);
      this.renderList();
    });

    const fragment = document.createDocumentFragment();

    this._displayedData.forEach(item => {
      fragment.appendChild(this.createFoodItem(item));
    });

    this._root.appendChild(fragment);
  }

  createFoodItem(item) {
    const itemEl = document.createElement("div");
    itemEl.innerText = item.image + " " + item.name;
    itemEl.setAttribute("data-key", item.id);

    return itemEl;
  }
}

const foods = new Foods(rootElement, foodData);
foods.renderList();