Skip to content

London| ITP-May-2025| Zohreh Kazemianpour| Quote Generator App #554

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 8 commits into
base: main
Choose a base branch
from
Open

London| ITP-May-2025| Zohreh Kazemianpour| Quote Generator App #554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
166cb57
Implement quote generator functionality
zohrehKazemianpour Jul 2, 2025
9465418
update index.html
zohrehKazemianpour Jul 2, 2025
e130fb5
update style.css
zohrehKazemianpour Jul 2, 2025
c79f4a5
update quotes.js
zohrehKazemianpour Jul 2, 2025
95deee1
address pr feedback: 1.refactor: implement two view state with separ…
zohrehKazemianpour Jul 20, 2025
a23e931
update css: rename container element and change of position
zohrehKazemianpour Jul 20, 2025
7699bcb
refactor: static quote icon,tChanges:
zohrehKazemianpour Jul 21, 2025
66b2bf8
refactor: split view logic from content updates by adding switchToQuo…
zohrehKazemianpour Jul 21, 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
30 changes: 25 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,33 @@
<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>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
/>

<script defer src="quotes.js"></script>
</head>
<body>
<h1>hello there</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
<div id="container">
<div id="initial-view">
<div id="intro-text">
Would you like to get inspired by the great minds? Press the button to
generate a quote!
</div>
<button type="button" id="start-btn">Get Inspired</button>
</div>
<div id="quote-view" style="display: none">
<p>
<span><i class="fas fa-quote-left"></i></span><span id="quote"></span>
</p>
<div id="quote-control">
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
</div>
</div>
</div>
</body>
</html>
25 changes: 25 additions & 0 deletions Sprint-3/quote-generator/quotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,3 +491,28 @@ const quotes = [
];

// call pickFromArray with the quotes array to check you get a random quote

const quotesP = document.getElementById("quote");
const authorP = document.getElementById("author");
const initialView = document.getElementById("initial-view");
const quoteView = document.getElementById("quote-view");
const startBtn = document.getElementById("start-btn");
const newQuoteBtn = document.getElementById("new-quote");

function switchToQuoteView() {
initialView.style.display = "none";
quoteView.style.display = "block";
}
function showFirstQuote() {
switchToQuoteView();
showNewQuote();
}

function showNewQuote() {
const randomQuote = pickFromArray(quotes);
quotesP.textContent = randomQuote.quote;
authorP.textContent = randomQuote.author;
}

startBtn.addEventListener("click", showFirstQuote);
newQuoteBtn.addEventListener("click", showNewQuote);
91 changes: 90 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,90 @@
/** Write your CSS in here **/
body {
background-color: #f4e7b0;
font-family: sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

#container {
background-color: white;
margin: auto;
width: 70%;
padding: 20px;
text-align: center;
border-radius: 10px;
color: rgb(86, 83, 83);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
#intro-text {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
#quote {
font-style: italic;
font-weight: bolder;
font-size: 36px;
margin-bottom: 20px;
}

#quote-view p > span:first-child {
font-size: 1.8em;
margin-right: 8px;
vertical-align: middle;
}
#quote-control {
text-align: right;
margin-top: 30px;
}

#author {
display: block;
margin-bottom: 10px;
}

#start-btn,
#new-quote {
align-items: center;
appearance: none;
background-color: #fff;
border-radius: 24px;
border-style: none;
box-shadow: rgba(0, 0, 0, 0.2) 0 3px 5px -1px,
rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0;
box-sizing: border-box;
color: #3c4043;
cursor: pointer;
display: inline-flex;
fill: currentcolor;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
height: 48px;
justify-content: center;
letter-spacing: 0.25px;
line-height: normal;
max-width: 100%;
overflow: visible;
padding: 2px 24px;
position: relative;
text-align: center;
text-transform: none;
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: auto;
will-change: transform, opacity;
z-index: 0;
margin-top: 30px;
}

#start-btn:hover,
#new-quote:hover {
background: #f6f9fe;
transform: translateY(-2px);
}