From 1b021998be6203482d473aaebc26bbd01e13d016 Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Tue, 28 Jul 2026 23:20:34 +0100 Subject: [PATCH 1/2] quote_generator task under sprint 3 has been done --- Sprint-3/quote-generator/index.html | 14 +++++++---- Sprint-3/quote-generator/quotes.js | 20 +++++++++++++++ Sprint-3/quote-generator/style.css | 38 +++++++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 5 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..6ed93acd0 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,17 @@ - Title here + + Quote generator app -

hello there

-

-

- +
+

hello there

+

+

Quote by

+

+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..33ba70151 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -490,4 +490,24 @@ const quotes = [ }, ]; +// getting access from the html +const showquote = document.querySelector("displayArea"); +const areaOfQuote = document.querySelector("h1"); +const shufflebutton = document.querySelector("#new-quote"); +const AreaOfQuoteBy = document.querySelector("h3"); + // call pickFromArray with the quotes array to check you get a random quote + +function quoteGenerator() { + const entireQuote = pickFromArray(quotes); + const quot = entireQuote.quote; + const Author = entireQuote.author; + areaOfQuote.textContent = `" ${quot} "`; + AreaOfQuoteBy.textContent = `- ${Author}`; +} +//console.log(quoteGenerator); +//console.log(quot); +//console.log(Author); +quoteGenerator(); +//event handler +shufflebutton.addEventListener("click", quoteGenerator); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..79423435c 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,39 @@ /** Write your CSS in here **/ +.displayArea { + position: fixed; + border-style: groove; + border-top-left-radius: 0%; + top: 50%; + left: 50%; + width: 75%; + transform: translate(-50%, -50%); + background-color: whitesmoke; +} +body { + background-color: rgb(223, 208, 182); +} +#new-quote { + border-style: outset; + font-size: larger; + color: whitesmoke; + margin-left: 80%; + margin-bottom: 10px; + background-color: rgb(226, 203, 163); + block-size: 50px; +} +#new-quote:hover { + color: black; + border-right-width: 10px; + border-bottom-width: 10px; +} + +h1 { + text-align: center; + margin-right: 20px; + color: rgb(226, 203, 163); +} +h3 { + text-align: right; + margin-right: 20px; + color: rgb(226, 203, 163); +} From b97b8854454e01bd29de7743a87bc7e14ae0e8ab Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Mon, 3 Aug 2026 16:10:32 +0100 Subject: [PATCH 2/2] cleaning and fixing --- Sprint-3/quote-generator/index.html | 10 +++----- Sprint-3/quote-generator/quotes.js | 38 +++++------------------------ Sprint-3/quote-generator/style.css | 14 +++++++++-- 3 files changed, 22 insertions(+), 40 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 6ed93acd0..d44e295d5 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,18 +1,16 @@ - + - + Quote generator app
-

hello there

-

-

Quote by

-

+

hello there

+

Quote by

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 33ba70151..655e9044a 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,27 +1,7 @@ -// DO NOT EDIT BELOW HERE - -// pickFromArray is a function which will return one item, at -// random, from the given array. -// -// Parameters -// ---------- -// choices: an array of items to pick from. -// -// Returns -// ------- -// One item at random from the given array. -// -// Examples of use -// --------------- -// pickFromArray(['a','b','c','d']) // maybe returns 'c' - -// You don't need to change this function function pickFromArray(choices) { return choices[Math.floor(Math.random() * choices.length)]; } -// A list of quotes you can use in your app. -// DO NOT modify this array, otherwise the tests may break! const quotes = [ { quote: "Life isn't about getting and having, it's about giving and being.", @@ -490,24 +470,18 @@ const quotes = [ }, ]; -// getting access from the html -const showquote = document.querySelector("displayArea"); -const areaOfQuote = document.querySelector("h1"); +const areaOfQuote = document.querySelector("#quote"); const shufflebutton = document.querySelector("#new-quote"); -const AreaOfQuoteBy = document.querySelector("h3"); - -// call pickFromArray with the quotes array to check you get a random quote +const AreaOfQuoteBy = document.querySelector("#author"); function quoteGenerator() { const entireQuote = pickFromArray(quotes); const quot = entireQuote.quote; const Author = entireQuote.author; - areaOfQuote.textContent = `" ${quot} "`; - AreaOfQuoteBy.textContent = `- ${Author}`; + areaOfQuote.textContent = quot; + AreaOfQuoteBy.textContent = Author; } -//console.log(quoteGenerator); -//console.log(quot); -//console.log(Author); + quoteGenerator(); -//event handler + shufflebutton.addEventListener("click", quoteGenerator); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 79423435c..19e018878 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -27,12 +27,22 @@ body { border-bottom-width: 10px; } -h1 { +#quote { + display: block; + font-size: 2em; + margin-block-start: 0.67em; + margin-block-end: 0.67em; + font-weight: bold; text-align: center; margin-right: 20px; color: rgb(226, 203, 163); } -h3 { +#author { + font-size: 1.17em; + font-weight: bold; + margin-block-start: 1em; + margin-block-end: 1em; + display: block; text-align: right; margin-right: 20px; color: rgb(226, 203, 163);