Skip to content

Commit e4ad56d

Browse files
moved styling from html to css
1 parent 1a42b39 commit e4ad56d

3 files changed

Lines changed: 39 additions & 40 deletions

File tree

Sprint-3/quote-generator/index.html

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,8 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
67
<title>Quote Generator App</title>
7-
<style>
8-
body {
9-
display: grid;
10-
place-items: center;
11-
min-height: 100vh;
12-
margin: 0;
13-
font-family: Arial, sans-serif;
14-
text-align: center;
15-
margin-top: 40px;
16-
background-color: aqua;
17-
}
18-
h1 {
19-
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
20-
color: green;
21-
}
22-
23-
#quote {
24-
font-size: 45px;
25-
margin-bottom: 10px;
26-
color: purple;
27-
}
28-
#author {
29-
font-size: 30px;
30-
color: red;
31-
margin-bottom: 10px;
32-
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
33-
}
34-
#new-quote {
35-
padding: 10px 20px;
36-
font-size: 16px;
37-
}
38-
</style>
398
<script defer src="quotes.js"></script>
409
</head>
4110
<body>

Sprint-3/quote-generator/quotes.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
// DO NOT EDIT ABOVE HERE
2-
window.addEventListener("DOMContentLoaded", () => {
1+
window.addEventListener("DOMContentLoaded", () => {
32
const quoteElement = document.getElementById("quote");
43
const authorElement = document.getElementById("author");
54
const newQuoteBtn = document.getElementById("new-quote");
65

7-
function displayRandomQuote() {
8-
const randomQuote = pickFromArray(quotes);
9-
quoteElement.textContent = `"${randomQuote.quote}"`;
10-
authorElement.textContent = randomQuote.author;
11-
}
126

13-
displayRandomQuote();
7+
function displayRandomQuote() {
8+
const randomQuote = pickFromArray(quotes);
9+
quoteElement.textContent = `"${randomQuote.quote}"`;
10+
authorElement.textContent = randomQuote.author;
11+
}
1412

1513
newQuoteBtn.addEventListener("click", displayRandomQuote);
14+
15+
displayRandomQuote();
1616
});
1717

1818
// DO NOT EDIT BELOW HERE

Sprint-3/quote-generator/style.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,31 @@
11
/** Write your CSS in here **/
2+
body {
3+
display: grid;
4+
place-items: center;
5+
min-height: 100vh;
6+
margin: 0;
7+
font-family: Arial, sans-serif;
8+
text-align: center;
9+
margin-top: 40px;
10+
background-color: aqua;
11+
}
12+
h1 {
13+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
14+
color: green;
15+
}
16+
17+
#quote {
18+
font-size: 45px;
19+
margin-bottom: 10px;
20+
color: purple;
21+
}
22+
#author {
23+
font-size: 30px;
24+
color: red;
25+
margin-bottom: 10px;
26+
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
27+
}
28+
#new-quote {
29+
padding: 10px 20px;
30+
font-size: 16px;
31+
}

0 commit comments

Comments
 (0)