HTML, CSS, JavaScript로 BMI 계산기 만들기-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

HTML, CSS, JavaScript로 BMI 계산기 만들기

王林

Aug 09, 2024 am 05:28 AM

Building a BMI Calculator with HTML, CSS, and JavaScript

안녕하세요, 동료 개발자 여러분! 오늘은 제가 최근에 작업한 프로젝트인 BMI(체질량 지수) 계산기를 공유하게 되어 기쁩니다. 이 간단한 웹 애플리케이션은 사용자가 키와 몸무게를 기준으로 BMI를 계산하는 데 도움이 되며 건강 상태를 평가할 수 있는 간단한 방법을 제공합니다. 프로젝트의 세부사항과 그것이 어떻게 구축되었는지 살펴보겠습니다!

프로젝트 개요

BMI 계산기는 사용자가 키(센티미터)와 몸무게(킬로그램)를 입력할 수 있는 사용자 친화적인 도구입니다. 버튼을 한 번만 클릭하면 애플리케이션이 BMI를 계산하고 저체중, 정상 체중, 과체중 또는 비만과 같은 해당 건강 카테고리를 표시합니다.

특징

사용자 입력: 사용자가 입력란에 키와 몸무게를 직접 입력할 수 있습니다.
BMI 계산: 애플리케이션은 표준 공식을 사용하여 BMI를 계산합니다.
건강 카테고리: 계산된 BMI를 기반으로 관련 건강 카테고리를 제공합니다.
반응형 디자인: 계산기는 반응형으로 설계되어 다양한 기기에서 원활한 사용이 가능합니다.

사용된 기술

HTML: 웹페이지 콘텐츠를 구성합니다.
CSS: 애플리케이션의 스타일을 지정하여 깨끗하고 현대적인 모습을 제공합니다.
JavaScript: BMI 계산을 처리하고 DOM을 업데이트하여 결과를 표시합니다.

프로젝트 구조

다음은 프로젝트 구조에 대한 간략한 개요입니다.

BMI-Calculator/
├── index.html
├── style.css
└── script.js

로그인 후 복사

코드 설명

BMI 계산기를 구동하는 코드를 자세히 살펴보겠습니다.

HTML

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>BMI Calculator</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>
<body>
    <div class="header">
        <h1>BMI Calculator</h1>
    </div>
    <div class="container">
        <h1 class="heading">Body Mass Index (BMI)</h1>
        Your Height (cm):
        <input type="number" class="input" id="height" value="180" placeholder="Enter your height in cm">
        Your Weight (kg):
        <input type="number" class="input" id="weight" value="80" placeholder="Enter your weight in kg">
        <button class="btn" id="btn">Compute BMI</button>
        <input disabled type="text" class="input" id="bmi-result">
        <h4 class="info-text">Weight Condition: <span id="weight-condition"></span></h4>
    </div>
    <div class="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
</body>
</html>

로그인 후 복사

CSS

CSS는 페이지 스타일을 시각적으로 매력적이고 사용하기 쉽게 만듭니다. 반응형 요소를 갖춘 현대적이고 깔끔한 디자인이 특징입니다.

body {
    margin: 0;
    background: linear-gradient(to left bottom, lightgreen, lightblue);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
}

.container {
    background: rgba(255, 255, 255, 0.3);
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    margin: 5px;
}

.heading {
    font-size: 30px;
}

.input {
    padding: 10px 20px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
    margin: 10px;
}

.btn {
    background-color: lightgreen;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    margin: 10px;
    font-size: 20px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.btn:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    transition: all 300ms ease;
}

.info-text {
    font-size: 20px;
    font-weight: 500;
}

.header {
    margin: 30px;
    text-align: center;
}

.footer {
    margin: 20px;
    text-align: center;
}

로그인 후 복사

자바스크립트

JavaScript는 사용자 입력을 기반으로 BMI를 계산하고 그 결과로 웹페이지를 업데이트하는 등 애플리케이션의 핵심 기능을 처리합니다.

const btnE1 = document.getElementById("btn");
const resultE1 = document.getElementById("bmi-result");
const weightConditionE1 = document.getElementById("weight-condition");
const heightE1 = document.getElementById("height");
const weightE1 = document.getElementById("weight");

function calculateBMI() {
    const height = heightE1.value / 100;
    const weight = weightE1.value;
    const bmiValue = weight / (height * height);

    resultE1.value = bmiValue.toFixed(2);

    if (bmiValue < 18.5) {
        weightConditionE1.innerText = "Under Weight";
    } else if (bmiValue >= 18.5 && bmiValue <= 24.9) {
        weightConditionE1.innerText = "Normal Weight";
    } else if (bmiValue >= 25 && bmiValue <= 29.9) {
        weightConditionE1.innerText = "Over Weight";
    } else if (bmiValue > 30) {
        weightConditionE1.innerText = "Obesity";
    }
}

btnE1.addEventListener("click", calculateBMI);

로그인 후 복사

라이브 데모

여기에서 BMI 계산기를 실시간으로 사용해 볼 수 있습니다.

결론

이 BMI 계산기를 구축하는 것은 HTML, CSS 및 JavaScript 기술을 향상시키는 보람 있는 경험이었습니다. 이 프로젝트는 단순한 아이디어가 어떻게 사용자가 혜택을 누릴 수 있는 실용적인 도구로 바뀔 수 있는지 보여줍니다. 비슷한 프로젝트를 구축하려고 하든, 아니면 단지 웹 개발을 탐색하든 관계없이 이 튜토리얼이 여러분의 여정에 도움이 되기를 바랍니다. 즐거운 코딩하세요!