Skip to content

Commit ce3a25b

Browse files
BaselAdoumBaselAdoum
committed
function is created with pickfromarray. style.css is added
1 parent ddae047 commit ce3a25b

File tree

3 files changed

+107
-5
lines changed

3 files changed

+107
-5
lines changed

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,16 @@
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+
<link rel="stylesheet" href="style.css">
7+
<title>Quote generator app</title>
88
</head>
99
<body>
10-
<h1>hello there</h1>
10+
<h1>Quote Generator</h1>
1111
<p id="quote"></p>
1212
<p id="author"></p>
1313
<button type="button" id="new-quote">New quote</button>
14+
15+
<!-- Script at the bottom instead of using defer -->
16+
<script src="quotes.js"></script>
1417
</body>
15-
</html>
18+
</html>

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

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

18+
1819
// You don't need to change this function
1920
function pickFromArray(choices) {
2021
return choices[Math.floor(Math.random() * choices.length)];
@@ -491,3 +492,33 @@ const quotes = [
491492
];
492493

493494
// call pickFromArray with the quotes array to check you get a random quote
495+
496+
// STEP 1: Get references to the HTML elements we need to update
497+
// These lines find the HTML elements by their ID so we can change their content later
498+
const quoteElement = document.getElementById("quote");
499+
const authorElement = document.getElementById("author");
500+
const newQuoteButton = document.getElementById("new-quote");
501+
502+
// STEP 2: Create a function to display a random quote
503+
// This function will be called when page loads AND when button is clicked
504+
function displayRandomQuote() {
505+
// Use the provided pickFromArray function to get a random quote object
506+
// The quotes array contains objects, each with 'quote' and 'author' properties
507+
const randomQuote = pickFromArray(quotes);
508+
509+
// Update the quote text on the webpage
510+
// randomQuote.quote gets the actual quote text from the random quote object
511+
quoteElement.textContent = randomQuote.quote;
512+
513+
// Update the author text on the webpage
514+
// randomQuote.author gets the author's name from the random quote object
515+
authorElement.textContent = "- " + randomQuote.author;
516+
}
517+
518+
// STEP 3: Set up the button click event
519+
// When someone clicks the "New quote" button, run displayRandomQuote function
520+
newQuoteButton.addEventListener("click", displayRandomQuote);
521+
522+
// STEP 4: Show a random quote when the page first loads
523+
// This makes sure a quote is displayed immediately when someone visits the page
524+
displayRandomQuote();

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

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,69 @@
1-
/** Write your CSS in here **/
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
/* Style the entire page */
8+
body {
9+
font-family: 'Arial', sans-serif;
10+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
11+
min-height: 100vh;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
padding: 20px;
16+
}
17+
18+
/* Main container for the quote generator */
19+
.container {
20+
background: white;
21+
border-radius: 15px;
22+
padding: 40px;
23+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
24+
max-width: 600px;
25+
width: 100%;
26+
text-align: center;
27+
}
28+
29+
/* Style the main heading */
30+
h1 {
31+
color: #333;
32+
margin-bottom: 30px;
33+
font-size: 2.5rem;
34+
font-weight: 300;
35+
}
36+
37+
/* Style the quote text */
38+
#quote {
39+
font-size: 1.4rem;
40+
line-height: 1.6;
41+
color: #555;
42+
margin-bottom: 30px; /* Increased space below quote */
43+
font-style: italic;
44+
}
45+
46+
/* Style the author text */
47+
#author {
48+
font-size: 1.1rem;
49+
color: #131313;
50+
margin-bottom: 30px; /* Space between author and button */
51+
font-weight: bold;
52+
display: block; /* Ensures it takes full width */
53+
}
54+
55+
/* Style the button */
56+
#new-quote {
57+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
58+
color: white;
59+
border: none;
60+
padding: 15px 30px;
61+
font-size: 1.1rem;
62+
border-radius: 50px;
63+
cursor: pointer;
64+
transition: all 0.3s ease;
65+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
66+
display: block; /* Makes button take full width */
67+
margin: 0 auto; /* Centers the button */
68+
width: 200px; /* Fixed width for the button */
69+
}

0 commit comments

Comments
 (0)