long method in scripts/gallery.js refactored

frontend/www/scripts/gallery.js

 let goBackButton;
+let filesDiv = document.getElementById("img-collection");
+let filesDeleteDiv = document.getElementById("img-collection-delete");
+const currentImageFileElement = document.querySelector("#current");
+let isFirstImg = true;
+let fileCounter = 0;
+
+function handleImageElements(){
+    const otherImageFileElements = document.querySelectorAll(".imgs img");
+        const selectedOpacity = 0.6;
+        otherImageFileElements[0].style.opacity = selectedOpacity;
 
-function addImages(workoutData){
-    let filesDiv = document.getElementById("img-collection");
-        let filesDeleteDiv = document.getElementById("img-collection-delete");
+        otherImageFileElements.forEach((imageFileElement) => imageFileElement.addEventListener("click", (event) => {
+            //Changes the main image
+            currentImageFileElement.src = event.target.src;
 
-        const currentImageFileElement = document.querySelector("#current");
-        let isFirstImg = true;
+            //Adds the fade animation
+            currentImageFileElement.classList.add('fade-in')
+            setTimeout(() => currentImageFileElement.classList.remove('fade-in'), 500);
 
-        let fileCounter = 0;
+            //Sets the opacity of the selected image to 0.4
+            otherImageFileElements.forEach((imageFileElement) => imageFileElement.style.opacity = 1)
+            event.target.style.opacity = selectedOpacity;
+        }));
+}
+
+function appendImage(file){
+        let deleteImgButton = document.createElement("input");
+        deleteImgButton.type = "button";
+        deleteImgButton.className = "btn btn-close";
+        deleteImgButton.id = file.url.split("/")[file.url.split("/").length - 2];
+        deleteImgButton.addEventListener(
+            'click',
+            () => handleDeleteImgClick(deleteImgButton.id,
+            "DELETE",
+            `Could not delete workout ${deleteImgButton.id}!`,
+            HOST,
+            ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"]
+                ));
+        filesDeleteDiv.appendChild(deleteImgButton);
+
+        let img = document.createElement("img");
+        img.src = file.file;
+        filesDiv.appendChild(img);
+        deleteImgButton.style.left = `${(fileCounter % 4) * 191}px`;
+        deleteImgButton.style.top = `${Math.floor(fileCounter / 4) * 105}px`;
+
+        if(isFirstImg){
+            currentImageFileElement.src = file.file;
+            isFirstImg = false;
+        }
+        fileCounter++;
+}
 
+function addImages(workoutData){
         for (let file of workoutData.files) {
             let a = document.createElement("a");
             a.href = file.file;
@@ -19,34 +63,10 @@ function addImages(workoutData){
             let isImage = ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"].includes(a.text.split(".")[1]);
 
             if(isImage){
-                let deleteImgButton = document.createElement("input");
-                deleteImgButton.type = "button";
-                deleteImgButton.className = "btn btn-close";
-                deleteImgButton.id = file.url.split("/")[file.url.split("/").length - 2];
-                deleteImgButton.addEventListener(
-                    'click',
-                    () => handleDeleteImgClick(deleteImgButton.id,
-                    "DELETE",
-                    `Could not delete workout ${deleteImgButton.id}!`,
-                    HOST,
-                    ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"]
-                        ));
-                filesDeleteDiv.appendChild(deleteImgButton);
-
-                let img = document.createElement("img");
-                img.src = file.file;
-
-                filesDiv.appendChild(img);
-                deleteImgButton.style.left = `${(fileCounter % 4) * 191}px`;
-                deleteImgButton.style.top = `${Math.floor(fileCounter / 4) * 105}px`;
-
-                if(isFirstImg){
-                    currentImageFileElement.src = file.file;
-                    isFirstImg = false;
-                }
-                fileCounter++;
+                appendImage(file);
             }
         }
+        handleImageElements();
 }
 
 
@@ -64,23 +84,6 @@ function handleWorkoutData(workoutData){
 
         noImageText.classList.add("hide");
         addImages(workoutData);
-
-        const otherImageFileElements = document.querySelectorAll(".imgs img");
-        const selectedOpacity = 0.6;
-        otherImageFileElements[0].style.opacity = selectedOpacity;
-
-        otherImageFileElements.forEach((imageFileElement) => imageFileElement.addEventListener("click", (event) => {
-            //Changes the main image
-            currentImageFileElement.src = event.target.src;
-
-            //Adds the fade animation
-            currentImageFileElement.classList.add('fade-in')
-            setTimeout(() => currentImageFileElement.classList.remove('fade-in'), 500);
-
-            //Sets the opacity of the selected image to 0.4
-            otherImageFileElements.forEach((imageFileElement) => imageFileElement.style.opacity = 1)
-            event.target.style.opacity = selectedOpacity;
-        }));
 }
 
 async function retrieveWorkoutImages(id) {