improve result container of equation

Author: FarrelAD

src/web/index.html

@@ -84,7 +84,16 @@ <h1 class="font-bold text-2xl text-center flex items-baseline justify-center spa
                 <input type="submit" id="btn-process" value="Process" class="w-full mt-5 bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
             </form>
 
-            <div id="equation-result" class="mt-8"></div>
+            <div id="equation-result-container" class="hidden flex-col items-start w-full sm:w-auto mt-5 p-6 bg-gray-100 border border-gray-300 rounded-lg shadow-lg">
+                <p>Equation result</p>
+                <div class="flex items-center justify-between w-full">
+                    <p id="equation-result" class="text-2xl sm:text-4xl text-indigo-600 font-mono font-semibold">
+                    </p>
+                    <button id="btn-copy" class="text-sm sm:text-lg text-white bg-indigo-600 py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                        Copy
+                    </button>
+                </div>
+            </div>
         </section>
 
 

src/web/script.js

@@ -20,7 +20,11 @@ const featureSelect = document.getElementById('feature-select')
 const labelSelectionContainer = document.getElementById('label-selection-container')
 const labelSelect = document.getElementById('label-select')
 
+const equationResultContainer = document.getElementById('equation-result-container')
 const equationResult = document.getElementById('equation-result')
+const btnCopy = document.getElementById('btn-copy')
+
+
 /**
  * Linear equation result based on data processing
  * 
@@ -253,7 +257,9 @@ function singleFeatureProcess(feature, label) {
 
     equation = (x) => a + (b * x)
 
-    equationResult.textContent = `Equation result: y = ${a} + ${b}x`
+    equationResultContainer.classList.remove('hidden')
+    equationResultContainer.classList.add('flex')
+    equationResult.textContent = `y = ${a} + ${b}x`
 }
 
 
@@ -270,3 +276,13 @@ function multiFeatureProcess(features, label) {
     console.log('hey its me multi')
     console.log(fileData)
 }
+
+
+btnCopy.addEventListener('click', () => {
+    navigator.clipboard.writeText(equationResult.textContent).then(() => {
+        alert('Copied to clipboard!')
+    }).catch(err => {
+        console.error(err)
+        alert('Failed to copy text!')
+    })
+})