Skip to content

Commit 9158842

Browse files
RomanSanayeRomanSanaye
committed
quote generator app is ready
1 parent 96d077b commit 9158842

5 files changed

Lines changed: 234 additions & 15 deletions

File tree

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

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,35 @@
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>
7-
<script defer src="quotes.js"></script>
6+
<title>Quote Generator App</title>
7+
<link rel="stylesheet" href="style.css" />
88
</head>
99
<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>
10+
<div class="container">
11+
<div class="header">
12+
<h1>Quote Generator</h1>
13+
</div>
14+
15+
<div class="quote-box">
16+
<p id="quote"></p>
17+
<p id="author"></p>
18+
</div>
19+
20+
<div class="bottom-controls">
21+
<div class="button">
22+
<button type="button" id="new-quote">New quote</button>
23+
</div>
24+
<div class="autoplay-container">
25+
<label for="autoplay">
26+
<input type="checkbox" id="autoplay" />
27+
Auto-play
28+
</label>
29+
<span id="autoplay-status">Auto-play: OFF</span>
30+
</div>
31+
</div>
32+
</div>
33+
<script src="quotes.js"></script>
1434
</body>
1535
</html>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"license": "CC-BY-SA-4.0",
55
"description": "You must update this package",
66
"scripts": {
7-
"test": "jest --config=../jest.config.js quote-generator"
7+
"test": "jest --env=jsdom"
88
},
99
"repository": {
1010
"type": "git",
@@ -13,5 +13,11 @@
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+
"dependencies": {
18+
"jsdom": "^20.0.3"
19+
},
20+
"devDependencies": {
21+
"@testing-library/jest-dom": "^6.9.1"
22+
}
1723
}

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

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,6 @@
1515
// ---------------
1616
// pickFromArray(['a','b','c','d']) // maybe returns 'c'
1717

