Полноценный конвертер валюты на JS с использованием API

const container = document.querySelector('.container .group');
const currencyDate = document.querySelector('.container .date');

const firstInput = container.querySelector('.first-input');
const secondInput = container.querySelector('.second-input');

const firstSelect = container.querySelector('.first-select');
const secondSelect = container.querySelector('.second-select');

firstInput.addEventListener('input', () => firstHandle());
secondInput.addEventListener('input', () => secondHandle());

firstSelect.addEventListener('change', () => firstHandle());
secondSelect.addEventListener('change', () => secondHandle());

const firstHandle = () => {
	const value = firstInput.value;
	const currency = firstSelect.options[firstSelect.selectedIndex].dataset.currency;
	secondInput.value = value * currency;
}
const secondHandle = () => {
	const value = secondInput.value;
	const currency = secondSelect.options[secondSelect.selectedIndex].dataset.currency;
	firstInput.value = value * currency;
}

const handleInput = () => {
	const first = firstSelect.options[firstSelect.selectedIndex].dataset.currency;
	const second = secondSelect.options[secondSelect.selectedIndex].dataset.currency;
	
	firstInput.value = 1;
	firstHandle();
};

const handleRequest = ({ data }) => {
	const date = new Date(data.PreviousDate);
	const optionsDateFormat = {
		year: 'numeric',
		month: '2-digit',
		day: '2-digit',
		hour: 'numeric',
 		minute: 'numeric',
		second: 'numeric'
	};
	
	currencyDate.innerHTML = date.toLocaleDateString('ru-RU', optionsDateFormat);


	Object.values(data.Valute).forEach(valute => {
		const option = document.createElement('option');
		const option2 = document.createElement('option');
		
		option.innerHTML = valute.Name;
		option.dataset.currency = valute.Value;
		if (valute.CharCode === 'EUR')
			option.selected = true;
			
		option2.innerHTML = valute.Name;
		option2.dataset.currency = valute.Value;
		if (valute.CharCode === 'BYN')
			option2.selected = true;
			
		firstSelect.append(option);
		secondSelect.append(option2);
	});
	
	handleInput();
}

const options = {
	headers: { 'Content-Type': 'application/json' }
}
axios.get('https://www.cbr-xml-daily.ru/daily_json.js', options)
	.then(handleRequest).catch();

@import url("https://fonts.googleapis.com/css?family=Nunito:400,600&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

body {
  min-height: 100vh;
  line-height: 1;
  display: flex;
  font-family: "Nunito", sans-serif;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.container {
  margin: auto;
  width: 450px;
  height: 300px;
  border: 1px solid #dfe6e9;
  border-radius: 10px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
}
.container h2 {
  font-size: 28px;
  margin-bottom: 20px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  color: #2d3436;
}
.container p {
  margin-bottom: 20px;
  color: #636e72;
}
.container .group {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.container .group input, .container .group select {
  height: 40px;
  border-radius: 8px;
  border: 1px solid #b2bec3;
  width: 100%;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div class="container">
	<h2>Конвертер валют</h2>
	<p>Последнее обновление: <b class="date">26.03.2020 18:35:57</b></p>
	<div class="group">
		<input type="number" class="first-input">
		<select class="first-select"></select>

		<input type="number" class="second-input">
		<select class="second-select"></select>
	</div>
</div>