0

Делаю конвертер, но столкнулся с проблемой, когда вот по умолчанию стоит, 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>

3
  • не заметил в загруженном json объекта UAH, и по ходу ты не правильно понимаешь метод массива find() 4 июл 2022 в 17:54
  • надо грузить тупо строку bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json, без всяких подстановок в конце урл, все валюты выводятся относительно гривны, то есть загрузить курс доллар к рублю ты не сможешь. 4 июл 2022 в 18:14
  • @Jean-Claude, а как правильно нужно? 4 июл 2022 в 18:26

1 ответ 1

1

Как уже сказал выше, урл api используется без всяких добавок в конце, это написано в документации api. Курсы всех валют загружаются относительно гривны и никак иначе.

во-вторых, ты неправильно используешь метод массива find(), у тебя массив объектов, поэтому фильтрацию надо делать не по элементу, а свойству перебираемого элемента.

в-третьих, так как получаешь курсы относительно гривны, поэтому придется высчитать базис, и уже от него рассчитывать допустим сколько в долларе рублей.

в-четвертых, загружать json надо один раз, а не при каждом клике.

пример работы https://jsbin.com/jodulipaye/edit?js,output

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`)
    .then((res) => res.json())
    .then((data) => {  
    
    //для расчета базиса
    data.unshift({"txt":"гривна","rate":1,"cc":"UAH"})
                    
      c1 = data.find(cc=> cc.cc === currency_one);
      c2 = data.find(cc=> cc.cc === currency_two);
      //console.log(c1,c2);
      rateEl.innerText =  `1 ${currency_one} = ${(1 *c1.rate / c2.rate).toFixed(4)} ${currency_two}`;
      amountEl_two.value = (amountEl_one.value *c1.rate / c2.rate).toFixed(2);
      
    });
}

// Event Listeners
currencyEl_one.addEventListener('change', converter);
amountEl_one.addEventListener('input', converter);
currencyEl_two.addEventListener('change', converter);
//это не прокатит, потому что везде результат заносится в `amountEl_two.value`
//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="RUB">RUB</option>
          <option value="UAH">UAH</option>
        </select>
        <input type="number" id="amount-one" placeholder="200" value="100" />
      </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="RUB">RUB</option>
          <option value="USD">USD</option>
        </select>
        <input type="number" id="amount-two" placeholder="200" />
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

2
  • Спасибо большое, вообщем я понял в чем была моя проблема, надо мне повторить методы массивов, по поводу JSON, там иногда есть такие моменты, где вставяется выражение в урл, но в данной ситуации, я понял, что не нужно, спасибо еще раз. 4 июл 2022 в 20:56
  • Вы мне ответили ru.stackoverflow.com/questions/1429253 тут, я пока не могу там отвечать, отвечу тут, дело в том, что не работает, я имею ввиду, мне надо, чтобы в первом селекте было EUR, USD, GBP, а во втором UAH, GBP, EUR, тоесть UAH и USD не повторялись. 13 июл 2022 в 10:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.