dev-resources.site

for different kinds of informations.

Dog RER & MER Calculator

Published at

1/13/2025

HTML Structure 🖥️

The Boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Calculate your dog's Resting Energy Requirement (RER) and Maintenance Energy Requirement (MER)...">
    <meta name="keywords" content="dog RER calculator, dog MER calculator, dog nutrition, pet calorie calculator, resting energy requirement, maintenance energy requirement">
    <meta name="author" content="Your Website Name">
    <title>Dog RER and MER Calculator</title>
</head>
<body class="rer-body">

The code starts with standard HTML5 structure. The <meta> tags are essential for SEO and describe the content of the page.
The <title> tag helps search engines and browsers understand the topic of the page.

The Form Elements:

<label for="weight" class="rer-label">Dog's Weight (in kg):</label>
<input type="number" id="weight" class="rer-input" placeholder="Enter your dog's weight" required>

The user enters the weight in a <input> field of type number, ensuring only numeric values are accepted.
The required attribute ensures the input must be filled before submission.

CSS Styling for Layout and Responsiveness 🎨

We used CSS to style the calculator and ensure it looks great on all screen sizes. Here's the breakdown of the CSS applied:

body.rer-body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

The body has a light background color, padding for spacing, and a consistent font for readability.

h1.rer-heading {
    text-align: center;
    color: #2a9d8f;
    margin-bottom: 20px;
    font-size: 28px;
}

The heading is styled to be centered, with a teal color and appropriate spacing.

JavaScript Functionality for Calculations 📊

Here’s where the core functionality lies. This script takes the inputs, performs calculations, and displays results dynamically.

function calculateRER() {
    const weight = parseFloat(document.getElementById('weight').value);
    const age = document.getElementById('age').value;
    const activity = document.getElementById('activity').value;

    if (isNaN(weight) || weight <= 0) {
        errorMessage.innerHTML = 'Please enter a valid weight greater than zero.';
        errorMessage.style.display = 'block';
        return;
    }

    const rer = 70 * Math.pow(weight, 0.75);
    let lifeStageMultiplier = 1.6;

    if (age === 'puppy') lifeStageMultiplier = 3.0;
    if (age === 'senior') lifeStageMultiplier = 1.2;
    if (activity === 'moderate') lifeStageMultiplier *= 1.2;
    if (activity === 'high') lifeStageMultiplier *= 1.4;

    const mer = (rer * lifeStageMultiplier).toFixed(2);

    resultDiv.innerHTML = `
        <p><strong>Dog's Weight:</strong> ${weight} kg</p>
        <p><strong>Life Stage:</strong> ${age}</p>
        <p><strong>Activity Level:</strong> ${activity}</p>
        <p><strong>Resting Energy Requirement (RER):</strong> ${rer.toFixed(2)} kcal/day</p>
        <p><strong>Maintenance Energy Requirement (MER):</strong> ${mer} kcal/day</p>
    `;
    resultDiv.style.display = 'block';
}

Code Explanation:

We start by extracting the input values (weight, life stage, and activity level) from the HTML form.
We check if the weight is valid (isNaN(weight) ensures it's a number and weight <= 0 prevents non-positive numbers).
The Resting Energy Requirement (RER) is calculated using the formula: 70 * weight^0.75.
Based on the life stage (puppy, adult, or senior) and activity level (low, moderate, high), we adjust the Maintenance Energy Requirement (MER) with multipliers.
Finally, we display the results dynamically in the rer-result div.

Testing the Code 🧪

You can test the code live by clicking here 🧑‍💻. It’s a great way to see the calculations in action and check if everything works as expected.

How to Improve This Code 💡

Feel free to improve the code! Here are some areas where you might enhance its functionality:

Improve Input Validation: Ensure all fields are validated thoroughly, and provide user-friendly error messages.
Unit Conversion: Allow the user to switch between metric and imperial units for weight and activity level.
Responsive Design Enhancements: Ensure the design adapts even better to smaller screens (e.g., mobile devices).
Feature Addition: Add additional fields like breed or age in months for more precise calculations.

Let me know your suggestions for improvement in the comments below! 👇

By following these detailed steps, you can understand the code, tweak it, and even contribute to making it better. Happy coding! 🎉

css Article's

30 articles in total

[Boost]

read article

Struggling with WordPress Navigation Menu Issue in Development

read article

Truncating Text with Text-Overflow

read article

Resolving Auto-Scroll issues for overflow container in a Nuxt app

read article