Donation Goal/ Thermometer

Site URL: https://codepen.io/TommyCreenan/pen/pCslj/

I would love to add a donation thermometer to my website. I've found this codepen and I know to have live data It has something to do with needing an api. I'm a beginner and don't quite understand what exactly that means. Could anyone link any resources/ provide a detailed explanation?

Hi, CatPawWorks. This may not be relevant anymore but an API (Application Programming Interface) is a way two technology systems can have a conversation with each other.  It works sort of like a phone call. You call someone. They (usually) confirm that you're who you say you are. Then you ask them to do something for you (e.g. give you your current fundraising level or the daily weather forecast for the week). Then they reply with the info or a reason why they can't.

For example, let's say you have a website on Squarespace and a fundraising platform on some other system. Let's also say, the fundraising platform supports an API.  You could use JavaScript (for example) to talk to the fundraising platform.  When your page loads in the browser, the JavaScript on the page could ask the fundraising platform for the current funding level.  That platform would reply in a predictable format (JSON being one). Then you would use your JavaScript code to interpret the response and update the labels and percentages in the thermometer HTML.

That's just one example of how it could work.  Another approach (although this doesn't apply with Squarespace since we don't work with code on the server) might be that the request is made on the server before the page is loaded (rather than in the browser as the page loads).  The server might use the programming language PHP to make a request to the fundraising system's API using a method called cURL. What happens next is similar to the example above except that the data that was returned by the API would be written into the page code before it's sent to the visitor's browser; rather than loaded into the page at the time the page is rendered in the browser.

As for how exactly to make that work in the real world, it depends on what the API supports.  Most systems that offer an API also have documentation and example code on how to interact with their system.  If they don't have example code, you'll at least end up with some key phrases you can Google to figure out how to make the API call.  Then you'll probably have to look into how to use JavaScript/jQuery to update the elements on the page.  In an ideal situation, the API developers will give amazing docs and code examples in multiple programming languages that explain everything exactly. That has happened for me in the past but it's fairly rare. So you have to see what they give you and then fill in the gaps on your own (or with the help of friendly people on the internet).

Hopefully that was helpful. If not timely. 🙂