18-
// You don't need to change this function
19-
function pickFromArray(choices) {
20-
return choices[Math.floor(Math.random() * choices.length)];
21-
}
22-
2318
// A list of quotes you can use in your app.
2419
// DO NOT modify this array, otherwise the tests may break!
2520
const quotes = [
@@ -491,3 +486,52 @@ const quotes = [
491486
];
492487

493488
// call pickFromArray with the quotes array to check you get a random quote
489+
490+
// Function to pick a random quote
491+
function pickFromArray() {
492+
const quoteEl = document.getElementById("quote");
493+
const authorEl = document.getElementById("author");
494+
const randomIndex = Math.floor(Math.random() * quotes.length);
495+
496+
quoteEl.textContent = `" ${quotes[randomIndex].quote} "`;
497+
authorEl.textContent = `-- ${quotes[randomIndex].author} --`;
498+
return randomIndex;
499+
}
500+
501+
// Setup function for browser only
502+
function setupQuoteApp() {
503+
const button = document.getElementById("new-quote");
504+
const autoplayCheckbox = document.getElementById("autoplay");
505+
const autoplayStatus = document.getElementById("autoplay-status");
506+
507+
// Don't call pickFromArray here for Jest test
508+
if (typeof window !== "undefined" && window.document) {
509+
pickFromArray();
510+
511+
button.addEventListener("click", () => pickFromArray());
512+
513+
let autoplayInterval = null;
514+
autoplayCheckbox.addEventListener("change", () => {
515+
if (autoplayCheckbox.checked) {
516+
autoplayInterval = setInterval(pickFromArray, 5000);
517+
autoplayStatus.textContent = "Auto-play: ON";
518+
autoplayStatus.style.color = "#4CAF50";
519+
} else {
520+
clearInterval(autoplayInterval);
521+
autoplayInterval = null;
522+
autoplayStatus.textContent = "Auto-play: OFF";
523+
autoplayStatus.style.color = "brown";
524+
}
525+
});
526+
}
527+
}
528+
529+
// Only run setup in browser environment
530+
if (typeof window !== "undefined") {
531+
window.addEventListener("DOMContentLoaded", setupQuoteApp);
532+
}
533+
534+
// Export function for Jest tests
535+
if (typeof module !== "undefined") {
536+
module.exports = pickFromArray;
537+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
There are some Tests in this file that will help you work out if your code is working.
33
*/
44

5+
require("@testing-library/jest-dom");
6+
// @jest-environment jsdom
7+
const pickFromArray = require("./quotes.js");
58
const path = require("path");
69
const { JSDOM } = require("jsdom");
710

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

Lines changed: 147 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,147 @@
1-
/** Write your CSS in here **/
1+
/* Reset */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
7+
}
8+
9+
body {
10+
min-height: 100vh;
11+
background: #abd5e9;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
padding: 15px;
16+
}
17+
18+
.container {
19+
background: rgba(221, 221, 221, 0.4);
20+
padding: 10px;
21+
border-radius: 16px;
22+
width: 100%;
23+
max-width: 420px;
24+
text-align: center;
25+
border: 1px solid rgba(255, 255, 255, 0.3);
26+
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
27+
display: flex;
28+
flex-direction: column;
29+
min-height: 450px;
30+
}
31+
32+
.header {
33+
flex: 0 0 25%; /* 25% of container height */
34+
display: flex;
35+
justify-content: center;
36+
align-items: center;
37+
margin-bottom: 15px;
38+
}
39+
40+
.header h1 {
41+
font-size: 1.8rem;
42+
color: #333;
43+
}
44+
45+
.quote-box {
46+
flex: 1 0 50%; /* take remaining middle space */
47+
background: #f4f4f4;
48+
padding: 10px;
49+
border-radius: 12px;
50+
display: flex;
51+
flex-direction: column;
52+
justify-content: center;
53+
align-items: center;
54+
margin: 10px 0;
55+
56+
min-height: 100px;
57+
transition: all 0.3s ease;
58+
word-wrap: break-word;
59+
text-align: center;
60+
}
61+
62+
.quote-box p {
63+
margin: 0;
64+
font-size: 1rem;
65+
line-height: 1.4;
66+
}
67+
68+
.bottom-controls {
69+
flex: 0 0 25%;
70+
display: flex;
71+
flex-direction: column;
72+
justify-content: center;
73+
gap: 10px;
74+
margin-bottom: 0px;
75+
}
76+
77+
.button button {
78+
width: 100%;
79+
padding: 10px;
80+
font-size: large;
81+
border: none;
82+
border-radius: 10px;
83+
background: rgb(3, 73, 195);
84+
color: #fff;
85+
cursor: pointer;
86+
transition: 0.3s ease;
87+
}
88+
89+
.button button:hover {
90+
background: #4259c8;
91+
transform: scale(1.03);
92+
font-weight: bold;
93+
}
94+
95+
.autoplay-container {
96+
display: flex;
97+
justify-content: center;
98+
align-items: center;
99+
gap: 10px;
100+
}
101+
102+
.autoplay-container label {
103+
display: flex;
104+
align-items: center;
105+
gap: 5px;
106+
cursor: pointer;
107+
}
108+
109+
.autoplay-container input[type="checkbox"] {
110+
width: 18px;
111+
height: 18px;
112+
cursor: pointer;
113+
}
114+
115+
#autoplay-status {
116+
font-weight: bold;
117+
color: brown;
118+
}
119+
120+
/* Responsive */
121+
@media (min-width: 600px) {
122+
.container {
123+
padding: 40px 35px;
124+
}
125+
.header h1 {
126+
font-size: 2rem;
127+
}
128+
.quote-box p {
129+
font-size: 1.1rem;
130+
}
131+
}
132+
133+
@media (min-width: 992px) {
134+
.container {
135+
max-width: 500px;
136+
}
137+
.header h1 {
138+
font-size: 2.2rem;
139+
}
140+
.quote-box p {
141+
font-size: 1.2rem;
142+
}
143+
.button button {
144+
width: auto;
145+
padding: 12px 25px;
146+
}
147+
}

0 commit comments

Comments
 (0)