diff --git a/README.md b/README.md
new file mode 100644
index 0000000..b6d121d
--- /dev/null
+++ 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
new file mode 100644
index 0000000..92fc0ce
--- /dev/null
+++ 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/code2image.png b/code2image.png
new file mode 100644
index 0000000..6b5aa3d
Binary files /dev/null and b/code2image.png differ
diff --git a/favicon.png b/favicon.png
new file mode 100644
index 0000000..3f053f9
Binary files /dev/null and b/favicon.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..10c0818
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+
+
+ CSV Viewer Online
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..3d8e935
--- /dev/null
+++ 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;
+}
+
+
+