Get FIPE Table value and displays it on top of the current price

fipe.js

(async () => {
  const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const processVehicleCard = async (vehicleCard) => {
  const title = vehicleCard.querySelector('h2').innerText;
  const subTitle = vehicleCard.querySelector('h3').innerText;
  const [make, model] = title.split(' ');
  const imgAlt = vehicleCard.querySelector('img').alt;
  const year = imgAlt.split(' ').slice(-1)[0].split('/')[0];
  console.log({ title, subTitle, make, model, year });
  

  const fipeApiUrl = 'https://parallelum.com.br/fipe/api/v1';
  const getJson = async (url) => {
    const response = await fetch(url);
    return response.json();
  };

  const getMarcaId = async (make) => {
    const marcas = await getJson(`${fipeApiUrl}/carros/marcas`);
    const marca = marcas.find((m) => m.nome.toUpperCase() === make.toUpperCase());
    return marca ? marca.codigo : null;
  };

  const getModeloId = async (makeId, model) => {
    const modelos = await getJson(`${fipeApiUrl}/carros/marcas/${makeId}/modelos`);
    const modelWords = `${title} ${subTitle}`.toUpperCase().split(' ');
  
    let bestMatchModel = null;
    let maxMatches = 0;
  
    modelos.modelos.filter(m => {
      return m.nome.toUpperCase().includes(model.toUpperCase());
    }).forEach((m) => {
      const modelName = m.nome.toUpperCase().replace('AUT.', 'AUTOMÁTICO');
      const modelNameWords = modelName.split(' ');
  
      let matches = 0;
      modelWords.forEach((word) => {
        if (modelNameWords.includes(word)) {
          matches++;
        }
      });
  
      if (matches > maxMatches) {
        maxMatches = matches;
        bestMatchModel = m;
      }
    });
  
    return bestMatchModel ? bestMatchModel.codigo : null;
  };
  

  const getYearsId = async (makeId, modelId, year) => {
    const anos = await getJson(`${fipeApiUrl}/carros/marcas/${makeId}/modelos/${modelId}/anos`);
    const ano = anos.find((a) => a.nome.includes(year))
    return ano ? ano.codigo : null;
  };

  const getTabelaFipe = async (makeId, modelId, yearsId) => {
    return await getJson(`${fipeApiUrl}/carros/marcas/${makeId}/modelos/${modelId}/anos/${yearsId}`);
  };

  const addFipePrice = (fipePrice) => {
    const priceElement = vehicleCard.querySelector('#valorVerParcelas');
    const fipePriceElement = document.createElement('p');
    fipePriceElement.innerText = `FIPE: R$ ${fipePrice}`;
    fipePriceElement.style.marginBottom = '1rem';
    fipePriceElement.style.marginLeft = 'auto';
    fipePriceElement.style.marginRight = 'auto';
    fipePriceElement.style.paddingLeft = '13px';
    priceElement.parentElement.insertBefore(fipePriceElement, priceElement);
  };

  try {
    await delay(100); // 100ms delay between each card processing
    const makeId = await getMarcaId(make);
    console.log({ makeId });
    const modelId = await getModeloId(makeId, model);
    console.log({ modelId });
    const yearsId = await getYearsId(makeId, modelId, year);
    console.log({ yearsId });
    const tabelaFipe = await getTabelaFipe(makeId, modelId, yearsId);
    console.log({ tabelaFipe });
    addFipePrice(tabelaFipe.Valor);
  } catch (error) {
    console.error('Error:', error);
  }
};

  const vehicleCards = document.querySelectorAll('[data-qa^="vehicle_card_"]');

  for (const vehicleCard of vehicleCards) {
    await processVehicleCard(vehicleCard);
  }
})();