feat: ui remake with tailwind

src/public/script.js

@@ -1,8 +1,17 @@
 // Select the file input element
 const fileInput = document.querySelector('input[type="file"]');
+const dropZone = document.getElementById("dropzone");
 const fileNames = [];
 let fileType;
 
+dropZone.addEventListener("dragover", (e) => {
+  dropZone.classList.add("dragover");
+});
+
+dropZone.addEventListener("dragleave", (e) => {
+  dropZone.classList.remove("dragover");
+});
+
 const selectContainer = document.querySelector("form .select_container");
 
 const updateSearchBar = () => {
@@ -20,16 +29,20 @@ const updateSearchBar = () => {
       for (const target of targets) {
         if (target.dataset.target.includes(search)) {
           matchingTargetsFound++;
-          target.hidden = false;
+          target.classList.remove("hidden");
+          target.classList.add("flex");
         } else {
-          target.hidden = true;
+          target.classList.add("hidden");
+          target.classList.remove("flex");
         }
       }
 
       if (matchingTargetsFound === 0) {
-        groupElement.hidden = true;
+        groupElement.classList.add("hidden");
+        groupElement.classList.remove("flex");
       } else {
-        groupElement.hidden = false;
+        groupElement.classList.remove("hidden");
+        groupElement.classList.add("flex");
       }
     }
   };
@@ -59,15 +72,18 @@ const updateSearchBar = () => {
     // Keep the popup open even when clicking on a target button
     // for a split second to allow the click to go through
     if (e?.relatedTarget?.classList?.contains("target")) {
-      convertToPopup.hidden = true;
+      convertToPopup.classList.add("hidden");
+      convertToPopup.classList.remove("flex");
       return;
     }
 
-    convertToPopup.hidden = true;
+    convertToPopup.classList.add("hidden");
+    convertToPopup.classList.remove("flex");
   });
 
   convertToInput.addEventListener("focus", () => {
-    convertToPopup.hidden = false;
+    convertToPopup.classList.remove("hidden");
+    convertToPopup.classList.add("flex");
   });
 };
 
@@ -94,6 +110,7 @@ fileInput.addEventListener("change", (e) => {
 
     if (!fileType) {
       fileType = file.name.split(".").pop();
+      console.log("fileType", fileType);
       fileInput.setAttribute("accept", `.${fileType}`);
       setTitle();
 

src/public/style.css

@@ -1,59 +0,0 @@
-div.icon {
-  height: 100px;
-  width: 100px;
-}
-
-button[type="submit"] {
-  width: 50%;
-}
-
-div.center {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-@media (max-width: 99999999999px) {
-  .convert_to_popup {
-    width: 50vw !important;
-    height: 50vh;
-  }
-}
-
-@media (max-width: 850px) {
-  .convert_to_popup {
-    width: 60vw !important;
-    height: 60vh;
-  }
-}
-
-@media (max-width: 575px) {
-  .convert_to_popup {
-    width: 80vw !important;
-    height: 75vh;
-  }
-}
-
-@media (max-height: 1000px) {
-  .convert_to_popup {
-    height: 40vh;
-  }
-}
-@media (max-height: 650px) {
-  .convert_to_popup {
-    height: 30vh;
-  }
-}
-
-@media (max-height: 500px) {
-  .convert_to_popup {
-    height: 25vh;
-  }
-}
-
-@media (max-height: 400px) {
-  .convert_to_popup {
-    height: 15vh;
-  }
-}