Web

JS 프로젝트 | lb to kg

taenyLog 2023. 6. 18. 07:51
반응형

45 35 25 15 10 LBS의 원판을 바벨에 끼웠을 때 kg으로 변환해줌

상단의 컬러풀한 플레이트 클릭시 바벨의 양쪽에 플레이트가 꽂히는 무게로 계산

 

상단의 35버튼을 클릭했을때 모습
바벨 버튼 클릭시 초기화됨.

html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ConvertLbsToKg</title>
    <link rel="stylesheet" href="convert.css">
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
    />
  </head>
  <body>
      <header class="card-header">
        <h1>LBS TO KG</h1>
      </header>
      <div class="plates">
        <button id="plate45">45</button>
        <button id="plate35">35</button>
        <button id="plate25">25</button>
        <button id="plate15">15</button>
        <button id="plate10">10</button>
      </div>
      <p><span id="totalKgDisplay">20</span>KG</p>
      <div class="platesWithBB">
        <button id="barbell">barbell</button>
        <div id="platesBB"></div>
      </div>

    <!-- 
    <h1><span id="totalKgDisplay">20</span>KG</h1>
    <div class="plates">
      <button id="plate45">45</button>
      <button id="plate35">35</button>
      <button id="plate25">25</button>
      <button id="plate15">15</button>
      <button id="plate10">10</button>
    </div>
    <div class="platesWithBB">
      <button id="barbell">barbell</button>
      <div id="platesBB"></div>
    </div> -->
    <script src="convert.js"></script>
  </body>
</html>

 

js

const totalKgDisplay = document.querySelector("#totalKgDisplay");
const resetBarbell = document.querySelector("#barbell");
const save = document.querySelector("#save");

let totalKg = 20;

// 상단의 플레이트 클릭시 생성되는 버튼
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(`lbs${weight}`);
    document.body.appendChild(btn);
    btns.push(btn);
  }

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

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

// 플레이트를 생성시키고 클릭시 무게가 추가되고 하단에 2개의 버튼이 생김
const addButtonClickListener = (plate) => {
  const { weight, button } = plate;

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

// 상단의 플레이트들
const plates = [
  {
    weight: 45,
    button: document.querySelector("#plate45"),
  },
  {
    weight: 35,
    button: document.querySelector("#plate35"),
  },
  {
    weight: 25,
    button: document.querySelector("#plate25"),
  },
  {
    weight: 15,
    button: document.querySelector("#plate15"),
  },
  {
    weight: 10,
    button: document.querySelector("#plate10"),
  },
];

// 상단의 플레이트에  addButtonClickListener 를 적용시킨다.
plates.forEach(addButtonClickListener);

// 바벨 클릭시 초기화
resetBarbell.addEventListener("click", function () {
  totalKg = 20;
  totalKgDisplay.textContent = totalKg;
  plates.forEach((plate) => {
    const { weight } = plate;
    const buttons = document.querySelectorAll(`.lbs${weight}`);
    buttons.forEach((button) => {
      button.parentNode.removeChild(button);
    });
  });
});

 

 

css

.plates button {
  width: 15%;
  height: 80px;
  border-radius: 50%;
}
#plate45 {
  background-color: blue;
}
#plate35 {
  background-color: yellow;
}
#plate25 {
  background-color: green;
}
#plate15 {
  background-color: grey;
}
#plate10 {
  background-color: red;
}
#barbell{width: 80%;}

 

 

 

 

반응형