Смена валют js

@AndrewPhoeni · Регистрация: 04.06.2020

Author24 — интернет-сервис помощи студентам

Делаю конвертер валют, но у меня возникла проблема, он работет неккоректно, вроде как считает, но когда нажать на кнопку смена валют, то валюты пропадают, как это исправить? Может там как-то надо создать массив с этими валютами и потом с помощью функции вывести как-то?

HTML5

<!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>
        </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>
        </select>
        <input id="amount-two" placeholder="200" />
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Код

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;
  }
}

Javascript

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();
});

	13.07.2022, 11:33