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 that you have read and understand our privacy policy and code of conduct.

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