CarbonCalc

Main webpage with input and output

Inspiration

Our group wanted to build a project that could help reduce CO2 emissions by targeting everyday individuals. The Google Maps API is something we wanted to try out, and so naturally, we created a project that incorporates the Google Maps API and informs everyday people of how they can reduce CO2 emissions!

What it does

Users input a route like they would on Google Maps, including starting point and destination. They also input their car's estimated gas mileage. Then, using the API, we calculate the distance between the two locations and, based on their car's gas mileage, output how much CO2 they would emitting if they decided to travel by car. Users can also interact with a map display to examine their route.

How we built it

We used React.js to combine HTML, CSS, and JavaScript into a functioning web application. We employed HTML to create the basic webpage and form and CSS to style the elements, making a presentable web application. JavaScript connected the Google Maps API to our program, worked with information from the form, and performed the calculations that allowed us to display the CO2 output.

Challenges we ran into

For two of our group members, it was our first experience with React, and thus, we ran into a lot of problems learning the various React elements such as components and JSX (a form of JS that makes it easier to add HTML). In addition, storing input from the HTML form using JS with React took longer than expected to figure out, though we eventually created a functioning form.

Accomplishments that we're proud of

Although one of our group members had participated in a couple of hackathons before, the other two built their first project in EcoHacks! We are proud to have created a fully functioning application even though we are all still beginners!

What we learned

We learned how to interact with the Google Maps API, how to create a project in React, and how to use JavaScript to interact with various HTML elements.

What's next for CarbonCalc

Initially, we had wanted to create a routing feature that displayed the actual directions between the starting point to the destination, similar to how Google Maps traditionally works. We would definitely implement this idea with more time. In addition, we would use a database to store users' previous routes where they decided to bike/walk/take public transit and display how much CO2 emissions they saved in total!