add no file selected text to preview

index.html

@@ -67,7 +67,7 @@
             <div class="table-cell">
               <ul id="image-size-settings"></ul>
               <div id="only-images-file-error" class="msg error-msg">Only images file type are allowed</div>
-              <div id="no-file-selected" class="msg">No files selected</div>
+              <div class="no-file-selected" class="msg">No files selected</div>
               <button id="all-same-size">Apply first image size to all images</button>
             </div>
           </div>
@@ -172,6 +172,7 @@
     <section class="section bottom-divider">
       <h2>3. Preview</h2>
       <section class="sub-section">
+        <div class="no-file-selected" class="msg">No files selected</div>
         <div id="images-canvas-container"></div>
       </section>
     </section>

js/script.js

@@ -743,11 +743,17 @@ function handleImageSelection(evt) {
   onlyImagesFileError.style.display = 'none';
 
   // initial message
-  const noFileSelected = document.getElementById('no-file-selected');
+  const noFileSelected = document.querySelectorAll('.no-file-selected');
   if (files.length > 0) {
-    noFileSelected.style.display = 'none';
+    noFileSelected.forEach((el) => {
+      // eslint-disable-next-line no-param-reassign
+      el.style.display = 'none';
+    });
   } else {
-    noFileSelected.style.display = 'block';
+    noFileSelected.forEach((el) => {
+      // eslint-disable-next-line no-param-reassign
+      el.style.display = 'block';
+    });
   }
 
   for (let i = 0; files[i]; i++) {
@@ -848,7 +854,10 @@ function handleImageSelection(evt) {
               allSameSizeButton.style.display = 'none';
             }
             if (images.length() === 0) {
-              noFileSelected.style.display = 'block';
+              noFileSelected.forEach((el) => {
+                // eslint-disable-next-line no-param-reassign
+                el.style.display = 'block';
+              });
             }
             update();
           };