1 year ago · 7693c7c931
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
 
				   "version": "1.0.50",
			
 
				   "scripts": {
			
 
				     "test": "echo \"Error: no test specified\" && exit 1",
			
 
				-    "dev": "bun run --watch src/index.ts"
			
 
				+    "dev": "bun run --hot src/index.ts"
			
 
				   },
			
 
				   "dependencies": {
			
 
				     "@elysiajs/html": "^1.0.2",
			
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -1,15 +1,63 @@
 
				 <!DOCTYPE html>
			
 
				 <html lang="en">
			
 
				+
			
 
				 <head>
			
 
				   <meta charset="UTF-8">
			
 
				   <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				   <title>ConvertX</title>
			
 
				   <link rel="stylesheet" href="pico.lime.min.css">
			
 
				   <link rel="stylesheet" href="style.css">
			
 
				+  <script src="index.js" defer></script>
			
 
				 </head>
			
 
				+
			
 
				 <body>
			
 
				-  <main class="container">
			
 
				-    <h1>Hello world!</h1>
			
 
				+  <header class="container-fluid">
			
 
				+    <nav>
			
 
				+      <ul>
			
 
				+        <li><strong>ConvertX</strong></li>
			
 
				+      </ul>
			
 
				+      <ul>
			
 
				+        <li><a href="#">About</a></li>
			
 
				+        <li><a href="#">Services</a></li>
			
 
				+        <li><button class="secondary">Products</button></li>
			
 
				+      </ul>
			
 
				+    </nav>
			
 
				+  </header>
			
 
				+
			
 
				+  <main class="container-fluid">
			
 
				+
			
 
				+    <!-- File upload -->
			
 
				+    <form method="post" enctype="multipart/form-data">
			
 
				+      <div>
			
 
				+        <article>
			
 
				+          <table id="file-list">
			
 
				+            <tr>
			
 
				+              <td>file.jpg</td>
			
 
				+              <td>3.2 MB</td>
			
 
				+              <td><button>x</button></td>
			
 
				+            </tr>
			
 
				+          </table>
			
 
				+          <input type="file" name="file" multiple />
			
 
				+          
			
 
				+        </article>
			
 
				+        <!-- <div class="icon">></div> -->
			
 
				+        <article>
			
 
				+          <select name="to" aria-label="Convert to" required>
			
 
				+            <option selected disabled value="">Convert to</option>
			
 
				+            <option>JPG</option>
			
 
				+            <option>PNG</option>
			
 
				+            <option>SVG</option>
			
 
				+            <option>PDF</option>
			
 
				+            <option>DOCX</option>
			
 
				+          </select>
			
 
				+        </article>
			
 
				+      </div>
			
 
				+      <div class="center">
			
 
				+        <button type="submit">Convert</button>
			
 
				+      </div>
			
 
				+    </form>
			
 
				   </main>
			
 
				+  <footer></footer>
			
 
				 </body>
			
 
				+
			
 
				 </html>
			
--- a/src/public/index.js
+++ b/src/public/index.js
@@ -0,0 +1,26 @@
 
				+// Select the file input element
			
 
				+const fileInput = document.querySelector('input[type="file"]');
			
 
				+
			
 
				+// Add a 'change' event listener to the file input element
			
 
				+fileInput.addEventListener("change", (e) => {
			
 
				+  console.log(e.target.files);
			
 
				+	// Get the selected files from the event target
			
 
				+	const files = e.target.files;
			
 
				+
			
 
				+	// Select the file-list table
			
 
				+	const fileList = document.querySelector("#file-list");
			
 
				+
			
 
				+	// Loop through the selected files
			
 
				+	for (let i = 0; i < files.length; i++) {
			
 
				+		// Create a new table row for each file
			
 
				+		const row = document.createElement("tr");
			
 
				+		row.innerHTML = `
			
 
				+      <td>${files[i].name}</td>
			
 
				+      <td>${(files[i].size / 1024 / 1024).toFixed(2)} MB</td>
			
 
				+      <td><button class="secondary">x</button></td>
			
 
				+    `;
			
 
				+
			
 
				+		// Append the row to the file-list table
			
 
				+		fileList.appendChild(row);
			
 
				+	}
			
 
				+});
			
--- a/src/public/style.css
+++ b/src/public/style.css
@@ -0,0 +1,21 @@
 
				+article {
			
 
				+  /* height: 300px; */
			
 
				+  /* width: 300px; */
			
 
				+
			
 
				+}
			
 
				+
			
 
				+div.icon {
			
 
				+  height: 100px;
			
 
				+  width: 100px;
			
 
				+}
			
 
				+
			
 
				+button[type="submit"] {
			
 
				+  width: 50%
			
 
				+}
			
 
				+
			
 
				+div.center {
			
 
				+  width: 100%;
			
 
				+  display: flex;
			
 
				+  justify-content: center;
			
 
				+  align-items: center;
			
 
				+}