Skip to content

Sheffield | ITP-Jan-26 | Hayriye Saricicek | Sprint 3 | Quote Generator #1151

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
mshayriyesaricicek wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Sheffield | ITP-Jan-26 | Hayriye Saricicek | Sprint 3 | Quote Generator #1151

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1a42b39
updated function and styled in html
mshayriyesaricicek Mar 30, 2026
e4ad56d
moved styling from html to css
mshayriyesaricicek Apr 5, 2026
29bc293
some lines were missing on local copy so updated local copy
mshayriyesaricicek Apr 10, 2026
3151ee1
Restructured code so dependencies are defined before being used.
mshayriyesaricicek Apr 12, 2026
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
38 changes: 35 additions & 3 deletions Sprint-3/quote-generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,45 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<title>Quote Generator App</title>
<style>
body {
display: grid;
place-items: center;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
text-align: center;
margin-top: 40px;
background-color: aqua;
}
h1 {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: green;
}

#quote {
font-size: 45px;
margin-bottom: 10px;
color: purple;
}
#author {
font-size: 30px;
color: red;
margin-bottom: 10px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
#new-quote {
padding: 10px 20px;
font-size: 16px;
}
</style>
Copy link
Copy Markdown

@jayshreehajgude2012 jayshreehajgude2012 Apr 5, 2026

Choose a reason for hiding this comment

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

You can use external CSS file and link it to CSS to make code clean.

Copy link
Copy Markdown
Author

@mshayriyesaricicek mshayriyesaricicek Apr 5, 2026

Choose a reason for hiding this comment

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

I didn't see the css file that is why I did in html. I have put all styling in css now and linked in the html. Thank you.

<script defer src="quotes.js"></script>
Copy link
Copy Markdown

@jayshreehajgude2012 jayshreehajgude2012 Apr 5, 2026

Choose a reason for hiding this comment

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

Correctly linked JavaScript file.

Copy link
Copy Markdown
Author

@mshayriyesaricicek mshayriyesaricicek Apr 5, 2026

Choose a reason for hiding this comment

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

thank you

</head>
<body>
<h1>hello there</h1>
<h1>Welcome to the Quote Generator</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
Expand Down
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 @@
// DO NOT EDIT ABOVE HERE
window.addEventListener("DOMContentLoaded", () => {
Copy link
Copy Markdown

@jayshreehajgude2012 jayshreehajgude2012 Apr 5, 2026

Choose a reason for hiding this comment

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

You used DOMContentLoaded properly
Clean DOM selection
Good use of textContent
Proper event listener used.
You can explore more DOM selection and Event handling methods.

Copy link
Copy Markdown
Author

@mshayriyesaricicek mshayriyesaricicek Apr 5, 2026

Choose a reason for hiding this comment

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

thank you

const quoteElement = document.getElementById("quote");
const authorElement = document.getElementById("author");
const newQuoteBtn = document.getElementById("new-quote");

function displayRandomQuote() {
const randomQuote = pickFromArray(quotes);
Copy link
Copy Markdown

@jayshreehajgude2012 jayshreehajgude2012 Apr 5, 2026

Choose a reason for hiding this comment

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

Quote Array is missing look into it.

Copy link
Copy Markdown
Author

@mshayriyesaricicek mshayriyesaricicek Apr 5, 2026

Choose a reason for hiding this comment

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

I am not sure if you are referring to the qoute array being defined after the function that uses it? I understood that we had to write our code above the line that says do not edit below so that is what I did. Or is there something else that I am missing? Thank you

Copy link
Copy Markdown

@kyle-tightest kyle-tightest Apr 11, 2026

Choose a reason for hiding this comment

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

@mshayriyesaricicek does it currently work as you have it here? the quotes variable is only defined later on line 41 so the function is not able to work with quotes. The comment // DO NOT EDIT BELOW HERE is a bit misleading sorry

Copy link
Copy Markdown
Author

@mshayriyesaricicek mshayriyesaricicek Apr 11, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

Hi Kyle, thank you for getting back to me. The original code referenced variables and functions before they were defined and although the defer attribute allowed it to work at runtime, I understand that this is not best practice. The code has now been restructured so that dependencies (quotes and pickFromArray) are defined before being used, improving readability and maintainability. Thank you

Copy link
Copy Markdown

@kyle-tightest kyle-tightest Apr 13, 2026

Choose a reason for hiding this comment

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

thanks looks good

quoteElement.textContent = `"${randomQuote.quote}"`;
authorElement.textContent = randomQuote.author;
}

displayRandomQuote();

newQuoteBtn.addEventListener("click", displayRandomQuote);
});

// DO NOT EDIT BELOW HERE

// pickFromArray is a function which will return one item, at
Expand Down
Loading