JSFiddle - React, Tailwind, and code Playground

by joelkleber

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="app.css">
    </head>
    <body>
        <h1>Shih Tzu Ideal Weight Calculator</h1>
        <label for="ageInput">Enter your Shih Tzu's age (in months):</label>
        <input id="ageInput" type="number" min="0"/>
        <button id="calculateButton" onclick="calculateWeight()">Calculate</button>
        <p id="weightOutput"></p>
        <script src="app.js"></script>
    </body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
}

#weightOutput {
    margin-top: 20px;
}

JavaScript

function calculateWeight() {
    let ageInput = document.getElementById('ageInput');
    let age = ageInput.value;
    let weight;

    if (age < 0) {
        weight = "Invalid age";
    } else if (age <= 2) {
        weight = "Your Shih Tzu's ideal weight is about " + (age * 0.7).toFixed(2) + " pounds.";
    } else if (age <= 12) {
        weight = "Your Shih Tzu's ideal weight is about " + (2 + (age-2) * 0.5).toFixed(2) + " pounds.";
    } else {
        weight = "Your adult Shih Tzu's ideal weight is usually between 9 to 16 pounds.";
    }

    document.getElementById('weightOutput').innerText = weight;
}