Skip to content

Commit 7d33df0

Browse files
mohsenzamanistmohsenzamanist
committed
Completed feature/sprint-3-quote-generator
1 parent cfd674c commit 7d33df0

File tree

3 files changed

+78
-7
lines changed

3 files changed

+78
-7
lines changed

‎Sprint-3/quote-generator/index.html‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Title here</title>
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Quote generator app</title>
78
<script defer src="quotes.js"></script>
89
</head>
910
<body>
10-
<h1>hello there</h1>
11-
<p id="quote"></p>
12-
<p id="author"></p>
13-
<button type="button" id="new-quote">New quote</button>
11+
<main>
12+
<section>
13+
<p id="quote" class="quote"></p>
14+
<div>
15+
<p id="author" class="author"></p>
16+
<button type="button" id="new-quote">New quote</button>
17+
</div>
18+
</section>
19+
</main>
1420
</body>
1521
</html>

‎Sprint-3/quote-generator/quotes.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
const quoteEl = document.getElementById("quote");
2+
const authorEl = document.getElementById("author");
3+
const newQuoteBtn = document.getElementById("new-quote");
4+
15
// DO NOT EDIT BELOW HERE
26

37
// pickFromArray is a function which will return one item, at
@@ -491,3 +495,16 @@ const quotes = [
491495
];
492496

493497
// call pickFromArray with the quotes array to check you get a random quote
498+
const pickRandomQuote = () => {
499+
const quoteIndex = Math.floor(Math.random() * quotes.length);
500+
return quotes[quoteIndex];
501+
};
502+
503+
const displayRandomQuote = () => {
504+
const { quote, author } = pickRandomQuote();
505+
quoteEl.textContent = `"${quote}`;
506+
authorEl.textContent = `- ${author}`;
507+
};
508+
displayRandomQuote();
509+
510+
newQuoteBtn.addEventListener("click", displayRandomQuote);

‎Sprint-3/quote-generator/style.css‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,49 @@
1-
/** Write your CSS in here **/
1+
:root {
2+
margin: 0;
3+
}
4+
5+
main {
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
position: fixed;
10+
inset: 0;
11+
background-color: #ffa500;
12+
color: #ffa500;
13+
}
14+
section {
15+
width: 60%;
16+
height: 60%;
17+
background-color: #ffffff;
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
padding: 2rem;
22+
}
23+
24+
.quote {
25+
max-width: 100%;
26+
font-size: 2.5rem;
27+
}
28+
29+
section div {
30+
width: 90%;
31+
max-width: 90%;
32+
33+
display: flex;
34+
flex-direction: column;
35+
align-items: flex-end;
36+
}
37+
38+
.author {
39+
font-size: 1.5rem;
40+
font-weight: 300;
41+
}
42+
43+
button {
44+
border: 0;
45+
font-size: 1.5rem;
46+
color: #ffffff;
47+
background-color: #ffa500;
48+
padding: 1rem;
49+
}

0 commit comments

Comments
 (0)