자바스크립트 코드 중복 줄이기 - 리팩토링

plate는 45 35 25 15 10 5개 가있고 아래의 이벤트리스너를 5개 만들어야하는 상황이였음

plate45.button.addEventListener("click", function () {
  totalKg += plate45.weight;
  totalKgDisplay.textContent = totalKg;
  const btn = document.createElement("BUTTON");
  btn.innerHTML = "45lbs";
  btn.class = "45lbs";
  document.body.appendChild(btn);
  btn.addEventListener("click", function () {
    document.body.removeChild(btn);
    totalKg -= 20 * 2;
    totalKgDisplay.textContent = totalKg;
  });
});


plate35.button.addEventListener("click", function () {
  totalKg += plate35.weight;
  totalKgDisplay.textContent = totalKg;
  const btn = document.createElement("BUTTON");
  btn.innerHTML = "35lbs";
  btn.class = "35lbs";
  document.body.appendChild(btn);
  btn.addEventListener("click", function () {
    document.body.removeChild(btn);
    totalKg -= 15 * 2;
    totalKgDisplay.textContent = totalKg;
  });
});

 

 

 

const createButtonGroup = (weight, count) => {
  const btns = [];

  for (let i = 0; i < count; i++) {
    const btn = document.createElement("button");
    btn.innerHTML = `${weight}lbs`;
    btn.classList.add(`${weight}lbs`);
    document.body.appendChild(btn);
    btns.push(btn);
  }

  const btnClickHandler = () => {
    btns.forEach((btn) => {
      document.body.removeChild(btn);
    });
    totalKg -= weight;
    totalKgDisplay.textContent = totalKg;
  };

  btns.forEach((btn) => {
    btn.addEventListener("click", btnClickHandler);
  });
};

const addButtonClickListener = (plate) => {
  const { weight, button } = plate;

  button.addEventListener("click", () => {
    totalKg += weight;
    totalKgDisplay.textContent = totalKg;
    createButtonGroup(weight, 2);
  });
};

const plates = [
  {
    weight: 20 * 2,
    button: document.querySelector("#plate45"),
  },
  {
    weight: 15 * 2,
    button: document.querySelector("#plate35"),
  },
  {
    weight: 11.34 * 2,
    button: document.querySelector("#plate25"),
  },
  {
    weight: 6.8 * 2,
    button: document.querySelector("#plate15"),
  },
  {
    weight: 4.53 * 2,
    button: document.querySelector("#plate10"),
  },
];

plates.forEach(addButtonClickListener);

코드의 중복을 줄임