Sheffield | 26-ITP-jan | Richard Frimpong | Sprint 3 | quote generator

[Richiealx]

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 implements the Sprint 3 Quote Generator app.

The application displays a random quote and its author when the page loads. It also includes a "New Quote" button that allows users to generate a different random quote each time it is clicked.

To meet the task requirements, I used the provided quotes.js file and the pickFromArray function to select quotes randomly. I implemented DOM manipulation in script.js to update both the quote and author dynamically on the page.

I also added logic to ensure that the same quote is not displayed twice in a row when the button is clicked multiple times.

In addition, I structured the HTML for clarity, styled the application using CSS for a clean and accessible layout, and ensured all IDs and elements are correctly connected to the JavaScript functionality.

The application was tested in the browser to confirm:

• A quote and author display on page load
• The button updates both the quote and author
• Quotes do not repeat consecutively
• No console errors are present

I attempted to run npm test, but Jest is not available in the current local setup (jest: not found). However, the application functions correctly and meets all acceptance criteria when tested manually in the browser.

Questions

No questions at this time.

[cjyuan]

The leading - appears to be for styling purposes. Keeping it in the CSS or in HTML could allow us to adjust the view without changing any JavaScript code.

[cjyuan]

Placing all the "run on load" code in one place is a good practice.
Would be even better to place the code
inside a function to make it clearer that "this is what runs when the page loads."

For examples,

function setup() {
  // code to be executed on page load
}

window.addEventListener('load', setup);

or

window.addEventListener('load', function() {
  // code to be executed on page load
});

[Richiealx]

Thank you for the feedback.

I’ve now updated the quote generator based on your comments:

1. I removed the leading dash from the JavaScript and moved it into CSS using a ::before pseudo-element on the author.
2. I moved the page-load logic into a setup() function and now run it with window.addEventListener("load", setup) to make it clearer what runs when the page loads.
3. I also updated the HTML so it now links the stylesheet and script file correctly and matches the final structure.

I tested the app again in the browser to confirm it still works correctly.

[cjyuan]

What's this?

[cjyuan]

What is this? (style.css also has this marker)

[cjyuan]

All good.