<div class="container">
  <div class="key">
    <p>Get Your FREE API KEY <a target="_blank" href="https://www.exchangerate-api.com/">HERE</a></p>
  </div>


  <div class="currency-container">
    <h1>Currency<br>Converter</h1>
    <div class="input-box">
      <label for="amount">Enter amount</label>
      <input type="text" id="amount" placeholder="100" required />
    </div>
    <div class="currency">
      <div class="box">
        <select class="select-option" name="from-currency" id="fromCurrency">
          <option value="USD">United States Dollar</option>
        </select>
      </div>
      <div>
        <span>TO</span>
      </div>
      <div class="box">
        <select class="select-option" name="to-currency" id="toCurrency">
          <option value="USD">United States Dollar</option>
        </select>
      </div>
      <button class="convert">Convert</button>
      <p class="result"></p>
      <p class="error"></p>

    </div>
  </div>
</div>

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Bricolage Grotesque', sans-serif;
      }

      h1 {
        font-size: 5em;
        font-weight: bold;
        text-align: center;
        margin: .5em 0;
        line-height: .8;
      }

      .container {
        margin: auto;
        min-height: 100vh;
        background-color: #202020;
        padding: 2em 0;
        color: #040203;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .currency-container {
        height: fit-content;
        background-color: #7cb889;
        padding: 3em;
        border-radius: 40px;
      }

      .currency {
        margin-top: 50px;
        padding: 20px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1.5rem;
      }

      .box {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .input-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      label {
        font-size: 1.5em;
        margin-bottom: .4em;
      }

      #amount {
        width: 300px;
        padding: 20px;
        border-radius: 30px;
        font-size: 3em;
        border: 3px solid black;
        background: transparent;
        color: black;
        
      }
      #amount:focus {
        border: 3px solid white;
        outline: none;
      }

      ::placeholder {
        color: rgba(0,0,0,0.6);
        opacity: 1; /* Firefox */
      }

      .select-option {
        font-size: 16px;
        color: #333;
        padding: 20px;
        display: block;
        font-weight: 700;
        line-height: 1.3;
        width: 100%;
        max-width: 100%;
        margin: 0;
        outline: none;
        border-radius: 20px;
        border: 3px solid black;
      }

      button {
        width: 100%;
        height: 100px;
        padding: 10px;
        border-radius: 30px;
        border: none;
        font-size: 1.5em;
        align-items: center;
        background-color: black;
        color: #fff;
        margin-top: 30px;
      }
      .result {
        color: black;
        font-size: 2.5em;
      }
      .error {
        color: #800020;
        font-size: 12px;
      }
      .key {
        margin-bottom: 60px;
        color: #f17b55;
      }
      .key a {
        color: #f17b55;
      }

      /* Media query for small screens */
      @media only screen and (max-width: 600px) {
        .select-option {
          width: 100%;
          font-size: 10px;
        }

        #amount {
          width: 100%;
          font-size: 12px;
        }

        .box {
          width: 100%;
          padding: 0px 10px;
        }
        body {
          font-size: 12px;
        }

        .container p,
        .container label,
        .container input,
        .container select,
        .container span,
        .container button,
        .container .result {
          font-size: 12px;
        }
      }

let input = document.getElementById("amount");

let apiKey = "24faec6b42da4a96ceea41d3";

let fromCurrency = document.getElementById("fromCurrency");
let toCurrency = document.getElementById("toCurrency");

function createOption(currency, defaultCode, element) {
  const option = document.createElement("option");
  option.classList.add("select-option");
  option.value = currency.code;
  if (currency.code === defaultCode) {
    option.selected = true;
  }
  option.text = `${currency.flag} ${currency.code} - ${currency.name}`;
  element.appendChild(option);
}

function addCurrency() {
  const result = currencies.forEach((currency) => {
    const optionFrom = document.createElement("option");
    optionFrom.classList.add("select-option");
    optionFrom.value = currency.code;
    if (currency.code === "USD") {
      optionFrom.selected = true;
    }
    optionFrom.text = `${currency.flag} ${currency.code} - ${currency.name}`;

    fromCurrency.appendChild(optionFrom);

    const optionTO = document.createElement("option");
    optionTO.classList.add("select-option");
    optionTO.value = currency.code;
    if (currency.code === "EUR") {
      optionTO.selected = true;
    }
    optionTO.text = `${currency.flag} ${currency.code} - ${currency.name}`;
    toCurrency.appendChild(optionTO);
  });
}
addCurrency();

const convertBtn = document.querySelector(".convert");
convertBtn.addEventListener("click", () => {
  convertCurrency();
});

function convertCurrency() {
  const BASE_URL = `https://v6.exchangerate-api.com/v6/${apiKey}`;

  const fromCurrrencyCode = document.getElementById("fromCurrency").value;
  const toCurrencyCode = document.getElementById("toCurrency").value;
  const result = document.querySelector(".result");
  const error = document.querySelector(".error");

  console.log(fromCurrrencyCode);
  console.log(toCurrencyCode);

  const amount = input.value;

  if (amount !== "" && parseFloat(amount) >= 1) {
    const url = `${BASE_URL}/pair/${fromCurrrencyCode}/${toCurrencyCode}`;
    console.log(url);
    fetch(url)
      .then((resp) => resp.json())
      .then((data) => {
        console.log(data.conversion_rate);

        const conversionResult = (amount * data.conversion_rate).toFixed(2);
        const formattedResult = conversionResult.replace(
          /\B(?=(\d{3})+(?!\d))/g,
          ","
        );

        result.innerHTML = `${amount} ${fromCurrrencyCode} = ${formattedResult} ${toCurrencyCode}`;
        amount.innerHTML = " ";
      })
      .catch(() => {
        error.textContent = "An error occured, please try again later ";
      });
  } else {
    alert("Please enter an amount");
  }
}