Further abstraction

[freemvmt]

Dom.js file is really beautifully organised, kudos.

Had some quick ideas for making your code more DRY/further abstracting some of the repetition.

1. Grab your buttons at the top of the doc.

  const answer1 = document.querySelector("#answer1");
  const answer2 = document.querySelector("#answer2"); ...

2. Write a function to handle the event listeners for each answer buttons

  answer1.addEventListener("click", function() {
    if (answer1.textContent == originalFixedAnswers[0]) {
      answer1.style.backgroundColor = "green";
    } else {
      answer1.style.backgroundColor = "red";
    }
  });

3. After shuffling your answers in the updateDom function use a loop (e.g. forEach) to cycle through the answers and change textContent / attach event listeners

But as I said, it's already really nice with lots of different functions calling each other as and when rather than a single massive block of code!

[freemvmt]

Apologies that this is exactly the same as @AlexandraOM's issue #48

[samjam48]

Agreed.

Your code is very readable and quite nice despite not being perfect. There is nothing annoying in it.

But yes as indicated this could be in a for each loop. if you're doing something explicitly 3 times or more you should usually automate it

 answer1.addEventListener("click", function() {
    answer2.style.pointerEvents = "none";
    answer3.style.pointerEvents = "none";
    answer4.style.pointerEvents = "none";

    if (answer1.textContent == originalFixedAnswers[0]) {
      answer1.style.backgroundColor = "#58AD58";
      question.textContent = "";
      let gif = document.createElement("img");
      gif.src = giffySrc;
      question.appendChild(gif);
      question.classList.add("gif");
    } else {
      answer1.style.backgroundColor = "#B93D41";
      question.classList.remove("gif");
      question.textContent = currentQuote;
      question.classList.add("insult");

    }
  });

  answer2.addEventListener("click", function() {
    answer1.style.pointerEvents = "none";
    answer3.style.pointerEvents = "none";
    answer4.style.pointerEvents = "none";

    if (answer2.textContent == originalFixedAnswers[0]) {
      answer2.style.backgroundColor = "#58AD58";
      question.textContent = "";
      let gif = document.createElement("img");
      gif.src = giffySrc;
      question.appendChild(gif);
      question.classList.add("gif");
    } else {
      answer2.style.backgroundColor = "#B93D41";
      question.classList.remove("gif");
      question.textContent = currentQuote;
      question.classList.add("insult");
    }
  });

  answer3.addEventListener("click", function() {
    answer1.style.pointerEvents = "none";
    answer2.style.pointerEvents = "none";
    answer4.style.pointerEvents = "none";

    if (answer3.textContent == originalFixedAnswers[0]) {
      answer3.style.backgroundColor = "#58AD58";
      question.textContent = "";
      let gif = document.createElement("img");
      gif.src = giffySrc;
      question.appendChild(gif);
      question.classList.add("gif");
    } else {
      answer3.style.backgroundColor = "#B93D41";
      question.textContent = currentQuote;
      question.classList.remove("gif");
      question.classList.add("insult");
      question.classList.add("gif");
    }
  });

  answer4.addEventListener("click", function() {
    answer1.style.pointerEvents = "none";
    answer2.style.pointerEvents = "none";
    answer3.style.pointerEvents = "none";

    if (answer4.textContent == originalFixedAnswers[0]) {
      answer4.style.backgroundColor = "#58AD58";
      question.textContent = "";
      let gif = document.createElement("img");
      gif.src = giffySrc;
      question.appendChild(gif);
      question.classList.add("gif");
    } else {
      answer4.style.backgroundColor = "#B93D41";
      question.classList.remove("gif");
      question.textContent = currentQuote;
      question.classList.add("insult");
    }
  });
}