Birmingham | ITP-Jan | Roman Sanaye | Sprint 3 | Quote Generator App

[RomanSanaye]

Learners, PR Template

Self checklist

• I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
• My changes meet the requirements of the task
• I have tested my changes
• My changes follow the style guide

Changelist

This PR includes the implementation of the Quote Generator App for Sprint 3.

The application fetches and displays random quotes. It demonstrates working with APIs, DOM manipulation, and JavaScript event handling.

Questions

No questions at this time.

[cjyuan]

Better to separate the function definition from the code that assigns event listener:

function setupQuoteApp() {
  ... 
  // Note: 
  // Variable/constant declarations + function definition can also be placed
  // in the outer scope or in a separate scope.
  let autoplayInterval = null;
  function toggleAutoPlay() {
      if (autoplayCheckbox.checked) {
        autoplayInterval = setInterval(pickFromArray, 5000);
        autoplayStatus.textContent = "Auto-play: ON";
        autoplayStatus.style.color = "#4CAF50";
      } else {
        clearInterval(autoplayInterval);
        autoplayInterval = null;
        autoplayStatus.textContent = "Auto-play: OFF";
        autoplayStatus.style.color = "brown";
      }
  }

  // Code that runs when the page loads -- easier to read
  autoplayCheckbox.addEventListener("change", toggleAutoPlay);
  button.addEventListener("click", pickFromArray);

  pickFromArray();
}

[RomanSanaye]

function definitions are kept separate, and event listeners are only assigned inside setupQuoteApp for better structure and readability.

[cjyuan]

I don't see this change yet.

Well, you can practice this in other apps.

[cjyuan]

Changes look good.

[cjyuan]

For your reference:
https://chatgpt.com/share/69cae7dd-695c-8331-bb13-1ff731f13143

Suggestion made by ChatGPT how else you could implement this.

Note: I don't know how long ChatGPT will keep this chat available.

[RomanSanaye]

I’ll try to use more CSS and reduce JavaScript in my projects and coursework. Whenever CSS can handle a feature, I won’t rely on JavaScript for it. Pseudo-elements like ::before and ::after are really powerful and useful for this approach. Thanks for the feedback and guidance.