1 yıl önce · 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;
														
 
															+}