Tutorial: Using the Fetch API to Add a Currency Converter

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.

Step 1: Create a New Wix Site

1. Sign into your Wix account or sign up for a Wix account if you don’t already have one.
2. Open a blank template in Wix Studio or the Wix Editor.

Step 2: Enable Velo Dev Mode

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

  

Step 3: Add Elements to the Page

Add page elements in the editor:

1. On the left side of the editor, click Add Elements.
2. Add the page elements illustrated below to your site.

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

   Use the name shown below for each element, minus the hashtag. See the table below for a full list of the elements and where to find them in the Add menu.

Step 4: Add Code

To add the code:

1. • Wix Studio: On the left, click > Page Code.
   • Wix Editor: In the Code sidebar, click Page Code. Under Main Pages double-click the page labeled HOME.

2. Add the following code to the top of the code in the tab before the onReady function:

   Copy

3. Add the code below to the onReady function. Code inside the onReady function runs when the page loads.

   Copy

   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.

4. Add code to define the functions:

   populateDropdowns( )

   Copy

   Here we select all the dropdowns by type. By calling $w with the element type "Dropdown", we select all dropdowns on the page

   calculateCurrency( )

   Copy

   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.

Step 5: See It in Action

Now it's time to test your site:

1. In the top right corner of the editor, click (Wix Studio) or Preview (Wix Editor).
2. Enter an amount in the source currency input.
3. Click the calculate button and see the converted currency result in the target amount text box.
4. Publish your site to make it live and production ready.

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.

Next Steps

Now that you've had a taste of Velo, check out what else you can do:

• Easily call backend code from the frontend using web modules. 
• Work with Wix's visual builder.
• Add features and customize your site using Velo APIs. Here are some examples of what you can do:
  • Collect payments
  • Create a show-more link
  • Use an HTML component to embed a chart on your page
  • Work with the data from other Wix Apps like Stores, Bookings, and Events
• Visit the Velo by Wix website to onboard and continue learning. Check out Velo documentation and the API Reference.

Example Code

Here is the complete code for this example, without comments: