ایجاد ماشین حساب مراقبت از سگ با استفاده از جاوا اسکریپت

مرحله 2: استایل دادن با CSS

اکنون، بیایید چند سبک اساسی اضافه کنیم تا ماشین حساب ما تمیز و کاربر پسند به نظر برسد.

/* 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: اضافه کردن منطق جاوا اسکریپت

اکنون زمان آن است که قابلیت ها را به ماشین حساب خود اضافه کنیم. ما کد جاوا اسکریپت را برای محاسبه میزان مصرف آب روزانه بر اساس وزن سگ می نویسیم.

// 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.`;
}

مرحله 4: تست ماشین حساب

برای تست ماشین حساب:

1. را باز کنید index.html فایل در یک مرورگر
2. وزن سگ خود را بر حسب کیلوگرم وارد کنید.
3. برای مشاهده میزان مصرف آب توصیه شده روی دکمه “محاسبه” کلیک کنید.

مرحله 5: افزایش ماشین حساب (اختیاری)

در اینجا چند ایده برای بهتر کردن ماشین حساب شما وجود دارد:

• تبدیل واحد: به کاربران اجازه دهید وزن را به پوند وارد کرده و آن را به کیلوگرم تبدیل کنند.
• بهبود استایل: برای بهبود تجربه کاربری، آیکون ها یا انیمیشن ها را اضافه کنید.
• محاسبات چندگانه: برگه ها یا گزینه هایی را برای ماشین حساب های دیگر مانند بخش های غذا یا دوز دارو اضافه کنید.

نتیجه گیری

تبریک می گویم! شما به تازگی با استفاده از جاوا اسکریپت یک ماشین حساب ساده و کاربردی برای مصرف آب سگ ساخته اید. این پروژه نه تنها به صاحبان حیوانات خانگی کمک می کند تا از سگ های خود مراقبت کنند، بلکه مهارت های کدنویسی شما را نیز تقویت می کند.

اگر این را مفید یافتید، ماشین‌حساب‌های پیشرفته‌تر را در Frontendin.com بررسی کنید. سفارشی سازی ها یا ایده های خود را در نظرات زیر به اشتراک بگذارید!