Create (Building the Carbon Calculator)

1. The Pivot: Finding My Path

My journey began with a different idea: a sign language calculator. It was a beautiful concept, but I realized the tools I had couldn't yet support that dream. I asked myself, "What can I build now that still carries impact?" That is how I found carbon. It is invisible, yet shapes our future. My mission became making the invisible visible.

Last semester, I successfully audited the school's carbon footprint using Google Sheets. While accurate, spreadsheets are passive; they sit on a drive and don't engage the community. To truly answer my design question, "How can we empower students?" I needed a tool that was interactive and accessible.

Data Formulas (Trips)

Image showcasing the formulas involving factors BEFORE

Data Calculator (Trips)

Image showcasing the display after implementing it into a calculator

2. Building the Core Logic (The Code)

I chose to build a Single Page Application (SPA) using HTML, Tailwind CSS, and JavaScript. This ensures the tool runs offline and doesn't require a complex server, making it sustainable and easy to share.

My first task was translating the formulas I researched last semester into JavaScript code. I broke the calculator down into the four key categories I identified during my audit:

School Lunches: Calculating meat vs. veg impact.
Field Trips: Tracking bus, train, and flight emissions.
Electricity: Using the Kenyan grid factor (~0.35 kg CO₂e/kWh).
Fossil Fuels: Tracking LPG and diesel usage.

The Backend Logic

Translating research formulas into executable JavaScript code.

3. The "Lost Data" Crisis (Challenge & Solution)

Implementing data persistence and portability features to prevent work loss.

During initial testing, I encountered a critical User Experience (UX) failure. If a user accidentally closed the browser tab or refreshed the page, all their entered data, sometimes 30 minutes of work, vanished instantly.

The Solution: Local Storage

I researched browser capabilities and implemented localStorage. This allows the browser to "remember" every keystroke. Now, even if the laptop battery dies, the data reappears exactly as it was when the system reboots. To further secure the data, I added "Export JSON" and "Import JSON" buttons, allowing data to be moved between devices.

4. Deep Dive: One Engine, Two Interfaces

A key realization was that students and administrators speak different languages. A tool that appeals to a 5th grader might look unprofessional to a Director, and a professional dashboard might bore a student. Instead of compromising, I coded two distinct front-end interfaces that feed into the exact same calculation engine.

Interface A: "EcoChela" (Student-Facing)

Goal: Engagement and Hope.

Design: Used the Axolotl mascot, tracking the "Regrow, Renew, Restore" slogan.

Psychology: Environmental data can be scary. Bright pinks and marine blues make the tool feel approachable.

Interface B: The "Formal Dashboard" (Admin-Facing)

Goal: Authority and Clarity.

Design: Stripped away the mascot. Used a slate-grey and teal palette with the "Roboto" font.

Language: "School Lunches" became "Food Services Emissions."

5. From Numbers to Action (The Output)

A calculator is useless if it just outputs a scary number. I programmed a Recommendation Engine that analyzes the final results. It identifies the category with the highest emissions and dynamically displays a "Primary Focus Area" box, which tracks specific solutions based on the input data.

If Canteen is #1: It suggests "Meatless Mondays" or sourcing local produce.

If Electricity is #1: It suggests LED retrofits and "Switch Off" campaigns.

DARA EXPLAINS THE ECOCHELA IDEA.mp4

Reflection Video

This project wasn't just about carbon; it was about awakening. Seeing the weight of our choices, and still choosing better. This phase transformed my project from a theoretical study into a tangible product ready for real-world deployment at ISK.

Page updated

Report abuse