diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..31c26b136 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,22 @@ - - - - Title here - - - -

hello there

-

-

- - - + + + + + Quote Generator + + + + + +
+

Quote of the Day

+

"this is the quote"

+

- Author Name

+
+ + + + + \ No newline at end of file diff --git a/Sprint-3/quote-generator/package.json b/Sprint-3/quote-generator/package.json index 0f6f98917..39c2ccfdb 100644 --- a/Sprint-3/quote-generator/package.json +++ b/Sprint-3/quote-generator/package.json @@ -13,5 +13,8 @@ "bugs": { "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues" }, - "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme" + "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", + "devDependencies": { + "@testing-library/jest-dom": "^6.9.1" + } } diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..d01306323 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,9 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +function generateQuote() { + const randomQuote = pickFromArray(quotes); + document.getElementById("quote").textContent = `"${randomQuote.quote}"`; + document.getElementById("author").textContent = `- ${randomQuote.author}`; +} +generateQuote(); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..c4c7a3f86 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,48 @@ -/** Write your CSS in here **/ +body { + margin: 0; + padding: 0; + justify-content: center; + font-family: Arial, sans-serif; + background-color: #d4b4ec; +} + +.quote-box { + margin: 50px auto; + width: 80%; + max-width: 600px; + padding: 30px; + text-align: center; + background-color: #fff; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +h1 { + margin-bottom: 25px; +} +#quote { + min-height: 60px; + margin-bottom: 25px; + font-size: 1.5em; + line-height: 1.5; + font-style: italic; +} + +button { + display: block; + margin: 20px auto; + font-weight: bold; + padding: 12px 20px; + font-size: 1.5em; + background-color: rgba(96, 55, 92, 0.2); + color: #232b2e; + border: none; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +button:hover { + background-color: rgba(53, 31, 51, 0.2); + font-weight: bold; + text-shadow: 0 1px 2px white; +}