* add css on area hover

* comments

src/public/js/main.js

@@ -3,12 +3,27 @@ window.addEventListener("load", () => main());
 const main = () => {
     Array.from(document.getElementsByClassName("upload-area")).forEach(
         (uploadArea) => {
+            /* Handle event when a file is dropped hover the input area */
             uploadArea.addEventListener("drop", (event) => {
                 fetchFile(event.dataTransfer.files);
             });
+
+            /* Handle color change when dragging a file hover the input area */
+            const hoverCSS = "upload-area-hovered";
+            uploadArea.addEventListener("dragover", () => {
+                if (!uploadArea.classList.contains(hoverCSS)) {
+                    uploadArea.classList.add(hoverCSS);
+                }
+            });
+            uploadArea.addEventListener("dragleave", () => {
+                if (uploadArea.classList.contains(hoverCSS)) {
+                    uploadArea.classList.remove(hoverCSS);
+                }
+            });
         }
     );
 
+    /* Handle when a file is added to the input element */
     const input = document.getElementById("upload");
     input.onchange = () => {
         fetchFile(input.files, input);

src/public/styles/style.css

@@ -16,6 +16,7 @@
         --grey: rgb(207, 216, 220);
         --shadow: rgba(0, 0, 0, 0.3);
         --border: rgb(45, 40, 22);
+        --border-hover: rgb(184, 150, 48);
         --font-size: 17px;
     }
 }
@@ -30,6 +31,7 @@
         --grey: rgb(55, 71, 79);
         --shadow: rgba(125, 109, 60, 0.3);
         --border: rgb(213, 202, 168);
+        --border-hover: rgb(223, 193, 99);
         --font-size: 17px;
     }
 }
@@ -95,6 +97,11 @@ main {
     cursor: pointer;
 }
 
+.upload-area:hover,
+.upload-area-hovered {
+    border: 2px dashed var(--border-hover);
+}
+
 .desc-area {
     text-align: left;
     max-width: 30%;