Simple currency jQuery Plugin

Simple currency is an easy to use jQuery plugin that supports https://fixer.io/ and https://restcountries.eu/

The code is well-documented and small (minified version is 6kb), with its only external dependency being jQuery, which makes it easy to deploy and extend. The plugin comes with an attractive flat UI css stylesheet.

Notes:
  1. Please before you start use plugin create a fixer acount https://fixer.io/
  2. Get API-key because plugin want working without it 

<head>
  <!-- include currencly.css and copy the font folder to one folder above your /css folder -->
  <link href="path/to/css/currenclyStyle.css" rel="stylesheet">
  <!-- include a copy of jquery (if you haven't already) -->
  <script src="path/to/js/jquery-3.4.1.min.js"></script>
  <!-- include currenclyPlugin -->
  <script src="path/to/js/currencly.Plugin.js"></script>  

  <script type="text/javascript">
  $(document).ready(function() {
	const app = $("#example").currencly({
		apiKey: 'YOUR_FIXER_API_KEY',
		fromCurrency: "EUR", // Exchange from currency
		toCurrency: "USD",  //Exchange to currency
		amount: 0, //Default amount of currency
		render: true, // Render on load
		loadingAnimation: true, // Show loading icon on load
		view: 'large', // Plugin view size 'large' or 'compact'
		loaderType:'default', // Loading icon type 'default', 'transparent' and 'rhombus'
		trigger: 'change', //Convert trigger action 'change' or 'click'
		unit: false, // Show bottom container with units 'true' or 'false'
	});
  });
  </script>
</head>
<body>
  <!-- Have a target for where you want showe the plugin -->
  <div id="example"></div>

</body>




const app2 = $("#example2").currencly({
	fromCurrency: "USD", // Exchange from currency
	toCurrency: "CAD",  //Exchange to currency
	amount: 500, //Default amount of currency
	render: true, // Render on load
	loadingAnimation: true, // Show loading icon on load
	view: 'large', // Plugin view size 'large' or 'compact'
	loaderType:'rhombus', // Loading icon type 'default', 'transparent' and 'rhombus'
	trigger: 'click', //Convert trigger action 'change' or 'click'
	unit: false, // Show bottom container with units 'true' or 'false'
	theme: 'light' // Theme style 'dark' or 'light'
});




	const app3 = $("#example3").currencly({
		fromCurrency: "USD", // Exchange from currency
		toCurrency: "EUR",  //Exchange to currency
		amount: 2500, //Default amount of currency
		render: true,  // Render on load
		loadingAnimation: true, // Show loading icon on load
		view: 'large',  // Plugin view size 'large' or 'compact'
		loaderType:'rhombus',  // Loading icon type 'default', 'transparent' and 'rhombus'
		trigger: 'click', // Convert trigger action 'change' or 'click'
		unit: true, // Show bottom container with units 'true' or 'false'
		theme: 'light', // Theme style 'dark' or 'light'
		layout: 'default-row' // Layout style 'default' or 'default-row'
	});




		const app4 = $("#example4").currencly({
			fromCurrency: "USD", // Exchange from currency
			toCurrency: "EUR",  //Exchange to currency
			amount: 2500, //Default amount of currency
			render: true, // Render on load
			loadingAnimation: true, // Show loading icon on load
			view: 'compact', // Plugin view size 'large' or 'compact'
			loaderType:'transparent', // Loading icon type 'default', 'transparent' and 'rhombus'
			trigger: 'change', // Convert trigger action 'change' or 'click'
			unit: true, // Show bottom container with units 'true' or 'false'
			theme: 'dark', // Theme style 'dark' or 'light'
			layout: 'default-row', // Layout style 'default' or 'default-row'
		});