Eco Footprint Calculator

Measure Today, Sustain Tomorrow.

Comment

🌱 Eco Footprint Calculator

A modern, responsive web application that helps users calculate their daily carbon footprint and provides personalized tips for reducing environmental impact.

Eco Footprint Calculator Tailwind CSS License

📋 Overview

The Eco Footprint Calculator is a user-friendly tool designed to raise environmental awareness among city residents. It calculates daily carbon emissions based on:

  • Transportation habits
  • Electricity consumption
  • Water usage

The application provides instant feedback on environmental impact levels and offers personalized suggestions for reducing carbon footprint.

✨ Features

  • 🚗 Multiple transport mode options (Car, Bus, Train, Bike, Walk)
  • ⚡ Real-time CO₂ emission calculations
  • 💧 Water usage impact assessment
  • 🎨 Color-coded impact level indicators
  • 📱 Fully responsive design
  • 💡 Personalized eco-friendly tips
  • 🎯 No backend required - all calculations done client-side

🛠️ Technology Stack

  • React.js 18.2.0
  • Tailwind CSS (via CDN)
  • Modern JavaScript (ES6+)
  • Custom CSS animations and transitions

🚀 Getting Started

Prerequisites

  • Node.js (v14.0.0 or higher)
  • npm (v6.0.0 or higher)

Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/ecofootprintcalculator.git

  2. Navigate to the project directory:

    cd ecofootprintcalculator

  3. Install dependencies:

    npm install

  4. Start the development server:

    npm start

The application will open in your default browser at http://localhost:3000.

📊 Calculation Methodology

The calculator uses the following emission factors:

Transportation

  • Car: 0.27 kg CO₂/km
  • Bus: 0.1 kg CO₂/km
  • Train: 0.05 kg CO₂/km
  • Bike/Walk: 0 kg CO₂/km

Utilities

  • Electricity: 0.92 kg CO₂ per kWh
  • Water: 0.0003 kg CO₂ per liter

Impact Levels

  • Low: < 5 kg CO₂/day
  • Moderate: 5-15 kg CO₂/day
  • High: > 15 kg CO₂/day

🎨 UI/UX Features

  • Clean, modern interface
  • Responsive design for all devices
  • Interactive form elements
  • Color-coded impact indicators
  • Numbered tips with visual hierarchy
  • Custom scrollbar styling
  • Optimized number input fields

📱 Responsive Design

The application is fully responsive and optimized for:

  • Desktop computers
  • Tablets
  • Mobile phones
  • Different screen orientations

🔧 Customization

Colors

The application uses a custom color scheme defined in the Tailwind configuration:

  • Eco Green: #4CAF50
  • Eco Yellow: #FFC107
  • Eco Red: #F44336

Font

The application uses the Inter font family for optimal readability.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

  • React.js team for the amazing framework
  • Tailwind CSS for the utility-first CSS framework
  • Inter font family for the beautiful typography

📞 Support

For support, please open an issue in the GitHub repository or contact the maintainers.

Made with ❤️ for a greener future

Built With

Share this project:

Updates