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.
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.
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.
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.
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.
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!