From 38de43fc98cf82e0b15b9c05af3cfd028660ccb4 Mon Sep 17 00:00:00 2001
From: Karma Riuk <riukkarma@gmail.com>
Date: Thu, 15 May 2025 11:18:42 +0200
Subject: [PATCH] now using .hidden everywhere to toggle visibility of elements

---
 public/css/style.css |  5 -----
 public/index.html    |  6 +++---
 public/js/index.js   | 10 +++++-----
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index cf2741f..e9cf803 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -59,10 +59,6 @@ h1 {
     height: auto;
 }
 
-#progress-container {
-    display: none;
-}
-
 #progress-container div {
     display: flex;
     width: 100%;
@@ -76,7 +72,6 @@ h1 {
 }
 
 .results-container {
-    display: none;
     justify-items: center;
 }
 
diff --git a/public/index.html b/public/index.html
index e15336c..c5f33fb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -61,7 +61,7 @@
         </fieldset>
 
 
-        <div id="progress-container">
+        <div id="progress-container" class="hidden">
             <h3>Processing answers...</h3>
             <div>
                 <progress id="progress-bar" value="0" max="100"></progress>
@@ -69,7 +69,7 @@
             </div>
         </div>
 
-        <div id="comment" class="results-container">
+        <div id="comment" class="results-container hidden">
             <h3>Results Comment Generation<button class="download-results">Download</button></h3>
             <table class="sortable">
                 <thead>
@@ -84,7 +84,7 @@
             </table>
         </div>
 
-        <div id="refinement" class="results-container">
+        <div id="refinement" class="results-container hidden">
             <h3>Results Code Refinement<button class="download-results">Download</button></h3>
             <table class="sortable">
                 <thead>
diff --git a/public/js/index.js b/public/js/index.js
index 656f6a9..039ee85 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -54,16 +54,16 @@ document.getElementById("upload-btn").onclick = async () => {
     }
 
     results = json;
-    progressContainer.style.display = "none";
+    progressContainer.classList.add("hidden");
 
-    commentResultsContainer.style.display = "none";
-    refinementResultsContainer.style.display = "none";
+    commentResultsContainer.classList.add("hidden");
+    refinementResultsContainer.classList.add("hidden");
     const resultsContainer =
         type === "comment"
             ? commentResultsContainer
             : refinementResultsContainer;
 
-    resultsContainer.style.display = "block";
+    resultsContainer.classList.remove("hidden");
 
     const tbody = resultsContainer.querySelector("table tbody");
     tbody.innerHTML = "";
@@ -121,7 +121,7 @@ socket.on("progress", (data) => {
 });
 
 socket.on("started-processing", () => {
-    progressContainer.style.display = "block";
+    progressContainer.classList.remove("hidden");
     setProgress(0);
 });