Hack2Skill Prompts War · Google AI Challenge 2025
EcoTrace is a smart, AI-powered web application that helps users calculate their personal carbon footprint across four life areas — transport, home energy, food, and shopping — and receive personalised, data-driven reduction strategies generated by Google Gemini AI.
Carbon Footprint Awareness
Open index.html in any modern browser. No build step, no dependencies to install.
The app uses a multi-factor emission model to calculate a user's annual CO₂e footprint:
Total CO₂e = Transport + Energy + Food + Shopping
Each category uses real emission factors from IPCC AR6 and DEFRA 2023 (see EMISSION_FACTORS.md). The model applies:
- Multipliers for high-emission behaviours (e.g. long-haul flights × 1200 kg CO₂e each)
- Reductions for low-emission choices (e.g. daily public transport use = −400 kg CO₂e/year)
- Household division for shared energy costs
- Non-negativity clamping — no category goes below 0
After calculation, a structured prompt is sent to Google Gemini gemini-1.5-flash via the Google Gemini API. The prompt includes:
- Per-category totals
- Raw input values (km/week, flight count, diet type, etc.)
- Instruction to return exactly 6 tips as validated JSON
Gemini returns category-specific, quantified advice. A graceful fallback with hardcoded expert tips fires if the API is unavailable.
The user's total is compared to:
| Benchmark | Value |
|---|---|
| Paris 2°C target | 2.0 t CO₂e/year |
| India average | 1.9 t CO₂e/year |
| Global average | 7.0 t CO₂e/year |
| USA average | 16.0 t CO₂e/year |
A dynamic badge and message respond to which tier the user falls in.
User fills in 4 panels (Transport → Energy → Food → Shopping)
↓
JavaScript calculates CO₂e per category using emission factors
↓
Results panel renders: score card, comparison bars, doughnut chart
↓
Structured prompt sent to Gemini API → 6 personalised tips returned
↓
User can share score or download a plain-text report
carbon-footprint-app/
├── index.html # Main app (HTML + CSS + inline JS)
├── lib/
│ └── emissions.js # Shared calculation engine (imported by both app & tests)
├── tests/
│ └── tests.js # Unit tests — imports from lib/emissions.js
├── README.md # This file
└── EMISSION_FACTORS.md # Full methodology & citations
| Feature | Detail |
|---|---|
| 4-step calculator | Transport, Energy, Food, Shopping |
| Real emission factors | IPCC AR6 + DEFRA 2023 |
| AI-powered tips | Gemini gemini-1.5-flash via Google Gemini API |
| Fallback tips | Hardcoded expert tips if API unavailable |
| Live CO₂ counter | Animated daily global CO₂ tally |
| Doughnut chart | Chart.js breakdown by category |
| Comparison bars | vs Paris target, India avg, global avg |
| Share button | Web Share API with clipboard fallback |
| Download report | Plain-text report download |
| Responsive design | Mobile-first, tested at 320px–1440px |
| Full accessibility | ARIA roles, labels, live regions, skip link, focus styles |
| Keyboard navigation | Full keyboard support across all controls |
| Reduced motion | Respects prefers-reduced-motion |
| Security | CSP meta header, HTML escaping, input clamping |
| Print stylesheet | Clean print output |
- Content-Security-Policy meta header restricts resource origins
- All user-visible strings rendered via
escHtml()inlib/emissions.js— no XSS vectors - Range and number inputs clamped to valid ranges before calculation
- No sensitive data stored (no localStorage, no cookies)
- API calls made client-side only — no server required
API Key note: The Google Gemini API key is currently passed via the request URL in the browser. For a production deployment, this should be proxied through a backend endpoint (e.g. a serverless function) so the key is never exposed in client-side code. For this hackathon submission (no-backend constraint), the key should be injected at deploy time via an environment variable or a config file excluded from version control.
Conforms to WCAG 2.1 AA:
- Skip-to-content link
- All interactive elements have visible focus styles
- Range sliders have
aria-labelandaria-describedby - Select elements have
aria-label - Results section has
aria-live="polite" - Step navigation uses
role="tablist"andaria-selected - Chart canvas has
aria-labelandrole="img" - Colour contrast: all text meets 4.5:1 minimum on dark background
- Fully operable by keyboard only
See tests/tests.js for full unit test suite covering:
- Emission factor calculations per category
- Edge cases (zero values, maximum values)
- Input clamping and validation
- HTML escaping (XSS prevention)
Run tests by opening tests/tests.js in Node.js:
node tests/tests.jsExpected output: all tests PASS with summary.
- Car emission factors are per km (DEFRA 2023 fleet averages)
- Flight factors are per return trip including radiative forcing
- Energy is divided equally across household members
- Food emissions are annual per-person figures from literature
- Shopping factors use lifecycle assessment averages
- Public transport bonus/penalty is a simplified annual adjustment
- The app targets individual users, not households
See EMISSION_FACTORS.md for full methodology and citations.
| Layer | Technology |
|---|---|
| UI | Vanilla HTML5 + CSS3 + ES2022 JavaScript |
| Charts | Chart.js 4.4.1 (CDN) |
| Fonts | Google Fonts (Instrument Serif, IBM Plex Mono, Geist) |
| AI | Google Gemini API (gemini-1.5-flash) |
| Build | None — single file, zero config |
Built for Hack2Skill Prompts War · Google AI Challenge 2025
Platform: Google Gemini