feat: add 2-line truncation with show more/less to stabilize quote layout

Konvaly · Konvaly · commit 10f58ab239ce · 2025-12-10T14:43:44.000Z
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -12,9 +12,15 @@
 <body>
   <main class="quote-app">
     <h1>hello there</h1>
-    <p id="quote"></p>
-    <p id="author"></p>
+
+    <div class="quote-box">
+      <p id="quote"></p>
+      <p id="author"></p>
+    </div>
+
+    <button type="button" id="toggle-quote">Show more</button>
     <button type="button" id="new-quote">New quote</button>
+
     <div class="auto-play-controls">
       <label class="auto-play-label">
         <input type="checkbox" id="auto-play-toggle" />
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -505,11 +505,34 @@ const authorEl = getElement("author");
 const newQuoteBtn = getElement("new-quote");
 const autoPlayToggle = getElement("auto-play-toggle");
 const autoPlayStatus = getElement("auto-play-status");
+const toggleQuoteBtn = getElement("toggle-quote");
 
 newQuoteBtn.addEventListener("click", showRandomQuote);
 
 let autoPlayInterval = null;
 
+let isQuoteExpanded = false;
+
+function updateQuoteToggleVisibility() {
+  if (quoteEl.scrollHeight <= quoteEl.clientHeight) {
+    toggleQuoteBtn.classList.add("hidden");
+  } else {
+    toggleQuoteBtn.classList.remove("hidden");
+  }
+}
+
+toggleQuoteBtn.addEventListener("click", () => {
+  if (isQuoteExpanded) {
+    quoteEl.classList.add("quote-clamped");
+    toggleQuoteBtn.innerText = "Show more";
+    isQuoteExpanded = false;
+  } else {
+    quoteEl.classList.remove("quote-clamped");
+    toggleQuoteBtn.innerText = "Show less";
+    isQuoteExpanded = true;
+  }
+});
+
 autoPlayToggle.addEventListener("click", () => {
   if (autoPlayToggle.checked) {
     autoPlayStatus.innerText = "auto-play: ON";
@@ -527,8 +550,13 @@ function showRandomQuote() {
   const randomQuote = pickFromArray(quotes);
 
   quoteEl.innerText = randomQuote.quote;
-
   authorEl.innerText = randomQuote.author;
+
+  isQuoteExpanded = false;
+  quoteEl.classList.add("quote-clamped");
+  toggleQuoteBtn.innerText = "Show more";
+
+  updateQuoteToggleVisibility();
 }
 
 showRandomQuote();
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
@@ -58,3 +58,39 @@ label {
   gap: 0.4rem;
   margin: 0;
 }
+
+.quote-box {
+  min-height: 5rem;
+  margin-bottom: 1rem;
+}
+
+#quote {
+  margin-bottom: 0.5rem;
+  line-height: 1.4;
+}
+
+.quote-clamped {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+#author {
+  font-style: italic;
+  color: #4b5563;
+}
+
+#toggle-quote {
+  margin-bottom: 0.75rem;
+  padding: 0.3rem 0.75rem;
+  border-radius: 999px;
+  border: 1px solid #cbd5f5;
+  background: #e5f0ff;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+
+#toggle-quote.hidden {
+  display: none;
+}
