JSFiddle - React, Tailwind, and code Playground

by kordarei

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
</head>
<body>
  <div id="app">
    
  </div>  
</body>
</html>

JavaScript

new Vue({
	el: '#app',
  data() {
      return {
        apiKey: "73aea512a77233e6eefc44051bed27b3",
        baseCurrency: "EUR",
        currencies: ["USD", "GBP", "CHF", "JPY", "HKD", "RUN", "CNY"]
      };
    },
  created() {
  	this.fetchExchange();
  },
  methods: {
  	fetchExchange() {
      let url = `http://data.fixer.io/api/latest?access_key=${this.apiKey}&base=${this.baseCurrency}&symbols=${this.currencies.join(',')}`;
			axios.get(url ,{
          headers: {
            'Content-Type': 'application/json'
          }
        })
        .then((response) => this.fixer = response)
    }
  }
})