JavaScript Developer Case Study: CO2 Emissions & Dimensions Calculators

As part of work carried out in my role as an experienced JavaScript developer for the creative design agency Studio Simpatico I built two calculators for Reibus International, an independent metals marketplace.

1. Material property calculator

   A multi-purpose tool with six different forms (coil length, coil weight, coil thickness, outer diameter, sheet weight, sheet thickness).

   This tool lets the user specify inputs such as weight, length & thickness then see the relevant calculations returned as well-formatted results.

2. Emissions calculator

   This tool calculates the potential CO2 emissions of materials, given inputs such as material origin, shipping routes and transport method.

   The calculator also links into the Google Distance Matrix API to find the distances used in the emissions calculations.

It was important for the client that the calculators be accurate, responsive and intuitive for the end-user.

To build these calculators, I eventually settled upon the lightweight JavaScript framework AlpineJS, a tool which JavaScript developers such as myself use when we need to build highly reactive, dynamic front-end tools.

AlpineJS – A JavaScript Developer’s Friend

Using AlpineJS allowed for rapid, efficient prototyping.

This gave the client the ability to preview the calculator functionality during the first few days of development and offered opportunity to suggest revisions while construction was underway.

This approach also allowed for Studio Simpatico’s designers to easily style the HTML during the implementation process.

AlpineJS’s lightweight nature means that everything can be maintained within standalone HTML templates.

The calculators were also embedded within a WordPress template using WordPress’ own powerful templating tools. JavaScript developers make use of this technique in order to embed functionality like this within a blog or content management system like WordPress.

The logic of the calculators was written to be extensible and maintainable in the long-run, with AlpineJS’s data structure meaning everything is kept in-state and accessible from any part of the application.

Possible drawbacks of a framework like AlpineJS include it being unsuitable for larger multi-page applications. But it’s perfect for calculators like this, where they are embedded within a single page with no need for site-wide state.

Overall, the project delivered on client expectations and made use of modern, lightweight web technologies to provide a powerful front-end experience for Reibus’ customers.