Currency_oop_app.js code

        
         import Currency from './Currency_class.js'

const header = document.querySelector('header')

const inputField = document.querySelectorAll('input')
const currencyCode = document.querySelectorAll('[data-currency-code]')
const countryFlag = document.querySelectorAll('[data-country-flag]')
const errorMessage = document.querySelector('#error')
const gettinDataMessage = document.querySelector('#getting_data')

const button = document.querySelectorAll('[data-popup-button]')
const popupList = [...document.querySelectorAll('[data-popup-list]')]

// *****    Description of properties and methods of the Currency class         *****
// ***** Exchange offices and charts for currencies USD RUB TRY KZT CAD GBP CHF *****
//
// currencyOne - selected currency N1
// currencyTwo - selected currency N2
// currencyRatesToday - exchange rates data for today
// currencyRatesForYear - exchange rate data for the past year from today
// exchangeRate - exchange rates for today for two selected currencies
// fetchTodayData() - receiving current exchange rates as an object {CAD: 1.353848, CHF: 0.892547...}
// fetchYearlyData() - receiving courses for the past year from the date in the form of an object:
//                     {2022-08-14: {CAD: 1.310153, CHF: 0.96612...}...}
//                     {2022-08-15: {CAD: 1.311864, CHF: 0.96255...}...}
// setCurrencies() - set currency signs and country flags to currency selection input fields
// setCurrencyRate() - set the exchange rate for today for two selected currencies
// setNumberInputField0() - setting the value in the Input field to 0
// setNumberInputField1() - setting the value in the Input 1 field

// *****    Description of properties and methods of the Currency class         *****

const exchangeOffice = new Currency(
  inputField,
  currencyCode,
  countryFlag,
  errorMessage,
  gettinDataMessage
)

exchangeOffice.setCurrencies()

await exchangeOffice.fetchTodayData()

exchangeOffice.setCurrencyRate()

await exchangeOffice.fetchYearlyData()

const currencyDataForYear = Object.values(exchangeOffice.currencyRatesForYear)

// Currency exchange rate chart for default USD and RUB
let currencyChart
drawChart()

inputField[0].addEventListener(
  'input',
  exchangeOffice.setNumberInputField1.bind(exchangeOffice)
)
inputField[1].addEventListener(
  'input',
  exchangeOffice.setNumberInputField0.bind(exchangeOffice)
)

button[0].addEventListener('click', () => {
  popupList[1].classList.add('hiding')
  popupList[0].classList.toggle('hiding')
  addOrRemoveOverlay()
})
button[1].addEventListener('click', e => {
  popupList[0].classList.add('hiding')
  popupList[1].classList.toggle('hiding')
  addOrRemoveOverlay()
})

// Overlay close listener
document.addEventListener('click', e => {
  if (e.target.matches('[data-new-overlay]')) closeAllPopupsAndOverlay()
})

// Currency change listeners
popupList[0].addEventListener('click', e => {
  const isClickedLi = e.target.closest('li')
  if (isClickedLi) {
    exchangeOffice.currencyOne = isClickedLi.dataset.currency
    exchangeOffice.setCurrencies()
    exchangeOffice.setCurrencyRate()
    exchangeOffice.setNumberInputField1()
    // Annual chart update:
    updateValuesForChart()
    currencyChart.update()
  }
})

popupList[1].addEventListener('click', e => {
  const isClickedLi = e.target.closest('li')
  if (isClickedLi) {
    exchangeOffice.currencyTwo = isClickedLi.dataset.currency
    exchangeOffice.setCurrencies()
    exchangeOffice.setCurrencyRate()
    exchangeOffice.setNumberInputField0()
    // Annual chart update:
    updateValuesForChart()
    currencyChart.update()
  }
})

// ----- Additional functions -----

function drawChart() {
  const daysDataForYear = Object.keys(exchangeOffice.currencyRatesForYear)
  const days = daysDataForYear.map(formatDate)
  const rates = setValuesForChart()

  const ctx = document.getElementById('annual_course')

  Chart.defaults.font.size = 18
  Chart.defaults.color = '#ccced0'

  const data = {
    labels: days,
    datasets: [
      {
        label: `Rate ${exchangeOffice.currencyOne} / ${exchangeOffice.currencyTwo}`,
        data: rates,
        backgroundColor: 'rgba(245, 192, 41, 0.3)',
        borderColor: '#f5c029',
        borderWidth: 1,
        fill: true,
      },
    ],
  }

  const options = {
    scales: {
      y: {
        beginAtZero: false,
      },
      x: {
        ticks: {
          callback: function (value, index, values) {
            if (index % 45 === 0 || index === data.length - 1)
              return data.labels[index]
          },
        },
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: true,
        intersect: false,
        displayColors: false,
        padding: 12,
      },
    },
  }

  currencyChart = new Chart(ctx, {
    type: 'line',
    data,
    options,
  })
}

function setValuesForChart() {
  return currencyDataForYear.map(dailyRate => {
    return (
      dailyRate[exchangeOffice.currencyTwo] /
      dailyRate[exchangeOffice.currencyOne]
    ).toFixed(2)
  })
}

function updateValuesForChart() {
  currencyChart.data.datasets[0].data = setValuesForChart()
  currencyChart.data.datasets[0].label = `Rate ${exchangeOffice.currencyOne} / ${exchangeOffice.currencyTwo}`
}

function formatDate(dayUnformatted) {
  return new Intl.DateTimeFormat().format(Date.parse(dayUnformatted))
}

function addOrRemoveOverlay() {
  if (popupList.every(list => list.classList.contains('hiding'))) {
    header.removeAttribute('data-new-overlay')
  } else {
    header.setAttribute('data-new-overlay', true)
  }
}

function closeAllPopupsAndOverlay() {
  popupList[0].classList.add('hiding')
  popupList[1].classList.add('hiding')
  header.removeAttribute('data-new-overlay')
}