JavaScript를 사용하여 개 관리 계산기 만들기-JS 튜토리얼-php.cn

JavaScript를 사용하여 개 관리 계산기 만들기

Linda Hamilton

풀어 주다： 2024-12-27 15:57:15

원래의

301명이 탐색했습니다.

Creating a Dog Care Calculator Using JavaScript

애완동물을 돌보는 것이 때로 부담스러울 때도 있지만 기술은 일을 더 단순하게 만드는 데 도움이 될 수 있습니다. 그러한 도구 중 하나는 애완동물 소유자의 필수 계산을 돕는 개 관리 계산기입니다. 이 블로그에서는 JavaScript를 사용하여 간단한 개 수분 섭취량 계산기를 만드는 방법을 보여 드리겠습니다. 이 가이드는 코딩과 애완동물을 좋아하는 개발자에게 적합합니다!

개 관리 계산기를 만드는 이유는 무엇입니까?

이와 같은 계산기는 일일 물 섭취량, 약물 복용량, 상자 크기 등에 대한 정확한 권장 사항을 제공하여 애완동물 관리를 단순화합니다. 자신만의 도구를 구축하면 학습에 도움이 될 뿐만 아니라 특정 요구사항에 맞게 도구를 맞춤설정할 수도 있습니다.

이 가이드에서는 체중을 기준으로 반려견이 매일 필요한 물의 양을 계산하는 반려견 수분 섭취량 계산기를 만들어 보겠습니다.

영감을 얻으려면 강아지 임신 계산기를 확인하여 다양한 강아지 관리 계산기를 어떻게 구현할 수 있는지 알아보세요.

프로젝트 설정

코드를 살펴보기 전에 프로젝트 파일을 설정하세요.

프로젝트를 위한 새 폴더를 만듭니다.
폴더 안에 세 개의 파일을 만듭니다.
- index.html
- style.css
- script.js

1단계: HTML 구조 생성

계산기의 기본 HTML 레이아웃부터 시작해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dog Water Intake Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>




<hr>

<h2>
  
  
  Step 2: Styling with CSS
</h2>

<p>Now, let’s add some basic styles to make our calculator look clean and user-friendly.<br>
</p>

<pre class="brush:php;toolbar:false">/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

input {
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

p {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
}

로그인 후 복사

3단계: JavaScript 로직 추가

이제 계산기에 기능을 추가할 차례입니다. 강아지의 체중을 기준으로 일일 수분 섭취량을 계산하는 JavaScript 코드를 작성해 보겠습니다.

// script.js
function calculateWaterIntake() {
    const weight = document.getElementById('dogWeight').value;

    // Ensure weight is entered and valid
    if (!weight || weight <= 0) {
        document.getElementById('result').innerText = "Please enter a valid weight.";
        return;
    }

    // Formula: Dog's weight (kg) * 50ml
    const intake = weight * 50;
    document.getElementById('result').innerText = `Your dog needs ${intake} ml of water daily.`;
}

로그인 후 복사