<div class="calc">
        <h1>Vegan Protein Requirement Calculator</h1>
        <form id="protein-calculator">
            <label for="weight">Weight (lbs):</label>
            <input type="number" id="weight" min="0" step="0.1" required>
            <label for="activity-level">Activity Level:</label>
            <select id="activity-level" required>
                <option value="">Select Activity Level</option>
                <option value="1">Sedentary</option>
                <option value="1.3">Light Activity</option>
                <option value="1.6">Moderate Activity</option>
                <option value="2">High Activity</option>
            </select>
            <button type="submit">Calculate Protein Requirements</button>
        </form>
        <div id="result" style="margin-top: 20px;"></div>
    </div>
  <p style="background-color:black;color:white; margin-top:2.5rem;">
Visit our online T-shirt shop at NiceMMA.com</p>
  <a href="https://nicemma.com/product/fuck-the-tories-t-shirt/"><img class="alignnone wp-image-13518 size-medium" src="https://seoandmma.files.wordpress.com/2022/08/fuckthetoriestshirt.jpg?w=300" alt="Fuck The Tories" width="300" height="300" srcset="https://seoandmma.files.wordpress.com/2022/08/fuckthetoriestshirt.jpg?w=300 300w, https://seoandmma.files.wordpress.com/2022/08/fuckthetoriestshirt.jpg?w=600 600w, https://seoandmma.files.wordpress.com/2022/08/fuckthetoriestshirt.jpg?w=150 150w" sizes="(max-width: 300px) 100vw, 300px"></a>
</body>


   
    

body {
    font-family: Arial, sans-serif;
    background-color: #d3d3d3;
    color: black;
    line-height: 1.5;
}

h1 {
    color: #763d43;
    font-size: 2rem;
    margin-bottom: 20px;
}

.calc {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

input {
    display: block;
    margin-bottom: 10px;
    width: 100%;
    padding: 5px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}

select {
    display: block;
    width: 100%;
    padding: 5px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}

button {
    display: inline-block;
    background-color: #763d43;
    color: white;
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #138a44;
}

#result {
    margin-top: 20px;
}

#result strong {
    color: #1a9e54;
}

document.getElementById("protein-calculator").addEventListener("submit", function (event) {
    event.preventDefault();

    const weight = parseFloat(document.getElementById("weight").value);
    const activityLevel = parseFloat(document.getElementById("activity-level").value);

    if (isNaN(weight) || isNaN(activityLevel)) {
        alert("Please provide valid inputs.");
        return;
    }

    const proteinPerPound = 0.46;
    const proteinRequirement = weight * proteinPerPound * activityLevel;
    const resultDiv = document.getElementById("result");
    
    resultDiv.innerHTML = `Your daily protein requirement is: <strong>${proteinRequirement.toFixed(2)} grams</strong>`;
});