Помогите разобрать работу кода

const inputSearch = document.querySelector("input");
const inputList = document.querySelector(".dropdown__list");
const users = document.querySelector(".dropdown__users");

//удаление фиолетового блока при нажатии на крестик
users.addEventListener("click", function (event) {
  let target = event.target;
  if (!target.classList.contains("btn-close")) {
    return; //если нет кнопки закрытия (красный крестик на фиолетовом блоке) выход из функции (???)
  }

  target.parentElement.remove(); //удаляет фиолетовый блок из DOM-дерева (???)
});

//при клике на элемент из выпадающего списка создает фиолетовый блок (addChosen)
inputList.addEventListener("click", function (event) {
  let target = event.target;
  if (!target.classList.contains("dropdown-content")) {
    return; //если нет класса "dropdown-content" выход из функции (???)
  }

  addChosen(target);
  inputSearch.value = ""; ///???
  removePredictions(); //убирает выпадающий список после клика на элемент из выпадающего списка
});

//функция убирает выпадающий список после клика на один из его элементов
function removePredictions() {
  inputList.innerHTML = "";
}

//функция показывает всплывающий список
function showPredictions(repositories) {
  //let dropdownPredictions = document.querySelectorAll(".dropdown-content");

  for (let repositoriesIndex = 0; repositoriesIndex < 5; repositoriesIndex++) {
    //позволяет показать только 5 элементов в списке
    let name = repositories.items[repositoriesIndex].name; //берем данные из API
    let owner = repositories.items[repositoriesIndex].owner.login; //берем данные из API
    let stars = repositories.items[repositoriesIndex].stargazers_count; //берем данные из API

    let dropdownContent = `<div class="dropdown-content" data-owner="${owner}" data-stars="${stars}">${name}</div>`;
    inputList.innerHTML += dropdownContent; //создаем переменную, туда кладем созданный класс и добавляем его как список всплывающего меню
  }
}

//функция создает фиолетовый блок с данными из API
function addChosen(target) {
  let name = target.textContent;
  let owner = target.dataset.owner;
  let stars = target.dataset.stars;

  users.innerHTML += `<div class="chosen">Name: ${name}<br>Owner: ${owner}<br>Stars: ${stars}<button class="btn-close"></button></div>`;
  //внутрь класса "dropdown__users" создаем класс(ы) chosen с полученными данными
}

//??
async function getPredictions() {
  const urlSearchRepo = new URL("https://api.github.com/search/repositories");
  let repoPart = inputSearch.value; //что за value? не могу понять
  if (repoPart == "") {
    removePredictions();
    return;
  }

  urlSearchRepo.searchParams.append("q", repoPart); //почему здесь стоит q?
  try {
    let response = await fetch(urlSearchRepo);
    if (response.ok) {
      let repo = await response.json();
      showPredictions(repo);
    } else {
      return null
    };
  } catch (error) {
    console.log(error);
  }
}

//??
function debounce(fn, timeout) {
  let timer = null;

  return (...args) => {
    clearTimeout(timer);
    return new Promise((resolve) => {
      timer = setTimeout(() => resolve(fn(...args)), timeout);
    });
  };
}

//??
const getPredictionsDebounce = debounce(getPredictions, 500);
inputSearch.addEventListener("input", getPredictionsDebounce);

console.log("works!");