Parity Purchasing Power Price <ppp-price> Web Component

Watch in 3 minutes October 23, 2023

🚾@zachleat/parity-purchasing-power-price

Web Component to show Parity Purchasing Power normalized prices.

Versions: 2 versions in 17 Oct 2023

1.0.1
25 Oct 2023
Audit: 0 reports
2 deps
Issues: 0
PRs: 0

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

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

Watch on YouTube: Parity Purchasing Power Price ppp-price Web Component

Zach Leatherman is a builder for the web at Font Awesome and the creator of Build Awesome (née Eleventy/11ty), an award-winning open source website generator. He measures website performance with speedlify and at one point became too fixated on web fonts. He has given 89 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »