Skip to content

Commit 5050987

Browse files
ihortarihortar
committed
app
1 parent 96d077b commit 5050987

4 files changed

Lines changed: 58 additions & 7 deletions

File tree

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@
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+
<title>Quote generator app</title>
7+
<link rel="stylesheet" href="style.css">
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+
<div class="card">
12+
<h1 id="quote"></h1>
13+
<p id="author"></p>
14+
<button type="button" id="new-quote">New quote</button>
15+
</div>
1416
</body>
15-
</html>
17+
</html>

‎Sprint-3/quote-generator/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,9 @@
1313
"bugs": {
1414
"url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues"
1515
},
16-
"homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme"
16+
"homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
17+
"devDependencies": {
18+
"@testing-library/jest-dom": "^6.9.1",
19+
"jest-environment-jsdom": "^30.3.0"
20+
}
1721
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -491,3 +491,22 @@ const quotes = [
491491
];
492492

493493
// call pickFromArray with the quotes array to check you get a random quote
494+
495+
const quoteText = document.querySelector("#quote");
496+
const authorText = document.querySelector("#author");
497+
const newQuoteBtn = document.querySelector("#new-quote");
498+
499+
function displayRandomQuote() {
500+
// Use the provided pickFromArray function
501+
const randomQuote = pickFromArray(quotes);
502+
503+
// Update the text on the page
504+
quoteText.innerText = randomQuote.quote;
505+
authorText.innerText = randomQuote.author;
506+
}
507+
508+
// Display a quote immediately when the script runs
509+
displayRandomQuote();
510+
511+
// Add the click event to the button
512+
newQuoteBtn.addEventListener("click", displayRandomQuote);

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,27 @@
11
/** Write your CSS in here **/
2+
body {
3+
background-color: #f3a638; /* The orange background */
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
height: 100vh;
8+
margin: 0;
9+
font-family: serif;
10+
}
11+
12+
.container {
13+
background-color: white;
14+
padding: 40px;
15+
width: 60%;
16+
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
17+
position: relative;
18+
}
19+
20+
#new-quote {
21+
background-color: #f3a638;
22+
color: white;
23+
border: none;
24+
padding: 10px 20px;
25+
cursor: pointer;
26+
float: right;
27+
}

0 commit comments

Comments
 (0)