Dropdown list for currency converter

const currencyOne = document.getElementById(‘currency-one’);
const currencyTwo = document.getElementById(‘currency-two’);
const amountOne = document.getElementById(‘amount-one’);
const amountTwo = document.getElementById(‘amount-two’);
const rates = document.getElementById(‘rate’);
const swap = document.getElementById(‘swap’);

// Fetch exchange rates and update the dome
function converter() {
const currency_one = currencyOne.value;
const currency_two = currencyTwo.value;

fetch(`https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json`)
.then((res) => res.json())
.then((data) => {

data.unshift({“txt”:”Українська гривня”, “rate”: 1, “cc”:”UAH”})

currency1 = data.find(item => item.cc === currency_one);
currency2 = data.find(item => item.cc === currency_two);

rates.innerText = `1 ${currency_one} = ${(1 * currency1.rate / currency2.rate).toFixed(4)} ${currency_two}`;
amountTwo.value = (amountOne.value !== ”) ? (amountOne.value * currency1.rate / currency2.rate).toFixed(2) : ”;
});
}

converter();

// Event Listeners
currencyOne.addEventListener(‘change’, converter);
amountOne.addEventListener(‘input’, converter);
currencyTwo.addEventListener(‘change’, converter);
amountTwo.addEventListener(‘input’, converter);

swap.addEventListener(‘click’, () => {
const temp = currencyOne.value;
currencyOne.value = currencyTwo.value;
currencyTwo.value = temp;
converter();
});
body {
background-color: #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 650px;
margin: 0;
padding: 20px;
}

/* .container {
border-width:1;
border-color: rgb(190,190,190);
border-style: solid;
} */

.header {
display: flex;
align-items: center;
}

.indent-right {
display: flex;
width: 24px;
height: 24px;
background-image: url(“https://cdn.privat24.ua/icons/file/ServiceCurrency.svg”);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
margin-right: 10px !important;
}

.btn {
display: inline-flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
position: relative;
width: 57px;
height: 44px;
font-size: 16px;
line-height: 1.5;
font-family: ‘Open Sans’, sans-serif;
font-weight: 600;
padding: 8px 16px;
border-radius: 4px;
transition-duration: 450ms;
transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
word-break: normal;
color: rgba(0, 0, 0, 0.54);
background: rgb(255, 255, 255);
box-shadow: rgb(0 0 0 / 12%) 0px 2px 4px 0px, rgb(0 0 0 / 12%) 0px 0px 4px 0px;
white-space: nowrap;
border-style: none;
border-width: 0px;
border-color: rgb(255, 255, 255);
margin: 0px;
cursor: pointer;
}

.btn:hover {
background-color: lightgrey;
}

.swap-rate-container .btn-arrows {
transform: rotate(90deg);
opacity: 0.54;
transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1);
position:absolute;
font-family: ‘Open Sans’, sans-serif;
}

.currency {
padding: 40px 0;
display: flex;
align-items: center;
justify-content: space-between;
}

.currency select {
padding: 10px 50px 10px 10px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
font-size: 16px;
background: transparent;
background-image: url(‘data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%20000002%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E’);
background-position: right 10px top 50%, 0, 0;
background-size: 12px auto, 100%;
background-repeat: no-repeat;
cursor: pointer;
border-bottom: 2px solid rgba(0, 0, 0, 0.12);
}

.currency select:hover {
border-bottom: 2px solid rgba(0, 0, 0, 0.54);
}

.currency select:focus {
border-color: #8dc641;
}

select {
outline: 0;
border: none;
}

.select-selected {

}

.select-items {
background-color: #5fbaa7;
}

option[value=USD] {
border-radius: 2px;
display: flex;
width: 18px;
height: 15px;
background-image: url(“https://cdn.privat24.ua/icons/file/US.svg”);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}

input::placeholder {
font-family: ‘Open Sans’, sans-serif;
}

.currency input {
background: transparent;
font-size: 20px;
line-height: 1.5;
text-align: right;
font-weight: 400;
color: rgba(0, 0, 0, 0.87);
border-style: none;
border-width: 0px;
border-radius: 0px;
background: transparent;
box-shadow: none;
outline: none;
width: 65%;
font-family: ‘Open Sans’, sans-serif;
background: transparent;
border-bottom: 2px solid rgba(0, 0, 0, 0.12);
margin-top: 5.5px;
}

.currency input:hover {
display:block;
line-height: 1.5;
font-family: “Open Sans”, sans-serif;
border-bottom: 2px solid rgba(0, 0, 0, 0.54);
}

.currency input:focus {
border-color: #8dc641;
}

.currency-select {
position: relative;
width: 100px;
}

/* .currency input::after {
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}

.currency input::before {
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}

.currency input:hover::after {
transform: scaleX(1);
}

.currency input:hover::before {
transform: scaleX(1);
} */

.select-placeholder {
background: rgb(255, 255, 255);
color: rgba(0, 0, 0, 0.38);
}

.swap-rate-container {
display: flex;
align-items: center;
justify-content: space-between;
}

.rate {
color: black;
font-size: 15px;
padding: 0 10px;
background: #E0E0E0;
line-height: var(–tl-small);
padding: 8px;
font-family: ‘Open Sans’, sans-serif;
border-radius: 2px;
}

input::-webkit-inner-spin-button {
display: none !important;
}

@media (maz-width: 600px) {
.currency input {
width: 200px;
}
}
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Currency Converter</title>
<link rel=”shortcut icon” href=”img/currencies-icon-10.jpg” type=”image/x-icon”>
<link rel=”stylesheet” href=”style.css” />
</head>
<body>
<div class=”container”>
<div class=”header”>
<div class=”indent-right”></div>
<b>Конвертор валют</b>
</div>
<div class=”currency”>
<select id=”currency-one”>
<option value=”EUR”>EUR €</option>
<option value=”USD” selected>USD $</option>
<option value=”GBP”>GBP £</option>
<option value=”UAH”>UAH ₴</option>
</select>
<input id=”amount-one” placeholder=”200″ />
</div>

<div class=”swap-rate-container”>
<button class=”btn” id=”swap”>
<div class=”btn-arrows”>
<div style=”display: flex;”>
<svg
height=”24px”
width=”24px”
version=”1.1″
viewBox=”0 0 24 24″
xmlns=”http://www.w3.org/2000/svg”
>
<g
fill=”none”
fill-rule=”evenodd”
stroke=”none”
stroke-width=”1″
>
<path d=”M0 0h24v24H0z”></path>
<path
d=”M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z”
fill=”#000″
fill-rule=”nonzero”
></path>
</g>
</svg>
</div>
</div>
</button>
<div class=”rate” id=”rate”></div>
</div>
<div class=”currency”>
<select id=”currency-two”>
<option value=”UAH” selected>UAH ₴</option>
<option value=”GBP”>GBP £</option>
<option value=”EUR”>EUR €</option>
<option value=”USD”>USD $</option>
</select>
<input id=”amount-two” placeholder=”200″ />
</div>
</div>
<script src=”script.js”></script>
</body>
</html>