React Base Fiddle (JSX) - DORON

Starting point for creating JSFiddles with React.

by dorenstein

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://openexchangerates.github.io/money.js/money.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<div id="container">

  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

//Currency Converter

//Create a currency converter that converts a user’s selected base currency and outputs the equivalent money value of the exchange currency using the current day’s rate.

//Include two select inputs, one for base currency and second for equivalent currency, which make use of the json found at:
//https://gist.githubusercontent.com/mddenton/062fa4caf150bdf845994fc7a3533f74/raw/27beff3509eff0d2690e593336179d4ccda530c2/Common-Currency.json

//For the base currency, create a masked currency input that:

// Shows the symbol of the selected base currency
// Is formatted to two decimal places
// On focus sets the cursor to the rightmost decimal position
// Only allows numbers
// When a new number is inserted shifts the decimal right one place,
// When deleted shifts the decimal left one place

// Currency rates are available from http://data.fixer.io/api/latest?access_key=d0f3b7da0757140a192df5c5ee3fd3cf

// Use the money.js library (see this jsfiddle's External Resources) to convert the selected base currency to its chosen equivalent money value. For more details: http://openexchangerates.github.io/money.js/

// Best practice would be to inform the user if their selected currency is not available from fixer.io using inline validation. In order to more easily test error handling, allow the user to select a currency not available from fixer.io and present the error returned.

// Show the equivalent money value's currency symbol which is included in the above Common-Currency.json endpoint.

// Use React but do not include jQuery in your project.

const API_ENDPOINT_CURRENCIES =
  "https://gist.githubusercontent.com/mddenton/062fa4caf150bdf845994fc7a3533f74/raw/27beff3509eff0d2690e593336179d4ccda530c2/Common-Currency.json";

const API_ENDPOINT_FIXER =
  "https://data.fixer.io/api/latest?access_key=d0f3b7da0757140a192df5c5ee3fd3cf";

function getCurrencies() {
  return axios
    .get(API_ENDPOINT_CURRENCIES)
    .then(response =>...