I have created a currency converter which works well, but there are two issues after I decided to add swap button. First, my swap button only works once.
For example, if I have on the screen:
*5 Euros =
147.592998 Cuban Pesos*, clicking the swap button will change it to *5 Cuban Pesos =
0.169385 Euros* (and will also change the text below it), but when I click to swap for the second time, nothing changes on the screen, while I would like to have it back to *5 Euros =
147.592998 Cuban Pesos*. Also, another issue is that values in my options list don't change. If I have *EUR - Euro* as 'from' value and *CUP - Cuban Peso* as 'to' value, clicking the swap button should make EUR as 'to' value but I don't see any change on the screen. I thought I had it covered with destructuring assignment but it didn't work out. Here is my JS and full code on codepen: <https://codepen.io/argentinaivan/pen/JjORaMb>

```
const currencies = "https://openexchangerates.org/api/currencies.json";

const input = document.querySelector("#amount");
const button = document.querySelector("#convert");
const swap = document.querySelector(".iconBox");
const resultHeading = document.querySelector("#result");
const fromToText = document.querySelector("#fromTo");
const toFromText = document.querySelector("#toFrom");

const select = document.querySelectorAll("select");

async function getCurrencies() {
  const response = await fetch(currencies);
  const data = await response.json();

  const keys = Object.keys(data);
  const values = Object.values(data);

  for (let i = 0; i < keys.length; i++) {
    if (keys[i].match(/(CLF|CNH|MRO|STD|VEF|XAG|XAU|XPD|XPT)/)) continue;
    select[0].innerHTML =
      select[1].innerHTML += `<option value="${keys[i]}">${keys[i]} - ${values[i]}</option>`;
  }
}

getCurrencies();

async function getData(reverse = "false") {
  if (input.value > 0) {
    let fromOptions = document.querySelector("#from");
    let toOptions = document.querySelector("#to");
    let fromValue = fromOptions.options[fromOptions.selectedIndex].value;
    let fromText = fromOptions.options[fromOptions.selectedIndex].text;
    let toValue = toOptions.options[toOptions.selectedIndex].value;
    let toText = toOptions.options[toOptions.selectedIndex].text;

    if (reverse === "swap") {
      [fromValue, toValue] = [toValue, fromValue];
      [fromText, toText] = [toText, fromText];
    }

    const url = `https://api.exchangerate.host/convert?from=${fromValue}&to=${toValue}&amount=${input.value}`;

    const response = await fetch(url);
    const data = await response.json();

    resultHeading.innerText = `${input.value} ${fromText.slice(6)}s =
    ${data.result} ${toText.slice(6)}s`;

    fromToText.innerText = `1 ${fromValue} = ${data.info.rate} ${toValue}`;
    toFromText.innerText = `1 ${toValue} = ${1 / data.info.rate} ${fromValue}`;
  } else {
    resultHeading.innerHTML = "Please, enter a valid amount";
    resultHeading.style.fontSize = "16px";
    fromToText.innerHTML = "";
    toFromText.innerHTML = "";
    setTimeout(function () {
      resultHeading.innerHTML = "";
      resultHeading.style.fontSize = "32px";
    }, 2000);
  }
}

button.addEventListener("click", getData);

swap.addEventListener("click", () => {
  getData("swap");
});

```