Web Development by Solarise

Solarise.dev Case Studies

JavaScript Developer Case Study: CO2 Emissions & Dimensions Calculators

I built a couple of helpful and powerful calculators for leading metals marketplace Reibus International.

JavaScript JavaScript
WordPress WordPress
CSS CSS

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.

The Material Property Calculator, determining e.g. weight, length from given inputs
The Material Property Calculator, determining e.g. weight, length from given inputs
The emissions calculator. As a JavaScript developer, this provided some fascinating challenges
The emissions calculator. As a JavaScript developer, this provided some fascinating challenges

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.

The final report produced by the emissions calculator
The final report produced by the emissions calculator
Author Image

About the author

Robin is the dedicated developer behind Solarise.dev. With years of experience in web development, he's committed to delivering high-quality solutions and ensuring websites run smoothly. Always eager to learn and adapt to the ever-changing digital landscape, Robin believes in the power of collaboration and sharing knowledge. Outside of coding, he enjoys diving into tech news and exploring new tools in the industry.

If you'd like to get in touch to discuss a project, or if you'd just like to ask a question, fill in the form below.

Get in touch

Send me a message and I'll get back to you as soon as possible. Ask me about anything - web development, project proposals or just say hi!

Please enable JavaScript in your browser to complete this form.

Solarise.dev Services

Maintenance Retainers

Min 3 hours per month, no contract

Project Planning

Get in touch to discuss your project details

Consultancy

Face-to-face chats. Solve your problems!