Initial commit

csv-viewer-online · Oct 25, 2024 · 47859a3 · 47859a3
commit 47859a3
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# CSV Viewer Online
+### [https://csv-viewer-online.github.io/](https://csv-viewer-online.github.io/)
+
+### Used plugins:
+
+- [PapaParse](https://github.com/mholt/PapaParse) for parsing CSV
+- [handsontable](https://github.com/handsontable/handsontable) for showing the parsed data as a spreadsheet
diff --git a/app.js b/app.js
@@ -0,0 +1,32 @@
+const input = document.getElementById('input-file')
+const handsontableContainer = document.getElementById('handsontable-container')
+
+input.onchange = function () {
+  const file = this.files[0]
+  const reader = new FileReader()
+
+  reader.onload = function (e) {
+    const csv = e.target.result
+    const data = Papa.parse(csv, {
+      header: true,
+      skipEmptyLines: true
+    })
+
+    // reset container
+    handsontableContainer.innerHTML = ''
+    handsontableContainer.className = ''
+    document.querySelector('input').remove()
+    document.querySelector('.sponsors').remove()
+
+    Handsontable(handsontableContainer, {
+      data: data.data,
+      rowHeaders: true,
+      colHeaders: data.meta.fields,
+      columnSorting: true,
+      width: '100%',
+      licenseKey: 'non-commercial-and-evaluation',
+    })
+  }
+
+  file && reader.readAsText(file)
+}
diff --git a/favicon.png b/favicon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<head>
+  <title>CSV Viewer Online</title>
+  <link rel="icon" href="favicon.png">
+  <link rel="stylesheet" href="./styles.css">
+  <meta name="description" content="Super SIMPLE viewer for CSV files">
+</head>
+
+<body>
+  <div class="sponsors">
+    <!-- <a href="https://tabootwin.com/" class="sponsor" target="_blank" rel="noopener" aria-label="The Next Generation of AI Girlfriend">
+      <img src="./tabootwin.png" width="300" height="100" alt="The Next Generation of AI Girlfriend">
+    </a> -->
+    <div>
+      <a href="mailto:csv-viewer-online@pm.me?subject=Advertising on CSV Viewer" class="place-your-ad-here">
+        Place YOUR AD HERE <br> 6.8k visitors monthly, $15/month
+      </a>
+    </div>
+  </div>
+
+  <input type="file" id="input-file" accept=".csv">
+
+  <div id="handsontable-container"></div>
+
+  <script src="https://cdn.jsdelivr.net/npm/handsontable@13/dist/handsontable.full.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/papaparse@5"></script>
+  <script src="./app.js?1"></script>
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@13/dist/handsontable.full.min.css">
+
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-NVLYJXZFK6"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-NVLYJXZFK6');
+  </script>
+</body>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,49 @@
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+#handsontable-container.handsontable {
+  height: 100%;
+}
+
+.sponsors {
+  position: fixed;
+  top: 20px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.sponsors a {
+  margin: 0 30px;
+}
+
+.sponsors div {
+  width: 100%;
+  text-align: center;
+}
+
+.place-your-ad-here {
+  display: inline-block;
+  border: 3px solid #126BCF;
+  border-radius: 5px;
+  color: #126BCF;
+  font-weight: bold;
+  padding: 10px 25px;
+  text-align: center;
+  line-height: 1.5;
+}