🍽️ “Build Your Plate” Carbon Footprint Calculator
Add items to your virtual plate to calculate the total greenhouse gas emissions of your meal.
1. Choose Food:
Beef (Beef Herd)
Lamb & Mutton
Beef (Dairy Herd)
Farmed Crustaceans (Shrimp/Prawns)
Farmed Fish
Wild-Caught Fish
Pork (Pig Meat)
Poultry (Chicken/Turkey)
Eggs
Cheese
Milk (Dairy Cows)
Palm Oil
Sunflower Oil
Olive Oil
Rice
Wheat & Rye
Maize (Corn)
Potatoes
Tomatoes
Bananas
Apples
Root Vegetables (Carrots/Onions)
Tofu (Soybeans)
Groundnuts (Peanuts)
Peas & Beans
Tree Nuts (Almonds/Walnuts)
2. Weight (grams):
Your Plate Summary:
- Your plate is currently empty. Add items above!
Total Carbon Footprint:
0.00 kg CO₂e
Add food to see the driving distance equivalent.
#plate-calc-container {
max-width: 650px;
margin: 20px auto;
padding: 25px;
background: #fdfdfd;
border: 1px solid #e2e8f0;
border-radius: 14px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}
#plate-calc-container h3 {
margin-top: 0;
color: #1e3a8a;
font-size: 1.4rem;
border-bottom: 2px solid #eff6ff;
padding-bottom: 10px;
}
.calc-instructions {
font-size: 0.9rem;
color: #64748b;
margin-bottom: 20px;
line-height: 1.5;
}
.calc-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
align-items: flex-end;
}
.calc-field {
display: flex;
flex-direction: column;
}
.flex-grow { flex: 2; min-width: 200px; }
.fixed-width { flex: 1; min-width: 120px; }
.btn-align { justify-content: flex-end; }
.calc-field label {
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 6px;
color: #334155;
}
#food-select, #food-weight {
padding: 10px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 0.95rem;
background-color: #fff;
height: 42px;
box-sizing: border-box;
}
#add-item-btn {
height: 42px;
padding: 0 20px;
background-color: #2563eb;
color: white;
border: none;
border-radius: 8px;
font-size: 0.95rem;
font-weight: bold;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease;
}
#add-item-btn:hover { background-color: #1d4ed8; }
#virtual-plate-box {
background-color: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
}
#virtual-plate-box h4 { margin: 0 0 10px 0; color: #475569; font-size: 0.95rem; }
#plate-items-list { list-style: none; padding: 0; margin: 0; }
.plate-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
font-size: 0.95rem;
color: #334155;
}
.plate-item:last-child { border-bottom: none; }
.empty-list-msg { color: #94a3b8; font-style: italic; font-size: 0.9rem; }
.remove-btn {
background: none;
border: none;
color: #ef4444;
cursor: pointer;
font-weight: bold;
font-size: 1.1rem;
padding: 0 5px;
}
.remove-btn:hover { color: #dc2626; }
#calc-result-box {
padding: 20px;
background-color: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 10px;
}
.result-layout {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
#calc-result-box h4 { margin: 0; color: #166534; font-size: 1rem; }
.result-number { font-size: 2.2rem; font-weight: 800; color: #15803d; }
#clear-plate-btn {
background-color: transparent;
border: 1px solid #bbf7d0;
color: #166534;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
}
#clear-plate-btn:hover { background-color: #dcfce7; }
#equivalent-text {
margin: 0;
font-size: 0.9rem;
color: #1e293b;
line-height: 1.5;
border-top: 1px solid #bbf7d0;
padding-top: 10px;
}
// Array to hold current plate items
let plateItems = [];
function addItemToPlate() {
const selectElement = document.getElementById(‘food-select’);
const factor = parseFloat(selectElement.value);
const foodName = selectElement.options[selectElement.selectedIndex].text;
const weightGrams = parseInt(document.getElementById(‘food-weight’).value);
if (isNaN(weightGrams) || weightGrams item.id !== id);
updatePlateDOM();
}
function clearPlate() {
plateItems = [];
updatePlateDOM();
}
function updatePlateDOM() {
const listElement = document.getElementById(‘plate-items-list’);
listElement.innerHTML = ”;
if (plateItems.length === 0) {
listElement.innerHTML = ‘
Your plate is currently empty. Add items above!‘;
document.getElementById(‘total-emissions’).innerText = ‘0.00’;
document.getElementById(‘equivalent-text’).innerHTML = ‘Add food to see the driving distance equivalent.’;
return;
}
let totalPlateEmissions = 0;
plateItems.forEach(item => {
totalPlateEmissions += item.emissions;
const li = document.createElement(‘li’);
li.className = ‘plate-item’;
li.innerHTML = `
${item.name} (${item.weight}g)
+${item.emissions.toFixed(2)} kg CO₂e
`;
listElement.appendChild(li);
});
// Update total displays
document.getElementById(‘total-emissions’).innerText = totalPlateEmissions.toFixed(2);
// Calculate physical equivalent (~4 km per 1 kg CO2e)
const kmDriven = (totalPlateEmissions * 4.0).toFixed(1);
document.getElementById(‘equivalent-text’).innerHTML = `🌱 This entire meal releases the environmental equivalent of driving a standard gasoline passenger car for
${kmDriven} kilometers.`;
}
kindnesspractice.org 