Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions Sprint-3/quote-generator/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<title>Quote generator app"</title>
<script defer src="quotes.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>hello there</h1>
<h1>Welcome</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
Expand Down
15 changes: 15 additions & 0 deletions Sprint-3/quote-generator/quotes.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
// pickFromArray(['a','b','c','d']) // maybe returns 'c'

// You don't need to change this function

function pickFromArray(choices) {
return choices[Math.floor(Math.random() * choices.length)];
}
Expand Down Expand Up @@ -491,3 +492,17 @@ const quotes = [
];

// call pickFromArray with the quotes array to check you get a random quote

const button = document.querySelector("#new-quote");
const quoteText = document.querySelector("#quote");
const quoteAuthor = document.querySelector("#author");

function showRandomQuote() {
const randomQuote = pickFromArray(quotes);
quoteText.textContent = randomQuote.quote;
quoteAuthor.textContent = randomQuote.author;
}

showRandomQuote();

button.addEventListener("click", showRandomQuote);
27 changes: 27 additions & 0 deletions Sprint-3/quote-generator/style.css
Original file line number Diff line number Diff line change
@@ -1 +1,28 @@
/** Write your CSS in here **/

body {
color: rgb(48, 46, 46);
background-color: rgb(238, 235, 235);
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}

h1 {
text-align: center;
font-size: 2.5rem;
color: ;
}

p {
font-size: 1rem;
color: ;
}

button {
background-color: rgb(221, 235, 116);
color: rgb(131, 95, 29);
border: none;
padding: 10px;
border-radius: 5px;
}
Loading