Zach’s ugly mug (his face) Zach Leatherman

Parity Purchasing Power Price <ppp-price> Web Component

October 23, 2023 Watch in 3 minutes

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

< Newer
Seven Million npm Downloads for Eleventy
Older >
resize-asaurus Web Component

Zach Leatherman IndieWeb Avatar for a builder for the web and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 81 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 »


Bob MonsourTixie Salander ????Saneef H. Ansari


Mottokrosh@mastodon.socialBrantley HarrisJoe GaffeyCloudCannonWesley Soaresbrussolo.igor ????️‍????Noah LiebmanNick Fjailandrade ????Swift
Shamelessly plug your related post

These are webmentions via the IndieWeb and

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)