Added copy button feature with styled code block

Author: IshikaBanga26

examples/Tip_Calculator/index.html

@@ -30,7 +30,16 @@ <h1>Tip Calculator</h1>
             <p>Total: ₹<span id="total">0.00</span></p>
             <p>Each Pays: ₹<span id="each">0.00</span></p>
         </div>
+
+        <div class="code-block">
+            <pre><code>
+function calculateTip(bill, percentage) {
+    return (bill * percentage) / 100;
+}
+            </code></pre>
+        </div>
     </div>
+
     <script src="script.js"></script>
 </body>
 

examples/Tip_Calculator/script.js

@@ -56,5 +56,26 @@ function calculate() {
   resultsDiv.style.background = '#f1f5f9';
 }
 
+document.querySelectorAll('pre > code').forEach(codeBlock => {
+  const button = document.createElement('button');
+  button.className = 'copy-btn';
+  button.textContent = 'Copy';
+
+  const pre = codeBlock.parentNode;
+  const wrapper = document.createElement('div');
+  wrapper.className = 'code-block';
+  pre.parentNode.insertBefore(wrapper, pre);
+  wrapper.appendChild(pre);
+  wrapper.appendChild(button);
+
+  button.addEventListener('click', () => {
+    const text = codeBlock.textContent;
+    navigator.clipboard.writeText(text).then(() => {
+      button.textContent = 'Copied!';
+      setTimeout(() => (button.textContent = 'Copy'), 2000);
+    });
+  });
+});
+
 // Initial calculation on load
 calculate();

examples/Tip_Calculator/style.css

@@ -33,6 +33,43 @@ input[type="number"] {
     border: 1px solid #ddd;
 }
 
+.code-block {
+    margin-top: 20px;
+}
+
+.code-block pre {
+    background-color: #f5f5f5; 
+    border: 1px solid #ddd; 
+    border-radius: 8px; 
+    padding: 12px; 
+    overflow-x: auto;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: #4CAF50;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.3s;
+}
+
+.copy-btn:hover {
+  background: #45a049;
+}
+
+.code-block {
+  position: relative;
+}
+
+
 .tips {
     display: flex;
     gap: 8px;

package.json

@@ -5,11 +5,11 @@
   "main": "index.js",
   "devDependencies": {
     "@honkit/honkit-plugin-ga": "^1.0.1",
-    "cz-conventional-changelog": "^3.3.0",
+    "cz-conventional-changelog": "^3.0.1",
     "gitbook-plugin-ace-editor": "github:sumn2u/gitbook-plugin-ace-editor",
     "gitbook-plugin-chapter-fold": "^0.0.4",
     "gitbook-plugin-edit-link": "^2.0.2",
-    "gitbook-plugin-exercises": "^3.0.0",
+    "gitbook-plugin-exercises": "^1.0.0",
     "gitbook-plugin-favicon-custom": "^1.0.0",
     "gitbook-plugin-hide-published-with": "0.0.1",
     "gitbook-plugin-hints": "^1.0.2",
@@ -18,7 +18,7 @@
     "gitbook-plugin-sidebar-ad": "github:sumn2u/gitbook-plugin-sidebar-ad",
     "gitbook-plugin-sitemap": "^1.2.0",
     "gitbook-plugin-theme-creative": "github:sumn2u/gitbook-plugin-theme-creative",
-    "honkit": "^4.0.4",
+    "honkit": "^6.1.4",
     "honkit-plugin-i18nsettings": "^1.0.0"
   },
   "scripts": {