From 7cc27d089720d6ecb1d2dfd72fdef3f6f25c9b0d Mon Sep 17 00:00:00 2001 From: areebsattar Date: Fri, 19 Jan 2024 00:13:16 +0000 Subject: [PATCH 1/2] Linked the JS and HTML and got elements working --- week-3/quote-generator/index.html | 5 +++-- week-3/quote-generator/quotes.js | 13 +++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/week-3/quote-generator/index.html b/week-3/quote-generator/index.html index 30b434bc..cfb35059 100644 --- a/week-3/quote-generator/index.html +++ b/week-3/quote-generator/index.html @@ -3,11 +3,12 @@ - Title here + Quote Generator + -

hello there

+

Quote of the day

diff --git a/week-3/quote-generator/quotes.js b/week-3/quote-generator/quotes.js index 4a4d04b7..73638046 100644 --- a/week-3/quote-generator/quotes.js +++ b/week-3/quote-generator/quotes.js @@ -1,3 +1,16 @@ +addEventListener("DOMContentLoaded", displayQuote); + +const quoteElement = document.querySelector("#quote"); +const authorElement = document.querySelector("#author"); +const newQuote = document.querySelector("#new-quote"); + +function displayQuote() { + const randomQuote = pickFromArray(quotes); + quoteElement.textContent = randomQuote.quote; + authorElement.textContent = randomQuote.author; +} + +newQuote.addEventListener("click", displayQuote); // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at From 7cf3b1b6117769d74a1cc0fa27ae57d47f17e915 Mon Sep 17 00:00:00 2001 From: areebsattar Date: Fri, 19 Jan 2024 00:24:21 +0000 Subject: [PATCH 2/2] Added some CSS --- week-3/quote-generator/quotes.js | 4 ++-- week-3/quote-generator/style.css | 28 ++++++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/week-3/quote-generator/quotes.js b/week-3/quote-generator/quotes.js index 73638046..f3efcee8 100644 --- a/week-3/quote-generator/quotes.js +++ b/week-3/quote-generator/quotes.js @@ -6,8 +6,8 @@ const newQuote = document.querySelector("#new-quote"); function displayQuote() { const randomQuote = pickFromArray(quotes); - quoteElement.textContent = randomQuote.quote; - authorElement.textContent = randomQuote.author; + quoteElement.textContent = `"${randomQuote.quote}"`; + authorElement.textContent = `- ${randomQuote.author}`; } newQuote.addEventListener("click", displayQuote); diff --git a/week-3/quote-generator/style.css b/week-3/quote-generator/style.css index 63cedf2d..6073d0ad 100644 --- a/week-3/quote-generator/style.css +++ b/week-3/quote-generator/style.css @@ -1 +1,29 @@ /** Write your CSS in here **/ +body { + font-family: Arial, sans-serif; + background-color: #f1f7ff; + margin: 25% 10%; + padding: 5%; + +} + +h1 { + justify-content: center; + color: rgb(160, 38, 38); +} + +button { + padding: 5px 10px; + background-color: rgb(209, 166, 141); + border-radius: 10px; +} + +p { + justify-content: center; + color: rgb(75, 36, 36); + text-decoration: solid; +} + +#author { + text-align: right; +} \ No newline at end of file