Carbon Calc

by Sigils

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carbon Footprint Tracker</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Carbon Footprint Tracker</h1>
    </header>
    <main>
        <section id="intro">
            <h2>What is a Carbon Footprint?</h2>
            <p>According to The Nature Conservancy, a "Carbon Footprint is the total amount of greenhouse gases (including Carbon Dioxide and methane) that are generated by our actions".</p>
            <p>The average American carbon footprint is 16 tons, one of the highest rates in the world.</p>
            <p>The following graph shows the top 10 countries in global emissions in 2019:</p>
           <img src="https://assets.weforum.org/editor/SRvKz0u6IwYs5NxUSHNNNWZTJ3UyS8sVkKH55pxpdAQ.JPG" alt="Graph Image" width="500" height="300">
            <p>As you can see, the United States leads the world in emissions with 17.6 tons of CO₂ per person. The following pages will inform you on what makes up your carbon footprint and how to decrease it. Then at the end you will be able to calculate your own carbon footprint and see how much you can reduce it by.</p>
            
            <button id="get-started">Get Started</button>
        </section>
        <section id="carbon-footprint-info" style="display: none;">
            <h2>Understanding Your Carbon Footprint</h2>
            <p>The average person creates a carbon footprint through their daily activities like driving, using electricity at home, consuming food (especially meat), buying goods, flying, and disposing of waste, all of which contribute to greenhouse gas emissions through the energy used to produce and transport those items.</p>
            <h3>Key contributors to a personal carbon footprint:</h3>
            <ul>
                <li><strong>Transportation:</strong> Driving a car is a major contributor,...

CSS

/* styles.css */

body {
    font-family: Arial, sans-serif;
    background-color: #87cefa;
    margin: 0;
    padding: 20px;
}

header {
    background: #000080;
    color: #ffffff;
    padding: 10px ;
    text-align: center;
}

h1 {
    margin: 0;
    background: #007ba7;
    color:#000080;
    padding: 10px;
    }
    h2{
    background: #007ba7;
    padding:20px;
    border-radius: 5px;
    color: #000080;
    font-size: 20px;
    font-weight: bold;
}
  
form {
    background: #349b41;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin: 10px 0 5px;
}

input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
}

button {
    background: #007ba7;
    color: #ffffff;
    border: none;
    padding: 10px;
    cursor: pointer;
}

button:hover {
    background: #2c3e50;
}

#result {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.current-footprint {
    background: #ad1aff;
    padding: 20px;
    border-radius: 5px;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
}

.target-footprint {
    background: #e97e7e;
    padding: 20px;
    border-radius: 5px;
    color: #000000;
    font-size: 18px;
    font-weight: bold;
}

.reduction {
    background: #f2dacb;
    padding: 20px;
    border-radius: 5px;
    color: #000aaa;;
    font-size: 20px;
    font-weight: bold;
}
h3 {
    background: #007ba7;
    padding: 20px;
    border-radius: 5px;
    color: #000080;
    font-size: 20px;
    font-weight: bold;
}

JavaScript

document.getElementById('footprintForm').addEventListener('submit', function(event) {
    event.preventDefault();

    const milesDriven = parseFloat(document.getElementById('milesDriven').value);
    const electricityUsage = parseFloat(document.getElementById('electricityUsage').value);
    const gasUsage = parseFloat(document.getElementById('gasUsage').value);

    const milesReduction = parseFloat(document.getElementById('milesReduction').value) || 0;
    const electricityReduction = parseFloat(document.getElementById('electricityReduction').value) || 0;
    const gasReduction = parseFloat(document.getElementById('gasReduction').value) || 0;

    const carbonFootprint = (milesDriven * 0.404) + (electricityUsage * 0.92) + (gasUsage * 11.7);
    const reducedCarbonFootprint = (milesDriven - milesReduction) * 0.404 + 
                                  (electricityUsage - electricityReduction) * 0.92 + 
                                  (gasUsage - gasReduction) * 11.7;
    
    document.getElementById('result').innerHTML = `
    <div class="current-footprint">
        <h3>Current Carbon Footprint: ${carbonFootprint.toFixed(2)} kg CO₂</h3>
    </div>
    <div class="target-footprint">
        <h3>Target Carbon Footprint: ${reducedCarbonFootprint.toFixed(2)} kg CO₂</h3>
    </div>
    <div class="reduction">
        <h3>Reduction: ${((carbonFootprint - reducedCarbonFootprint) / carbonFootprint * 100).toFixed(2)}%</h3>
    </div>
`});