🙂BMI 계산기

✏️기능개발

BMI 계산기 기능개발에는 크게 세가지 목표가 존재한다.

• 01 계산 버튼을 클릭했을때 조건문을 통해서 해당 결과를 출력하는것
• 02 화살표가 결과에 따라 결과값으로 이동하는 애니메이션
• 03 초기화 버튼을 클릭했을때 0으로 돌아오는것

위 목표에 따라 기능개발을 하기 시작했다.

01. 공백란 검사하기

먼저 조건문을 이용해 **INPUT**에 적절한 값이 작성되었는지 공백란 검사를 해주었다.

var height = document.getElementById('height');
var weight = document.getElementById('weight');

document.querySelector('#answer').addEventListener('click', function(){
  let hgv = height.value; // 신장 입력값 받아오기
  let wgv = weight.value; // 체중 입력값 받아오기

  // 공백란 확인 하기
  if(hgv == ''|| isNaN(hgv)){
    alert('올바른 신장을 입력하세요');
  }
  else if(wgv == '' || isNaN(wgv)){
    alert('올바른 체충을 입력하세요');
  }
  // 인풋값이 숫자가 아닐경우에 경고창 띄우기

02. bmi계산식 만들기

변수에 필요한 식을 할당하여 조건식으로 진행시킬것을 준비한다.

// bmi 계산 식
let bmi =(wgv / (hgv * hgv) * 10000).toFixed(1);


// 프로그레스 바
const progressEl = document.getElementById("bmi-progress");
progressEl.value = bmi;


// 포인터
const point = document.getElementById('pointer');

let bmiR = document.getElementById('koR');
const bmiN = document.getElementById('numR');

03. 조건문 작성하기

위에서 변수에 할당한것을 가지고 필요한 조건식을 작성해 충족하도록 한다.

// bmi 범위 설정
if (bmi <= 18.5) {
  progressEl.classList.add('under');
  const pt = progressEl.value = (bmi / 18.5 * 25).toFixed(1); 
  // 0부터 해당 값까지 채우도록 수정
  
  point.style.left = `${pt}%`;
  // 위에서 받아온 값 만큼 화살표가 이동
  
  bmiR.innerHTML = bmi;
  bmiN.innerHTML = '저체중 입니다.';
}
else if (bmi <= 22.9) {
  progressEl.classList.add('normal');
  const pt = progressEl.value = ((bmi) / 22.9 * 50).toFixed(1); 
  // 25부터 해당 값까지 채우도록 수정
  
  point.style.left = `${pt}%`;
  bmiR.innerHTML = bmi;
  bmiN.innerHTML = '정상 입니다.';
}
else if (bmi <= 30) {
  progressEl.classList.add('over');
  const pt = progressEl.value = ((bmi) / 30 * 75).toFixed(1); 
  // 50부터 해당 값까지 채우도록 수정
  
  point.style.left = `${pt}%`;
  bmiR.innerHTML = bmi;
  bmiN.innerHTML = '경도비만 입니다.';
}
else if (bmi <= 40) {
  progressEl.classList.add('last');
  const pt = progressEl.value = ((bmi) / 40 * 100).toFixed(1);; 
  // 75부터 해당 값까지 채우도록 수정
  
  point.style.left = `${pt}%`;
  bmiR.innerHTML = bmi;
  bmiN.innerHTML = '중증도 비만 입니다.';
}
else {
  progressEl.classList.add('last');
  console.log('측정불가');
}

• const pt = progressEl.value = (bmi / 18.5 * 25).toFixed(1);
  프로그래스 바의 전체값을 4등분 하여 정확히 1/4 되는 부분만 bmi 영역으로 두고
  저체중일때는 그 영역 안에서만 화살표가 진행되어야 하기 때문에 위와 같은 식을 작성했다.

✨결과