JavaScript を使用して犬の世話の計算ツールを作成する-jsチュートリアル-php.cn

JavaScript を使用して犬の世話の計算ツールを作成する

Linda Hamilton

リリース： 2024-12-27 15:57:15

オリジナル

300 人が閲覧しました

Creating a Dog Care Calculator Using JavaScript

ペットの世話は時々面倒に感じることがありますが、テクノロジーのおかげで作業が簡単になります。そのようなツールの 1 つは、ペットの飼い主が重要な計算を行うのに役立つ犬の世話の計算ツールです。このブログでは、JavaScript を使用して簡単な犬の水分摂取量計算ツールを作成する方法を紹介します。このガイドは、コーディングとペットの両方を愛する開発者に最適です!

犬の世話の計算ツールを作成する理由

このような計算ツールは、毎日の水の摂取量、薬の投与量、クレートのサイズなどについて正確な推奨事項を提供することで、ペットの世話を簡素化します。独自のツールを構築すると、学習に役立つだけでなく、特定のニーズに合わせてツールをカスタマイズすることもできます。

このガイドでは、犬の体重に基づいて毎日必要な水分量を計算する犬の水分摂取量計算ツールを作成します。

インスピレーションを得るためには、犬の妊娠計算ツールをチェックして、さまざまな犬の世話の計算ツールをどのように実装できるかを確認してください。

プロジェクトのセットアップ

コードに入る前に、プロジェクトファイルを設定します。

プロジェクト用に新しいフォルダーを作成します。
フォルダー内に 3 つのファイルを作成します。
- index.html
- スタイル.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 ロジックの追加

今度は、電卓に機能を追加します。犬の体重に基づいて 1 日の水分摂取量を計算する 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.`;
}

ログイン後にコピー