Gabe.js

const DOMSelectors = {
  input: document.querySelector("#input"),
  form: document.querySelector("#form"),
  question: document.querySelector("#question"),
  true: document.querySelector("#true"),
  false: document.querySelector("#false"),
};
async function main() {
  const api = "https://opentdb.com/api.php?amount=50&type=boolean";
  const response = await fetch(api);
  const data = await response.json();

  const qa = data.results.map((question) => ({
    question: question.question,
    correct: question.correct_answer,
    incorrect: question.incorrect_answers,
  }));
  game(qa);
}

function game(qa) {
  let i = 0;
  const used = [];

  DOMSelectors.form.addEventListener("submit", function (event) {
    event.preventDefault();
    const input = DOMSelectors.input.value;
    displayQuestion(input);
  });

  function displayQuestion(input) {
    if (i < input) {
      //selection

      let q = qa[i]; //iteration
      console.log(q);
      clear();
      DOMSelectors.question.insertAdjacentHTML(
        //sequencing
        "beforeend",
        `<h1>${q.question}</h1>`
      );
    }
  }
  DOMSelectors.true.addEventListener("click", function (event) {
    event.preventDefault();
    let answer = "True";
    checkAnswer(answer);
    displayQuestion(DOMSelectors.input.value);
    console.log(DOMSelectors.input.value);
  });

  DOMSelectors.false.addEventListener("click", function (event) {
    event.preventDefault();
    let answer = "False";
    checkAnswer(answer);
    displayQuestion(DOMSelectors.input.value);
    console.log(DOMSelectors.input.value);
  });

  function checkAnswer(answer) {
    let q = qa[i];
    if (q.correct.includes(answer)) {
      used.push("Correct");
    } else {
      used.push("Incorrect");
    }
    i++;
    if (i === Number(DOMSelectors.input.value)) {
      final(used);
    }
  }
  function final(array) {
    //algorithm
    let a = 0; //sequencing
    let b = 0;
    for (let i = 0; i < array.length; i++) {
      //iteration
      if (array[i].includes("Correct")) {
        a++;
      }
      if (array[i].includes("Incorrect")) {
        b++;
      }
    }
    clear();
    const correct = (a * 100) / DOMSelectors.input.value;
    const incorrect = (b * 100) / DOMSelectors.input.value;
    DOMSelectors.question.insertAdjacentHTML(
      "beforeend",
      `<h1>You got ${correct}% of them right and ${incorrect}% of them wrong!</h1>`
    );
  }
}

function clear() {
  DOMSelectors.question.innerHTML = "";
}

main();