add preview csv file content in web

Author: FarrelAD

src/web/index.html

@@ -30,6 +30,10 @@ <h1 class="font-bold text-2xl text-center">JS Linear Regression</h1>
             <input type="submit" 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="preview-data-container" style="display: none; margin-top: 5rem;">
+
+        </div>
     </main>
 
     <script src="script.js"></script>

src/web/script.js

@@ -1,8 +1,45 @@
 const dataForm = document.getElementById('data-form')
+const previewData = document.getElementById('preview-data-container')
 
 dataForm.addEventListener('submit', function(e) {
     e.preventDefault()
 
-    console.log('data!')
-    console.log(this)
+    const formData = new FormData(this)
+    const file = formData.get('data')
+
+    const reader = new FileReader()
+
+    reader.onload = (e) => {
+        const fileContent = e.target.result
+        const rows = fileContent.split(/[\r\n]+/).map(row => row.split(','))
+        previewData.style.display = 'block'
+        
+        let previewedTable = `
+        <table class="min-w-full table-auto bg-white shadow-md rounded-lg">
+            <thead class="bg-gray-200 rounded-t-lg">
+                <tr>
+        `
+
+        for (const item of rows.shift()) {
+            previewedTable += `<td class="px-4 py-2 text-left text-sm font-semibold text-gray-700">${item}</td>`
+        }
+
+        previewedTable += `
+                </tr>
+            </thead>
+        `
+
+        for (const row of rows) {
+            previewedTable += `<tr>`
+            for (const item of row) {
+                previewedTable += `<td>${item}</td>`
+            }
+            previewedTable += `</tr>`
+
+        }
+
+        previewData.innerHTML = previewedTable
+    }
+
+    reader.readAsText(file)
 })