Velo by Wix 시작하기

1// The getJSON function in wix-fetch lets you retrieve a
2// JSON resource from the network using HTTPS.
3import {getJSON} from 'wix-fetch';
4
5// Set the URL of the 3rd-party service.
6const url = "https://api.exchangeratesapi.io/latest";
7
8// Define the currency option values and text for the dropdowns.
9let currencyOptions = [
10  { "value": "USD",  "label": "US Dollars"},
11  { "value": "EUR",  "label": "Euros"},
12  { "value": "JPY",  "label": "Japanese Yen"},
13];

1$w.onReady(function () {
2  // Set the currency options for the dropdowns.
3  populateDropdowns();
4
5  // Set the onClick event handler for calculateButton to calculate the target amount.
6  $w('#calculateButton').onClick((event) => {
7    calculateCurrency();
8  })
9});

1// Populate the dropdowns.
2function populateDropdowns(){
3  //Set the dropdown options.
4  $w("Dropdown").options = currencyOptions;
5  // Set the first dropdown option as the initial option.
6  $w("Dropdown").selectedIndex = 0;
7}

1// Calculate the target amount.
2function calculateCurrency() {
3  // Initial amount 
4  let initialAmount = $w("#sourceAmount").value;
5  // Original currency
6  let sourceSymbol = $w("#sourceCurrency").value;
7  // Target currency
8  let targetSymbol = $w("#targetCurrency").value;
9  // Define the full url.
10  let fullUrl = `${url}?base=${sourceSymbol}&symbols=${targetSymbol}`;
11    
12  // Call the wix-fetch API function to retrieve the JSON resource.
13  getJSON(fullUrl)
14  .then(json => {
15    // Set the target amount as the initial amount multiplied by
16    // the conversion rate.
17    $w("#targetAmount").value = initialAmount * json.rates[targetSymbol];
18  }
19)}

1import {getJSON} from 'wix-fetch';
2
3const url = "https://api.exchangeratesapi.io/latest";
4
5let currencyOptions = [
6  { "value": "USD",  "label": "US Dollars"},
7  { "value": "EUR",  "label": "Euros"},
8  { "value": "JPY",  "label": "Japanese Yen"},
9];
10
11$w.onReady(function () {
12  populateDropdowns();
13 
14  $w('#calculateButton').onClick((event) => {
15    calculateCurrency();
16  })
17});
18
19function populateDropdowns(){
20  $w('Dropdown').options = currencyOptions;
21  $w('Dropdown').selectedIndex = 0;
22}
23
24function calculateCurrency() {
25  let initialAmount = $w("#sourceAmount").value;
26  let sourceSymbol = $w("#sourceCurrency").value;
27  let targetSymbol = $w("#targetCurrency").value;
28  let fullUrl = `${url}?base=${sourceSymbol}&symbols=${targetSymbol}`;
29
30  getJSON(fullUrl)
31  .then(json => {
32    $w("#targetAmount").value = initialAmount * json.rates[targetSymbol];
33  }
34)}