In this tutorial, you'll learn how to create a simple currency converter site that uses the wix-fetch API to connect to a 3rd-party service. Site visitors choose source and target currencies from dropdowns and enter an amount to convert. The results are displayed in a text box.
Follow the steps below to create a currency converter with the wix-fetch API.
Wix Studio: In the Code panel, click Start Coding.
Wix Editor: In the top bar of the Wix Editor, click Dev Mode > Turn on Dev Mode.
Add page elements in the editor:
When you add each element, set its ID in the Properties & Events panel panel. In Wix Studio it appears at the bottom of the code editor, and in Wix Editor, the Properties & Events panel appears on the right side of the code editor.
Element | Location in Add Menu | Description | ID |
---|---|---|---|
Dropdown | User Input | For selecting the source currency | sourceCurrency |
Dropdown | User Input | For selecting the target currency | targetCurrency |
Input | User Input | For entering the amount to convert | sourceAmount |
Text Box | User Input | To display the converted amount | targetAmount |
Button | Button | To trigger the currency conversion when clicked | calculateButton |
Notes
To add the code:
Add the following code to the top of the code in the tab before the onReady function:
// The getJSON function in wix-fetch lets you retrieve a
// JSON resource from the network using HTTPS.
import { getJSON } from "wix-fetch";
// Set the URL of the 3rd-party service.
const url = "https://api.exchangerate.host/convert";
// Define the currency option values and text for the dropdowns.
let currencyOptions = [
{ value: "USD", label: "US Dollars" },
{ value: "EUR", label: "Euros" },
{ value: "JPY", label: "Japanese Yen" },
];
Add the code below to the onReady function. Code inside the onReady function runs when the page loads.
$w.onReady(function () {
// Set the currency options for the dropdowns.
populateDropdowns();
// Set the onClick event handler for calculateButton to calculate the target amount.
$w("#calculateButton").onClick((event) => {
calculateCurrency();
});
});
The $w
function can select elements on a page by ID or by type, allowing us to run functions and define the properties of the elements. Use this syntax to select an element by ID, $w("#myElementId")
, and this syntax to select by type, $w("ElementType")
.
Here we select the button and define an onClick
event handler to calculate the target amount.
Add code to define the functions:
populateDropdowns( )
// Populate the dropdowns.
function populateDropdowns() {
//Set the dropdown options.
$w("Dropdown").options = currencyOptions;
// Set the first dropdown option as the initial option.
$w("Dropdown").selectedIndex = 0;
}
Here we select all the dropdowns by type. By calling $w
with the element type "Dropdown", we select all dropdowns on the page
calculateCurrency( )
// Calculate the target amount.
function calculateCurrency() {
// Initial amount
let initialAmount = $w("#sourceAmount").value;
// Original currency
let sourceSymbol = $w("#sourceCurrency").value;
// Target currency
let targetSymbol = $w("#targetCurrency").value;
// Define the full url.
let fullUrl = `${url}?from=${sourceSymbol}&to=${targetSymbol}`;
// Call the wix-fetch API function to retrieve the JSON resource.
getJSON(fullUrl).then((json) => {
// Set the target amount as the initial amount multiplied by
// the conversion rate.
$w("#targetAmount").value = initialAmount * json.info.rate;
});
}
We use template literals to define the full URL, which includes the source and target currencies.
The wix-fetch API getJSON
function retrieves the JSON resource using the full URL. getJSON
returns a promise, which resolves to a JSON object.
We multiply the retrieved rate by the initial amount and assign it to the targetAmount
text box.
Now it's time to test your site:
That's it! In just a few minutes, you created a web application in Velo! No setup, no managing server infrastructure, just integrating Velo APIs with the Wix visual builder.
Now that you've had a taste of Velo, check out what else you can do:
Here is the complete code for this example, without comments:
import { getJSON } from "wix-fetch";
const url = "https://api.exchangerate.host/convert";
let currencyOptions = [
{ value: "USD", label: "US Dollars" },
{ value: "EUR", label: "Euros" },
{ value: "JPY", label: "Japanese Yen" },
];
$w.onReady(function () {
populateDropdowns();
$w("#calculateButton").onClick((event) => {
calculateCurrency();
});
});
function populateDropdowns() {
$w("Dropdown").options = currencyOptions;
$w("Dropdown").selectedIndex = 0;
}
function calculateCurrency() {
let initialAmount = $w("#sourceAmount").value;
let sourceSymbol = $w("#sourceCurrency").value;
let targetSymbol = $w("#targetCurrency").value;
let fullUrl = `${url}?from=${sourceSymbol}&to=${targetSymbol}`;
getJSON(fullUrl).then((json) => {
$w("#targetAmount").value = initialAmount * json.info.rate;
});
}