Skip to content

Glasgow | ITP May 2025 | Adiyah Farhan | Sprint 3 | Quote Generator App #742

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+81 −6
Open

Glasgow | ITP May 2025 | Adiyah Farhan | Sprint 3 | Quote Generator App #742

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1d29883
Update the script quotes.js to display random quote from the array of…
AdiyahFarhan Aug 2, 2025
d7172be
Write the CSS code for Quote generator app
AdiyahFarhan Aug 2, 2025
16a63d1
Update the title of the index.html
AdiyahFarhan Aug 2, 2025
74d3d92
Restoring the script tag on the head with the defer attribute, It doe…
AdiyahFarhan Aug 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions Sprint-3/quote-generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<link rel="stylesheet" href="style.css" />
<title>Quote Generator App</title>
<script defer src="quotes.js"></script>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain why the originally script tag was up on the head tag (not in the bottom of body) and what defer attribute does here?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we use <script> tag up on the tag, without the defer attribute then it downloads and executes the script before parsing the complete file. As a result, the script that tries to access the elements in the that haven't been parsed yet, t will return null because the element doesn’t exist in the DOM yet.

But if we use a defer attribute, it will just download the script on the head but executes the script after the is fully parsed. So by adding defer attribute, we can avoid any blocking issues that makes script to behave improperly.

</head>
<body>
<h1>hello there</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
<h1>Quote Generator</h1>
<div class="quote-container">
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
</div>
<!-- <script src="quotes.js"></script> -->
</body>
</html>
17 changes: 17 additions & 0 deletions Sprint-3/quote-generator/quotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,20 @@
//Function to display a random quote from the quotes array
function displayRandomQuote() {
const quote = pickFromArray(quotes);
document.getElementById("quote").innerText = `"${quote.quote}"`;
document.getElementById("author").innerText = `- ${quote.author}`;
}

//Show one quote immediately when the page loads
window.onload = function () {
displayRandomQuote();
};

//Add an event listener to the button to show a new quote when clicked
document.getElementById("new-quote").addEventListener("click", function () {
displayRandomQuote();
});

// DO NOT EDIT BELOW HERE

// pickFromArray is a function which will return one item, at
Expand Down
56 changes: 55 additions & 1 deletion Sprint-3/quote-generator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,55 @@
/** Write your CSS in here **/
body {
background-color: darkgoldenrod; /* Light gray background */
display: flex;
flex-direction: column; /* Stack children vertically */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
height: 100vh;
margin: 0;
color: beige;
}

.quote-container {
display: flex;
flex-direction: column; /* Stack quote and author vertically */
background-color: lightgray;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
font-weight: bold;
color: darkslategray;
max-width: 600px; /* Limit the width of the quote container */
}

h1 {
font-size: 2.5em;
margin-bottom: 20px;
color: darkslategray;
}

p {
margin: 10px 0;
}

p#quote {
font-style: italic;
text-align: center;
font-size: 1.5em;
}

p#author {
text-align: right;
font-weight: normal;
}

#new-quote {
background-color: darkgoldenrod;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
#new-quote:hover {
background-color: darkslategray;
}