Final commit of the app

Author: Arthur

Sprint-3/package.json

@@ -24,7 +24,7 @@
   "homepage": "https://github.com/CodeYourFuture/Module-Data-Groups#readme",
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
     "jest": "^30.0.4",
     "jest-environment-jsdom": "^30.0.4"

Sprint-3/quote-generator/index.html

@@ -5,11 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Title here</title>
     <script defer src="quotes.js"></script>
+    <link rel="stylesheet" href="style.css"> 
   </head>
   <body>
-    <h1>hello there</h1>
-    <p id="quote"></p>
-    <p id="author"></p>
+  <div class="card"> 
+    <div class="quote-container">
+
+    <span class="quote-mark">“</span><p id="quote"></p>
+    <p id="author"></p> </div>
+    
+    <div class="button-container">
+
     <button type="button" id="new-quote">New quote</button>
+    </div>
   </body>
+
 </html>
+
+

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": {
+    "jest-environment-jsdom": "^30.4.1"
+  }
 }

Sprint-3/quote-generator/quotes.js

@@ -1,24 +1,42 @@
 // 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)];
+
+function pickFromArray(quotes) {
+  return quotes[Math.floor(Math.random() * quotes.length)];
 }
+// First condition: When a person click the button, it should generate back a quote;
+
+function updateWebpageWithQuote() {
+  const elem = document.querySelector("#quote");
+  const elem2 = document.querySelector("#author");
+
+  // store into the variable
+  const elem3 = pickFromArray(quotes);
+  elem.innerText = elem3.quote;
+  elem2.innerText = elem3.author;
+}
+
+// Second condition:  when a person enter the website, it should have a quote appear;
+
+// Third condition:   when a person clicks the button each time, it should have different quote. .
 
 // A list of quotes you can use in your app.
 // DO NOT modify this array, otherwise the tests may break!
@@ -490,4 +508,9 @@ const quotes = [
   },
 ];
 
+const buttonElem = document.querySelector("#new-quote");
+
+buttonElem.addEventListener("click", updateWebpageWithQuote);
+updateWebpageWithQuote();
+
 // call pickFromArray with the quotes array to check you get a random quote

Sprint-3/quote-generator/style.css

@@ -1 +1,60 @@
 /** Write your CSS in here **/
+
+body{
+
+background-color:orange;
+margin:0;
+display: flex;
+min-height: 100vh;
+justify-content: center;
+align-items:center;
+}
+
+
+.card{
+background-color: white;
+padding:30px;
+border-radius: 8px;
+max-width: 500px;
+
+}
+
+.quote-container{
+display: flex;
+align-items: flex-start;
+gap: 15px;
+}
+
+.quote-mark{
+font-size: 90px;
+color: orange;
+line-height: 1;
+font-family: sans-serif;
+
+}
+
+
+#quote{
+ color: orange;
+ font-size: 24px;   
+}
+
+#author{
+ color: orange;
+ font-size: 24px;
+}
+
+.button-container{ 
+display:flex;
+justify-content:flex-end;
+min-height: 50px;
+
+}   
+
+#new-quote{
+background-color: orange;
+color:white;
+border: none;
+}
+
+