자바스크립트로 BMI 계산기 구현하기

강의를 보고 난 후 혼자 정리하는 느낌이라.. 조금 조잡하고 설명이 정확하지 않을 수 있습니다
HTML,CSS는 강의자료로 받았고, 기능만 구현했습니다.

---

완성본

---

기능 설명

1. 몸무게와 신장을 입력하면 계산을 통해서 bmi 수치를 알려줌
2. meter 라는 태그를 활용해, 프로그래스바 를 구현함
3. 초기화 버튼을 클릭 시 리셋이 되는 기능 구현

---

HTML 과 CSS

강의 자료이기때문에, 참고용으로 보시라고 캡쳐본으로 올립니다

index.html

style.css

---

기능 구현하기

submit 을 했을 때, 기능이 돌아가는 구조입니다.

 

submit 할 때 기본 브라우저 기능 막기

const onSubmit = (event) => {
    event.preventDefault()
}

 

Input 에 작성한 값 변수에 저장하기

const onSubmit = (event) => {
    event.preventDefault()
    
    const w = parseFloat(event.target[0].value)
    const h = parseFloat(event.target[1].value)
}

w : weight (몸무게)
h : height (신장)

parseFloat()
- 문자열을 실수로 바꾸는 함수
- 수가 아닌 문자로 시작하면 NaN을 반환
- 공백으로 시작하면 공백을 무시함
- 띄어쓰기로 여러 개의 수가 있으면 첫 번째 수만 바꿈

event 를 console.log 로 찍었을 때 target

event.target[0] 과 event.target[1] 을 console.log 로 찍어본 모습

 

몸무게와 신장이 숫자가 아니거나, 입력한 값이 0 이하일 경우

const onSubmit = (event) => {
    event.preventDefault()

    const w = parseFloat(event.target[0].value)
    const h = parseFloat(event.target[1].value)

    if(isNaN(w) || isNaN(h) || w <= 0 || h <= 0){
        alert("적절한 값이 아닙니다")
        return;
    }// 숫자가 둘 중에 하나라도 아닐 경우 + 입력한 값이 0 이하일 경우
}

1. isNaN()을 사용해, 몸무게와 신장을 입력한 값이 숫자형이 아닐 경우
2. 몸무게와 신장이 0보다 낮은 값을 입력했을 경우
=> alert 메소드를 활용해, 적절한 값이 아니라고 알림이 나오게함.

 

bmi 값 계산하기

const onSubmit = (event) => {
    event.preventDefault()

    const w = parseFloat(event.target[0].value)
    const h = parseFloat(event.target[1].value)

    if(isNaN(w) || isNaN(h) || w <= 0 || h <= 0){
        alert("적절한 값이 아닙니다")
        return;
    }

    const bmi = w / (h*h) // bmi 값 계산
}

bmi 수치를 계산하는 방법은 자신의 몸무게(kg)를 키의 제곱(m)으로 나눈 값입니다.

 

bmi 값 계산이 완료되면, bmi 결과를 UI에 보여주기

const onSubmit = (event) => {
    event.preventDefault()

    const w = parseFloat(event.target[0].value)
    const h = parseFloat(event.target[1].value)

    if(isNaN(w) || isNaN(h) || w <= 0 || h <= 0){
        alert("적절한 값이 아닙니다")
        return;
    }// 숫자가 둘 중에 하나라도 아닐 경우 + 입력한 값이 0 이하일 경우

    const bmi = w / (h*h)

    const res = document.getElementById("res")
    res.style.display = "flex"

    document.getElementById("bmi").innerText = bmi.toFixed(2)
    document.getElementById("meter").value = bmi

}

1. 원래는 display = "none" 이였다가, flex 로 바꿔주면서, ui 에 보여주도록 함.
2. bmi 수치를 toFixed()를 사용해줘서 소수점 2자리까지만 보여주도록 한다.
3. meter 태그의 value 를 bmi 수치로 줘서, 프로그래스바가 활성화되도록 한다.

 

bmi 계산한 결과값에 따라서 상태와 텍스트 컬러 변경하기

const onSubmit = (event) => {
    event.preventDefault()

    const w = parseFloat(event.target[0].value)
    const h = parseFloat(event.target[1].value)

    if(isNaN(w) || isNaN(h) || w <= 0 || h <= 0){
        alert("적절한 값이 아닙니다")
        return;
    }// 숫자가 둘 중에 하나라도 아닐 경우 + 입력한 값이 0 이하일 경우

    const bmi = w / (h*h)

    const res = document.getElementById("res")
    res.style.display = "flex"

    document.getElementById("bmi").innerText = bmi.toFixed(2)
    document.getElementById("meter").value = bmi
    
    let state = "정상"
    let common = true
    if(bmi < 18.5){
        state = "저체중"
        common = false;
    }
    if(bmi >= 25){
        state = "과체중"
        common = false;
    }

    const stateEl = document.getElementById("state")
    stateEl.innerText = state
    stateEl.style.color = common ? "#29ff21" : "#ff3a3a"
}

1. state = "정상" 으로 기본 값 주기 (state 는 상태를 보여주기 위한 용도)
2. common = true 으로 기본 값 주기 (common은 정상인지, 비정상인지 체크용도)
3. 조건문을 활용해 저체중일 때와 과체중일 때를 나뉘어서 state 와 common 값을 변경해주도록 함.
4. state 값을 결과에 따라서 UI에 보여줌
5. state가 비정상일 경우에는 빨간색 폰트 컬러, 정상일 경우에는 그린 컬러를 주도록 함.

---

전체 기능 구현 코드