text: function populateUFs() {
      const ufSelect = document.querySelector("[name=uf]")
  
  
      fetch("https://servicodados.ibge.gov.br/api/v1/localidades/estados")
      .then( res => res.json() )
      .then( states => {
  
          for( state of states ) {
              ufSelect.innerHTML += `<option value="${state.id}">${state.nome}</option>`
          }
  
      })
  }
  
  populateUFs()
  
  
  function getCities(event) {
      const citySelect = document.querySelector("[name=city]")
      const stateInput = document.querySelector("[name=state]")
  
  
      const ufValue = event.target.value
  
      const indexOfSelectedState = event.target.selectedIndex
      stateInput.value = event.target.options[indexOfSelectedState].text
  
      const url = `https://servicodados.ibge.gov.br/api/v1/localidades/estados/${ufValue}/municipios`
  
      citySelect.innerHTML = "<option value>Selecione a Cidade</option>"
      citySelect.disabled = true
  
      fetch(url)
      .then( res => res.json() )
      .then( cities => {
          for( city of cities ) {
              citySelect.innerHTML += `<option value="${city.nome}">${city.nome}</option>`
          }
  
          citySelect.disabled = false
  
      })
      
  }
  
  
  
  document
      .querySelector("select[name=uf]")
      .addEventListener("change", getCities)
  
  
  // itens de coleta
  const itemsToCollect = document.querySelectorAll(".items-grid li")
  
  for (item of itemsToCollect) {
      item.addEventListener("click", handleSelectedItem)
  }
  
  
      
  const collectedItems = document.querySelector("input[name=items]")
  
  let selectedItems = []
  
  function handleSelectedItem(event) {
      const itemLi = event.target
  
      // adicionar ou remover classe com js
      itemLi.classList.toggle("selected")
  
      const itemId = event.target.dataset.id
  
      // console.log('ITEM ID: ', itemId)
  
  
      // verificar se existem itens selecionados, se sim
      // pegar os itens selecionados
  
      const alreadySelected = selectedItems.findIndex( function(item) {
          const itemFound = item == itemId // isso será true ou false
          return itemFound
      })
  
  
      // se já estiver selecionado,
      if(alreadySelected >= 0 ) {
          // tirar a seleção
          const  filteredItems = selectedItems.filter( item => {
              const itemIsDifferent = item != itemId          
              return itemIsDifferent
          })
  
          selectedItems = filteredItems
      } else {
          // se não estiver selecionado, 
          // adiconar a seleção
          selectedItems.push(itemId)
      }    
  
  
      // console.log('selectedItems: ', selectedItems)
  
  
      // atualizar o campo escondido com os itens selecionados
      collectedItems.value = selectedItems
  
  }