Parity Purchasing Power Price <ppp-price> Web Component

A small structural-only zero-dependency Web Component to show Parity Purchasing Power normalized prices. Inspired by the Wes Bos blog post.

• Source Code
• Live Demo

<!-- outputs $14.78 -->
<ppp-price from="us" to="gb" currency="usd">$10</ppp-price>
<ppp-price from="us" to="gb">$10 USD</ppp-price>

<!-- outputs €9.76 -->
<ppp-price from="fr" to="de" currency="eur">10€</ppp-price>

<!-- uses CloudCannon geolocation for country -->
<ppp-price from="fr" currency="eur">10€</ppp-price>

Please note that this is not a currency converter (you will get the same currency out that you put in). It transforms the number value with a parity purchasing ratio to normalize that cost to a new price for a specified country. Outputs use the Intl.NumberFormat API to properly format localized currency values.

This (optionally) works with CloudCannon’s Geolocation feature to automatically detect the visitor’s country.