diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..07943d891 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,18 @@ - Title here + Quote Generator App + -

hello there

-

-

- +

Quote Generator

+
+
+

+

+
+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..6690390d3 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,29 @@ +//test expects this initial quote to be displayed +window.addEventListener("load", () => { + const initialQuote = { + quote: "Strive not to be a success, but rather to be of value.", + author: "Albert Einstein", + }; + + //display the initial quote and author on page load + document.querySelector("#quote").innerText = initialQuote.quote; + document.querySelector("#author").innerText = initialQuote.author; +}); + +function displayRandomQuote() { + //pick a random quote from the quotes array + const randomQuote = pickFromArray(quotes); + + //display the random quote and author in the HTML elements + document.querySelector("#quote").innerText = randomQuote.quote; + document.querySelector("#author").innerText = randomQuote.author; +} + +//add an event listener to the button to generate a new random quote +document + .querySelector("#new-quote") + .addEventListener("click", displayRandomQuote); + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at @@ -491,3 +517,4 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +const randomQuote = pickFromArray(quotes); diff --git a/Sprint-3/quote-generator/styles.css b/Sprint-3/quote-generator/styles.css new file mode 100644 index 000000000..1a96aab6f --- /dev/null +++ b/Sprint-3/quote-generator/styles.css @@ -0,0 +1,88 @@ +:root { + --font-family: "Helvetica Neue", Arial, sans-serif; + --font-size: 1.5rem; + --primary-colour: darkolivegreen; + --secondary-colour: linen; + --text-colour: rgb(41, 58, 11); + --padding: 20px; + --border-radius: 10px; + --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); +} + +h1 { + font-family: var(--font-family); + font-size: 2.5rem; + color: var(--text-colour); + text-align: center; + margin-bottom: 30px; + font-weight: bold; + letter-spacing: 1px; +} +body { + font-family: var(--font-family); + background-color: var(--secondary-colour); + margin: 0; + padding: 40px 20px; + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; +} +button { + background-color: var(--secondary-colour); + color: var(--text-colour); + font-family: var(--font-family); + font-size: 1.2rem; + padding: var(--padding); + margin-top: 30px; + border: none; + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + cursor: pointer; + transition: background-color 0.3s ease; +} +button:hover { + transform: translateY(-2px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); +} + +/* Add click down effect */ +button:active { + transform: translateY(2px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +#quote-container { + background-color: var(--primary-colour); + width: 600px; + height: 400px; + padding: var(--padding); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#quote-box { + background-color: var(--secondary-colour); + padding: var(--padding); + color: var(--text-colour); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#quote { + font-size: var(--font-size); + text-align: center; +} +#author { + font-size: 1rem; + font-style: italic; + font-weight: bold; +}