/carbon-estimator

Carbon Footprint Estimator

Primary LanguageJavaScript

Carbon Estimator

Hello!

To limit climate change to 2℃, globally we must emit no more than 565 gigatons of carbon this century. It is our hope this tool helps people reduce their carbon footprints to make a sustainable future possible.

We believe this is the most intuitive and fastest carbon estimator available that works on both desktop and mobile devices.

Feel free to customise and install it on your own website, and help to spread to as many people as possible!

Demo

Try this working demo that was built for Singapore: http://whatismycarbonfootprint.com/sg

The data is publicly available here: https://drive.google.com/open?id=1QC1qEfeDZdGcd0d5Bv7WQSwonSQvnjSDmxN2BrZOFOE

Installation

  1. Requirements: node.js, npm, bower, git and a simple web server.
  2. Clone the repository
  3. From the main directory, run bower install to install the dependencies
  4. Copy the entire directory to a directory that your web server can serve, for example htdocs/carbon-estimator
  5. Access the Carbon Estimator at http://your_domain/carbon-estimator

Customisation

The tool relies on a single Google sheet for all its configuration. To create your own customisation:

  1. Duplicate the sample Google sheet.

  2. Share your new Google sheet so that anyone with the link can view it: Google Sheet > Share button (top-right corner) > select "Change to anyone with this link" > Make sure to select "Viewer" > Done. You'll get a link that look similar to this: https://docs.google.com/spreadsheets/d/1bkB-EjM2JhkSrU2aWTzw6HyscKDiK_N81tVk7_tv-P8/edit?usp=sharing alt text

  3. Copy the ID part of the URL (1bkB-EjM2JhkSrU2aWTzw6HyscKDiK_N81tVk7_tv-P8) into the file app/services/server.js and replace the ID on this line:

     const configGoogleSheetId = '1bkB-EjM2JhkSrU2aWTzw6HyscKDiK_N81tVk7_tv-P8'
    
  4. Now you can start modifying the configuration in the Google sheet according to your need, the modification will be available in the carbon estimator in a few minutes.

Facebook Sharing

To update title, description and thumbnail to display when the page link is shared on Facebook:

  1. Open index.html for edit.
  2. Look for <meta property="og: and update the content of the tags.
  3. Look for <meta property="fb: and update the Facebook Application ID. If you do not have one, you can leave the current content there or remove the entire line.

To enable Facebook Share button in the page is a bit more complicated and you'll need to get Facebook approval.

  1. Create a Facebook app.
  2. Make sure that the site URL matches your website, for example: http://climaterealityproject.asia/calculator - otherwise user will not be able to authenticate to Facebook from your website.
  3. Once you created the app, you'll have a unique app ID. Go to Google sheet, tab Settings, paste it into the field facebookAppId.
  4. Submit your app for review. It takes a few days but here are a few tips to speed up the process:
    • Add as much details and screenshots as you can.

    • Be clear in all your description.

    • Suggest that you replace this line in app/controllers/mainController.js:

        $scope.fbMessage = 'Check out my carbon footprint.\nCalculated via http://bit.ly/carbonsgsh';
      

      with

        $scope.fbMessage = '';
      

Current Usage

To be updated...

Drop us a note at hello@whatismycarbonfootprint.com if you want your website to be listed here.

Have fun!