carbon footprint tracker for earth day

This is a submission for Weekend Challenge: Earth Day Edition

I built a carbon footprint tracker for earth day

Code

index.html

<div class="container">
    <header>
      <h1>carbon footprint tracker</h1>
      <p>calculate your environmental impact</p>
  </header>

    <div class="calculator">
          <div class="input-group">
            <label for="transport">weekly driving (miles)</label>
                  <input type="range" id="transport" min="0" max="500" value="100" class="slider">
            <span class="value" id="transportVal">100</span>
      </div>

          <div class="input-group">
            <label for="energy">monthly electricity (kwh)</label>
                  <input type="range" id="energy" min="0" max="1000" value="300" class="slider">
            <span class="value" id="energyVal">300</span>
      </div>

          <div class="input-group">
            <label for="diet">meat servings per week</label>
                  <input type="range" id="diet" min="0" max="14" value="3" class="slider">
            <span class="value" id="dietVal">3</span>
      </div>

          <div class="input-group">
            <label for="flights">yearly flights</label>
                  <input type="range" id="flights" min="0" max="20" value="2" class="slider">
            <span class="value" id="flightsVal">2</span>
      </div>
  </div>

    <div class="results">
          <div class="result-card">
            <h3>your annual carbon footprint</h3>
            <div class="total-co2"><span id="totalCO2">0</span> tons</div>
            <div class="status" id="status"></div>
      </div>

          <div class="breakdown">
            <h3>breakdown by category</h3>
                  <div class="category-item">
                    <span>transportation</span>
                    <span id="co2transport">0</span>
            </div>
                  <div class="category-item">
                    <span>energy</span>
                    <span id="co2energy">0</span>
            </div>
                  <div class="category-item">
                    <span>diet</span>
                    <span id="co2diet">0</span>
            </div>
                  <div class="category-item">
                    <span>flights</span>
                    <span id="co2flights">0</span>
            </div>
      </div>
  </div>

    <div class="tips"

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'segoe ui', tahoma, geneva, verdana, sans-serif;
    background: linear-gradient(135deg, #0f7938 0%, #1abc9c 100%);
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

header {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 3px solid #1abc9c;
    padding-bottom: 20px;
}

header h1 {
    font-size: 2.5em;
    color: #0f7938;
    margin-bottom: 10px;
    text-transform: lowercase;
}

header p {
    color: #666;
    font-size: 1.1em;
    text-transform: lowercase;
}

.calculator {
    margin-bottom: 40px;
}

.input-group {
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 200px 1fr 80px;
    align-items: center;
    gap: 20px;
}

.input-group label {
    font-weight: 600;
    color: #333;
    text-transform: lowercase;
    font-size: 0.95em;
}

.slider {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: #e0e0e0;
    outline: none;
}

.value {
    font-weight: bold;
    color: #1abc9c;
    font-size: 1.1em;
    text-align: right;
}

.results {
    background: #f5f5f5;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
}

.result-card {
    text-align: center;
    margin-bottom: 30px;
    background: white;
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid #1abc9c;
}

.result-card h3 {
    color: #333;
    font-size: 1em;
    margin-bottom: 15px;
    text-transform: lowercase;
}

.total-co2 {
    font-size: 3em;
    color: #0f7938;
    font-weight: bold;
    margin-bottom: 15px;
}

.status {
    font-size: 1.1em;
    font-weight: 600;
    text-transform: lowercase;
    padding: 10px 15px;
    border-radius: 8px;
    display: inline-block;
}

.status.low {
    background: #d4edda;
    color: #155724;
}

.status.medium {
    background: #fff3cd;
    color: #856404;
}

.status.high {
    background: #f8d7da;
    color: #721c24;
}

.breakdown {
    background: white;
    padding: 20px;
    border-radius: 12px;
}

.breakdown h3 {
    color: #333;
    margin-bottom: 20px;
    text-transform: lowercase;
    font-size: 1.1em;
}

.category-item {
    display: grid;
    grid-template-columns: 1fr 100px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    text-transform: lowercase;
}

.category-item:last-child {
    border-bottom: none;
}

.category-item span:first-child {
    color: #666;
    font-weight: 500;
}

.category-item span:last-child {
    text-align: right;
    color: #1abc9c;
    font-weight: bold;
    font-size: 1.05em;
}

.tips {
    background: #e8f5e9;
    border-radius: 15px;
    padding: 25px;
    border-left: 4px solid #0f7938;
}

.tips h3 {
    color: #0f7938;
    margin-bottom: 15px;
    text-transform: lowercase;
}

.tips ul {
    list-style: none;
}

.tips li {
    color: #333;
    padding: 8px 0 8px 25px;
    position: relative;
    text-transform: lowercase;
    line-height: 1.6;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}

script.js

// carbon footprint calculator
const transport = document.getElementById('transport');
const energy = document.getElementById('energy');
const diet = document.getElementById('diet');
const flights = document.getElementById('flights');

const transportVal = document.getElementById('transportVal');
const energyVal = document.getElementById('energyVal');
const dietVal = document.getElementById('dietVal');
const flightsVal = document.getElementById('flightsVal');

const totalCO2 = document.getElementById('totalCO2');
const co2transport = document.getElementById('co2transport');
const co2energy = document.getElementById('co2energy');
const co2diet = document.getElementById('co2diet');
const co2flights = document.getElementById('co2flights');
const statusEl = document.getElementById('status');

function calculateCarbonFootprint() {
    // conversion factors (kg co2 per unit per year)
    const transportCO2 = (transport.value * 52 * 0.21) / 1000; // weekly miles * 52 weeks * 0.21 kg per mile
    const energyCO2 = (energy.value * 12 * 0.4) / 1000; // monthly kwh * 12 months * 0.4 kg per kwh
    const dietCO2 = (diet.value * 52 * 0.5) / 1000; // servings * 52 weeks * 0.5 kg per serving
    const flightsCO2 = (flights.value * 1.6); // flight hours * 1.6 kg per hour (average 4 hour flight)

    const total = transportCO2 + energyCO2 + dietCO2 + flightsCO2;

    // update display values
    transportVal.textContent = transport.value;
    energyVal.textContent = energy.value;
    dietVal.textContent = diet.value;
    flightsVal.textContent = flights.value;

    // update results
    totalCO2.textContent = total.toFixed(2);
    co2transport.textContent = transportCO2.toFixed(2);
    co2energy.textContent = energyCO2.toFixed(2);
    co2diet.textContent = dietCO2.toFixed(2);
    co2flights.textContent = flightsCO2.toFixed(2);

    // update status
    statusEl.className = 'status';
    if (total < 4) {
          statusEl.classList.add('low');
          statusEl.textContent = 'excellent work for the planet';
    } else if (total < 8) {
          statusEl.classList.add('medium');
          statusEl.textContent = 'below average, good start';
    } else {
          statusEl.classList.add('high');
          statusEl.textContent = 'room for improvement';
    }
}

// add event listeners
transport.addEventListener('input', calculateCarbonFootprint);
energy.addEventListener('input', calculateCarbonFootprint);
diet.addEventListener('input', calculateCarbonFootprint);
flights.addEventListener('input', calculateCarbonFootprint);

// initial calculation
calculateCarbonFootprint();
    }
    }
    }
}

i love to participate in this challenge 👹