Делаю конвертер, но столкнулся с проблемой, когда вот по умолчанию стоит, USD на UAH, то конвертер не работает, но когда я нажму кнопку смена курса (кнопка со стрелками), то конвертер заработает, причем это не работает только с UAH, с остальными валютами все нормально, как это исправить?
const container = document.querySelector(".container");
const currencyEl_one = document.getElementById('currency-one');
const currencyEl_two = document.getElementById('currency-two');
const amountEl_one = document.getElementById('amount-one');
const amountEl_two = document.getElementById('amount-two');
const rateEl = document.getElementById('rate');
const swap = document.getElementById('swap');
// Fetch exchange rates and update the dome
function converter() {
const currency_one = currencyEl_one.value;
const currency_two = currencyEl_two.value;
fetch(`https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json=${currency_one}`)
.then((res) => res.json())
.then((data) => {
console.log(data);
const rate = data.find(({cc})=> cc === currency_two);
console.log(rate);
rateEl.innerText = `1 ${currency_one} = ${rate.rate} ${currency_two}`;
amountEl_two.value = (amountEl_one.value * rate.rate).toFixed(2);
});
}
// Event Listeners
currencyEl_one.addEventListener('change', converter);
amountEl_one.addEventListener('input', converter);
currencyEl_two.addEventListener('change', converter);
amountEl_two.addEventListener('input', converter);
swap.addEventListener('click', () => {
const temp = currencyEl_one.value;
currencyEl_one.value = currencyEl_two.value;
currencyEl_two.value = temp;
converter();
});
converter();
:root {
--primary-color: #5fbaa7;
}
* {
box-sizing: border-box;
}
body {
background-color: #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 20px;
}
.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;
}
.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;
}
b {
font-weight: var(--tw-semi);
}
.currency {
padding: 40px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.currency select {
padding: 10px 20px 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: 1px solid rgba(0, 0, 0, 0.12);
}
.currency select:hover {
}
input[type="number"]:hover {
}
select {
outline: 0;
border: none;
}
input::placeholder {
font-family: 'Open Sans', sans-serif;
margin-right: -17px;
}
.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: 68%;
font-family: 'Open Sans', sans-serif;
background: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
margin-top: 6px;
}
.currency input:hover {
}
.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: 14px;
padding: 0 10px;
}
@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="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 class="select-placeholder">Виберите</option>
<option value="EUR">EUR</option>
<div class="flag_usd">
<div style="display: flex;">
<option value="USD" selected>
USD
</option>
<svg height="24px"
width="24px"
version="1.1"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12.192 10.868c-1.736-.438-2.294-.892-2.294-1.597 0-.81.772-1.373 2.065-1.373 1.362 0 1.867.631 1.913 1.56h1.69c-.054-1.28-.817-2.502-2.634-2.92V5h-1.805v1.517c-1.673.255-2.99 1.335-2.99 2.769 0 1.715 1.461 2.57 3.595 3.067 1.913.445 2.295 1.1 2.295 1.79 0 .512-.375 1.329-2.065 1.329-1.576 0-2.195-.683-2.295-1.56H8c.092 1.627 1.596 2.908 3.127 2.908v1.548h1.805v-1.53c1.498 0 2.855-1.18 2.855-2.703 0-2.109-1.859-2.822-3.595-3.267z"
fill="#000"
fill-rule="evenodd"
stroke="none"
stroke-width="1">
</path>
</svg>
</div>
</div>
<option value="GBP">GBP</option>
<option value="UAH">UAH</option>
</select>
<input type="number" 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 class="select-placeholder">Виберите</option>
<option value="UAH" selected>UAH</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="USD">USD</option>
</select>
<input type="number" id="amount-two" placeholder="200" />
</div>
</div>
<script src="script.js"></script>
</body>
</html>