Velo by Wix is an innovative product that lets you build robust web applications with zero setup. Work in Wix's visual builder, add custom functionality and interactions using Velo APIs, and enjoy serverless coding in both the front-end and backend. With Velo, your web app can be up and running in a fraction of the time it would normally take you.To introduce you to Velo, we created our own version of a "Hello, World!" example: a simple currency converter site that uses the to connect to a third-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. wix-fetch API Follow the steps below to get familiar with the basic structure and syntax of Velo. Step 1: Create a New Wix Site Sign into your Wix account or if you don’t already have one. sign up for a Wix account in the Editor. Open a blank template Step 2: Enable Velo Enable Velo in the Wix Editor to let you work with code in your site. Step 3: Add Elements to the Page Add page elements in the Wix Editor: On the left side of the Editor, click . Add Add the page elements illustrated below to your site. When you add each element, set its ID in the panel that appears on the right side of the Code Panel. 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. Properties & Events Dropdown User Input : For selecting the source currency : sourceCurrency Element: Location in Add Menu: Description ID : Dropdown : User Input : For electing the target currency : targetCurrency Element Location in Add Menu Description ID : Input : User Input : For entering the amount to convert : sourceAmount Element Location in Add Menu Description ID : Textbox : User Input : To display the converted amount : targetCurrency Element Location in Add Menu Description ID : Button : Button : To trigger the currency conversion when clicked : calculateButton Element Location in Add Menu Description ID Step 4: Add Code NOTES: All the code for this example is added to a single page on the site. In this section we divided the code into short blocks followed by explanations. To see the complete code for this example without comments, to the end of the tutorial. See our to learn more about the Velo-based code in this example. scroll down API Reference To add the code: Double-click at the bottom of the Editor to open the . Home Page Code Code Panel Add the following code to the top of the code in the tab before the function: onReady {getJSON} ; url = ; currencyOptions = [
  { : , : },
  { : , : },
  { : , : },
]; // The getJSON function in wix-fetch lets you retrieve a // JSON resource from the network using HTTPS. import from 'wix-fetch' // Set the URL of the 3rd-party service. const "https://api.exchangeratesapi.io/latest" // Define the currency option values and text for the dropdowns. let "value" "USD" "label" "US Dollars" "value" "EUR" "label" "Euros" "value" "JPY" "label" "Japanese Yen" 3. Add the code below to the function. Code inside the onReady function runs when the page loads. onReady $w.onReady( { populateDropdowns(); $w( ).onClick( {
    calculateCurrency();
  })
}); ( ) function // Set the currency options for the dropdowns. // Set the onClick event handler for calculateButton to calculate the target amount. '#calculateButton' ( ) => event The 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"). $w Here we select the button and define an onClick to calculate the target amount. event handler 4. Add code to define the functions: populateDropdowns( ) { $w( ).options = currencyOptions; $w( ).selectedIndex = ;
} // Populate the dropdowns. ( ) function populateDropdowns //Set the dropdown options. "Dropdown" // Set the first dropdown option as the initial option. "Dropdown" 0 Here we select all the dropdowns by type. By calling with the element type "Dropdown", we select all dropdowns on the page. $w calculateCurrency( ) { initialAmount = $w( ).value; sourceSymbol = $w( ).value; targetSymbol = $w( ).value; fullUrl = ; getJSON(fullUrl)
  .then( { $w( ).value = initialAmount * json.rates[targetSymbol];
  }
)} // Calculate the target amount. ( ) function calculateCurrency // Initial amount let "#sourceAmount" // Original currency let "#sourceCurrency" // Target currency let "#targetCurrency" // Define the full url. let ` ?base= &symbols= ` ${url} ${sourceSymbol} ${targetSymbol} // Call the wix-fetch API function to retrieve the JSON resource. => json // Set the target amount as the initial amount multiplied by // the conversion rate. "#targetAmount" We use to define the full URL, which includes the source and target currencies. template literals The wix-fetch API function retrieves the JSON resource using the full URL. getJSON returns a , which resolves to a JSON object. getJSON promise 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: Click at the top right of the Editor. Preview Enter an amount in the source currency input. Click the calculate button and see the converted currency result in the target amount text box. your site to make it live and production ready. Publish 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 . Here are some examples of what you can do: Velo APIs payments Collect a show-more link Create an HTML component to embed a chart on your page Use Work with the data from like , , and other Wix Apps Stores Bookings Events Visit the to onboard and continue learning. Check out Velo and the . Velo by Wix website documentation API Reference Example Code Here is the complete code for this example, without comments: {getJSON} ; url = ; currencyOptions = [
  { : , : },
  { : , : },
  { : , : },
];

$w.onReady( {
  populateDropdowns();
 
  $w( ).onClick( {
    calculateCurrency();
  })
}); {
  $w( ).options = currencyOptions;
  $w( ).selectedIndex = ;
} { initialAmount = $w( ).value; sourceSymbol = $w( ).value; targetSymbol = $w( ).value; fullUrl = ;

  getJSON(fullUrl)
  .then( {
    $w( ).value = initialAmount * json.rates[targetSymbol];
  }
)} import from 'wix-fetch' const "https://api.exchangeratesapi.io/latest" let "value" "USD" "label" "US Dollars" "value" "EUR" "label" "Euros" "value" "JPY" "label" "Japanese Yen" ( ) function '#calculateButton' ( ) => event ( ) function populateDropdowns 'Dropdown' 'Dropdown' 0 ( ) function calculateCurrency let "#sourceAmount" let "#sourceCurrency" let "#targetCurrency" let ` ?base= &symbols= ` ${url} ${sourceSymbol} ${targetSymbol} => json "#targetAmount" Previously published at https://support.wix.com/en/article/getting-started-with-velo-by-wix

Fetch

Target

The wix-fetch Module as the Way to Take Your Website to the Next Level

Step-by-Step Guide on How to Build a Web Application with Velo

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Hot Velo Practices to Test and Debug Your Website Code

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

5 Hot Velo Practices to Test and Debug Your Website Code

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps