From 8313a8a5c97e130749dc713386aaf401d061d2d9 Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Sun, 13 Jul 2025 17:29:40 +0100 Subject: [PATCH 1/5] style.css --- Sprint-3/quote-generator/index.html | 13 ++++--- Sprint-3/quote-generator/style.css | 53 ++++++++++++++++++++++++++++- 2 files changed, 60 insertions(+), 6 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..b06c90abd 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,16 @@ - Title here + Quote generator app + -

hello there

-

-

- +
+

hello there

+

+

+ +
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..24d488259 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,52 @@ -/** Write your CSS in here **/ +body { + background-color: orange; + padding-left: 75px; + padding-right: 75px; + padding-bottom: 150px; + padding-top: 150px; + align-items: center; + justify-content: center; + display: flex; +} + +h1 { + color: orange; + font-size: 30px; + font-family: Arial, Helvetica, sans-serif; + font-style: italic; + position: relative; +} + +#wildCard.card { + border-radius: 5px; + text-align: center; + background-color: white; + height: 300px; + width: 900px; +} + +#quote { + color: orange; +} /** Write your CSS in here **/ + +#author { + color: orange; + font-size: 10px; + font-family: Arial, Helvetica, sans-serif; + font-style: italic; + text-align: right; + margin-top: 30px; + margin-left: 630px; + margin-bottom: 5px; +} + +#new-quote { + color: white; + background-color: orange; + border-radius: 5px; + border-color: orange; + margin-left: 630px; + margin-top: 150px; + width: 110px; + height: 35px; +} From 424b7af9f9a8d0274ad8f3b15396f87449633067 Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Sun, 13 Jul 2025 20:23:18 +0100 Subject: [PATCH 2/5] quotes.js --- Sprint-3/quote-generator/index.html | 2 +- Sprint-3/quote-generator/quotes.js | 22 ++++++++++++++++++++ Sprint-3/quote-generator/style.css | 31 ++++++++++++++++++----------- 3 files changed, 42 insertions(+), 13 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index b06c90abd..622174037 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -8,8 +8,8 @@ +

Quotes

-

hello there

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..f2671efd0 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,25 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +const card = document.querySelector("#wildCard"); +console.log(card); +const author = document.querySelector("#author"); +console.log(author); +const quote = document.querySelector("#quote"); +console.log(quote); +const quoteButton = document.querySelector("#new-quote"); +console.log(quoteButton); + +window.addEventListener("load", function () { + const result = pickFromArray(quotes); + + quote.textContent = `${result.quote}`; + author.textContent = `- ${result.author}`; +}); + +quoteButton.addEventListener("click", function () { + const result = pickFromArray(quotes); + + quote.textContent = `${result.quote}`; + author.textContent = `- ${result.author}`; +}); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 24d488259..cd52c4efb 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -10,11 +10,7 @@ body { } h1 { - color: orange; - font-size: 30px; - font-family: Arial, Helvetica, sans-serif; - font-style: italic; - position: relative; + display: none; } #wildCard.card { @@ -27,17 +23,28 @@ h1 { #quote { color: orange; -} /** Write your CSS in here **/ + font-size: 25px; + font-family: Arial, Helvetica, sans-serif; + font-style: italic; + position: relative; +} + +#quote::before { + content: '"'; + position: relative; + color: orange; + font-size: 35px; +} #author { color: orange; - font-size: 10px; + font-size: 20px; font-family: Arial, Helvetica, sans-serif; font-style: italic; text-align: right; - margin-top: 30px; - margin-left: 630px; - margin-bottom: 5px; + margin-top: 50px; + margin-left: 730px; + margin-bottom: 20px; } #new-quote { @@ -45,8 +52,8 @@ h1 { background-color: orange; border-radius: 5px; border-color: orange; - margin-left: 630px; - margin-top: 150px; + margin-left: 650px; + margin-top: 100px; width: 110px; height: 35px; } From a6d4de7767ab1f4fe64818d30e0400f71fce7c6c Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Sun, 13 Jul 2025 21:31:39 +0100 Subject: [PATCH 3/5] fixed style.css --- Sprint-3/quote-generator/style.css | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index cd52c4efb..8b7bed109 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -15,10 +15,15 @@ h1 { #wildCard.card { border-radius: 5px; - text-align: center; + text-align: justify; background-color: white; height: 300px; width: 900px; + padding: 30px; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; } #quote { @@ -27,13 +32,17 @@ h1 { font-family: Arial, Helvetica, sans-serif; font-style: italic; position: relative; + margin-right: 30px; } #quote::before { - content: '"'; + content: "❝"; + font-family: "Playfair Display", serif; position: relative; color: orange; font-size: 35px; + margin-top: 90px; + margin-left: 20px; } #author { @@ -43,17 +52,18 @@ h1 { font-style: italic; text-align: right; margin-top: 50px; - margin-left: 730px; + margin-right: 30px; margin-bottom: 20px; } #new-quote { color: white; + align-self: self-end; background-color: orange; border-radius: 5px; border-color: orange; - margin-left: 650px; - margin-top: 100px; width: 110px; height: 35px; + margin-top: auto; + margin-right: 30px; } From 396f94991b9ea46bee6e01554034ef993f7d128a Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Sun, 13 Jul 2025 21:37:07 +0100 Subject: [PATCH 4/5] comments --- Sprint-3/quote-generator/quotes.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index f2671efd0..6a5c4d5f6 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -501,6 +501,7 @@ const quoteButton = document.querySelector("#new-quote"); console.log(quoteButton); window.addEventListener("load", function () { + // to invoke quotes when page loads const result = pickFromArray(quotes); quote.textContent = `${result.quote}`; @@ -508,6 +509,7 @@ window.addEventListener("load", function () { }); quoteButton.addEventListener("click", function () { + // invoke quotes when the button is clicked const result = pickFromArray(quotes); quote.textContent = `${result.quote}`; From 7b417755200771ccb01306321f807894956788de Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Thu, 17 Jul 2025 20:30:45 +0100 Subject: [PATCH 5/5] no comas between properties of HTML elements --- Sprint-3/quote-generator/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 622174037..6ebc3608d 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -9,7 +9,7 @@

Quotes

-
+