- Vue
- JavaScript
- CSS3
Drench Design was commissioned with the task of creating a calculator widget to be used on the Volkswagen website. It was a project to show how much charge one of their electric cars will get if it was left charging during a grocery trip.
The calculator needed to allow the user to select how long they take on average for their food shopping, and use the result to calculate the number of miles worth of charge the car would get, along with a quick example of how far that can cover on a single charge.
The widget was intended to be an iframe on the Volkwagen page, however they decided to just have it link out to the widget in a new tab.
As the project uses Vue, the calculations are done dynamically – so as soon as the slider on the second slide is updated, Vue calculates the values and updates the final slide on-the-fly.
The setup for the app was fairly straightforward, and didn’t present any hitches along the way (such is the beauty of Vue 2).
The slider itself was made using the Vue Slider Component package available through npm. The counters on the final slide were created using Vue Countup V2 for ease, again available on npm.
Using dynamic image sources, the images were simple to switch over as necessary. The calculations were rudimentary too once we figured out the conversions from the data we received.
The linked article on VW’s site can be found here (it can be found in the “How much will it cost?” section).
Back to Work