Skip to content

London | 26-ATP-Jan | Boualem Larbi Djebbour | Sprint 3 | Quote generator #1200

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

London | 26-ATP-Jan | Boualem Larbi Djebbour | Sprint 3 | Quote generator #1200

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
2e93716
sorted out the head element
djebsoft Mar 30, 2026
9426b56
adjusting the html title
djebsoft Mar 31, 2026
ca51b1e
implement the main function
djebsoft Mar 31, 2026
99a7aa2
creating elements
djebsoft Apr 14, 2026
3b6fe77
opleting the quote generator project.
djebsoft Apr 15, 2026
0f8bf96
fixed the function to make the author match the quote
djebsoft Apr 16, 2026
db45069
rename main to setup
djebsoft Apr 16, 2026
e8f54ad
placing all the run on load code inside the setup function
djebsoft Apr 16, 2026
b22db66
separated JS code from HTML and used addEventListener()
djebsoft Apr 16, 2026
35b34f7
take the event listener out of the setup function
djebsoft Apr 16, 2026
570dca5
putting the click event listener inside a separate function for bette…
djebsoft Apr 16, 2026
fb9b865
calling the newQuote function Please enter the commit message for you…
djebsoft Apr 16, 2026
2d49b11
renamed functions to be more descriptive.
djebsoft Apr 16, 2026
69eab09
ade the setup function to perform the operations when the page loads.
djebsoft Apr 17, 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
18 changes: 11 additions & 7 deletions Sprint-3/quote-generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<!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>
<script defer src="quotes.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>hello there</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
<body onload="main()">
Comment thread
cjyuan marked this conversation as resolved.
Outdated
<div class="container">
<p id="quote"></p>
<p id="author"></p>
<div id="new-quote">
<button type="button">New quote</button>
</div>
</div>
</body>
</html>
7 changes: 7 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,10 @@
function main() {
Comment thread
cjyuan marked this conversation as resolved.
Outdated
document.querySelector("#quote").innerText = pickFromArray(quotes).quote;
document.querySelector("#author").innerText = pickFromArray(quotes).author;
}
Comment thread
cjyuan marked this conversation as resolved.
Outdated

document.getElementById("new-quote").addEventListener("click", main);

Comment thread
cjyuan marked this conversation as resolved.
Outdated
// DO NOT EDIT BELOW HERE

// pickFromArray is a function which will return one item, at
Expand Down
44 changes: 43 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,43 @@
/** Write your CSS in here **/
body {
background-color: orange;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: white;
width: 60%;
padding: 50px 50px;
}
#quote {
text-align: center;
color: orange;
font-size: 28px;
}
#quote::before {
content: open-quote;
}
#quote::after {
content: close-quote;
}
#author {
color: orange;
text-align: right;
font-size: 20px;
}
#author::before {
content: "- ";
}
#new-quote {
display: flex;
justify-content: end;
}
button {
background-color: orange;
color: white;
border: none;
font-size: 18px;
padding: 15px;
cursor: pointer;
}
Loading