diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..7f234d0ad 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

-

+
+ +

Random Quote Generator

+

+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..7915c3200 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,19 @@ +const getQuoteButton = document.getElementById("new-quote"); +const quoteParagraph = document.getElementById("quote"); +const authorParagraph = document.getElementById("author"); +console.log(getQuoteButton) + +function getQuote(){ + const randomNum = Math.floor(Math.random() * quotes.length); + const randomQuoteObj = quotes[randomNum]; + const quote = randomQuoteObj.quote; + const author = randomQuoteObj.author; + + quoteParagraph.textContent = quote; + authorParagraph.textContent = author; +} + +getQuoteButton.addEventListener("click", getQuote) // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at @@ -491,3 +507,5 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +getQuote(); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..cd141e306 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,61 @@ -/** Write your CSS in here **/ +body { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + + background-color: #dcc4c4; + font-family: Arial, sans-serif; +} + + +.container { + width: 550px; + height: 550px; + + background-color: white; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + padding: 30px; + + text-align: center; + + border-radius: 15px; + box-shadow: 0 5px 20px rgba(0,0,0,0.1); +} + + +h1 { + font-size: 1.8rem; + margin-bottom: 30px; +} + + +#quote { + font-size: 1.2rem; + margin-bottom: 20px; +} + + +#author { + font-style: italic; + margin-bottom: 30px; + color: #d9b11f; +} + + +button { + padding: 12px 25px; + + border: none; + border-radius: 8px; + + background-color: #222; + color: white; + + cursor: pointer; +} \ No newline at end of file diff --git a/prep/mean.js b/prep/mean.js new file mode 100644 index 000000000..e69de29bb diff --git a/prep/mean.test.js b/prep/mean.test.js new file mode 100644 index 000000000..e69de29bb diff --git a/prep/parse-query-string.js b/prep/parse-query-string.js new file mode 100644 index 000000000..e69de29bb diff --git a/prep/parse-query-string.test.js b/prep/parse-query-string.test.js new file mode 100644 index 000000000..d4a0f01b9 --- /dev/null +++ b/prep/parse-query-string.test.js @@ -0,0 +1,7 @@ +test("given a query string with no query parameters, returns an empty object", function () { + const input = ""; + const currentOutput = parseQueryString(input); + const targetOutput = {}; + + expect(currentOutput).toEqual(targetOutput); +});