Ristrutturazione JS

index.html

@@ -18,6 +18,7 @@
         <label for="segno">Segno:</label>
         <input id="segno" name="segno" />
         <br />
+        <a href=".">Non conosci il tuo segno?</a>
         <button onclick="Oroscopo()" id="bottone">
           Chiedi il tuo pronostico
         </button>
@@ -128,6 +129,7 @@
       </div>
     </div>
     <script>
+      /***********************************************Sezione Controls******************************************************************************/
       color = document.getElementById("color");
       costellazione = document.getElementById("costellazione");
 
@@ -174,7 +176,80 @@
           div.style.border = `2px solid ${event.target.value}`;
         });
       }
+      /*******************************************************************************************************************************************************/
 
+      /***********************************************Sezione Stats*******************************************************************************************/
+      const segniZodiacali = [
+        "ariete",
+        "toro",
+        "gemelli",
+        "cancro",
+        "leone",
+        "vergine",
+        "bilancia",
+        "scorpione",
+        "sagittario",
+        "capricorno",
+        "acquario",
+        "pesci",
+      ];
+
+      // Oggetto per gestire i contatori
+      let contatori = {};
+
+      // Recupera i valori dal localStorage oppure inizializza a 0
+      segniZodiacali.forEach((segno) => {
+        contatori[segno] = localStorage.getItem(segno)
+          ? parseInt(localStorage.getItem(segno))
+          : 0;
+      });
+
+      // totale utenti
+      let countTotale = localStorage.getItem("countTotale")
+        ? parseInt(localStorage.getItem("countTotale"))
+        : 0;
+
+      // Aggiorna i testi iniziali nella UI
+      document.getElementById("conteggio").innerHTML = countTotale;
+      segniZodiacali.forEach((segno) => {
+        const elem = document.getElementById(`conteggio${capitalize(segno)}`);
+        if (elem) elem.innerHTML = contatori[segno];
+      });
+
+      // Seleziona il segno, prepara per l'aumento del conteggio
+      function Segni() {
+        const segno = document.getElementById("segno").value.toLowerCase();
+
+        if (segniZodiacali.includes(segno)) {
+          Conteggio(segno);
+          return true;
+        } else {
+          alert("Il segno inserito non è valido");
+          return false;
+        }
+      }
+
+      function Conteggio(segno) {
+        contatori[segno]++; // Incrementa il conteggio del segno
+        countTotale++; // Incrementa il conteggio totale
+
+        // Salva in localStorage
+        localStorage.setItem(segno, contatori[segno]);
+        localStorage.setItem("countTotale", countTotale);
+
+        // Aggiorna la UI
+        document.getElementById(`conteggio${capitalize(segno)}`).innerHTML =
+          contatori[segno];
+        document.getElementById("conteggio").innerHTML = countTotale;
+      }
+
+      // Prima lettera maiuscola
+      function capitalize(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1);
+      }
+      /*******************************************************************************************************************************************************/
+
+      /***********************************************Sezione Content*****************************************************************************************/
       async function Oroscopo() {
         //frasiCaricamento();
 
@@ -230,76 +305,7 @@
           }
         }
       }
-
-      const segniZodiacali = [
-        "ariete",
-        "toro",
-        "gemelli",
-        "cancro",
-        "leone",
-        "vergine",
-        "bilancia",
-        "scorpione",
-        "sagittario",
-        "capricorno",
-        "acquario",
-        "pesci",
-      ];
-
-      // Oggetto per gestire i contatori
-      let contatori = {};
-
-      // Recupera i valori dal localStorage oppure inizializza a 0
-      segniZodiacali.forEach((segno) => {
-        contatori[segno] = localStorage.getItem(segno)
-          ? parseInt(localStorage.getItem(segno))
-          : 0;
-      });
-
-      // totale utenti
-      let countTotale = localStorage.getItem("countTotale")
-        ? parseInt(localStorage.getItem("countTotale"))
-        : 0;
-
-      // Aggiorna i testi iniziali nella UI
-      document.getElementById("conteggio").innerHTML = countTotale;
-      segniZodiacali.forEach((segno) => {
-        const elem = document.getElementById(`conteggio${capitalize(segno)}`);
-        if (elem) elem.innerHTML = contatori[segno];
-      });
-
-      // Funzione per gestire il conteggio
-      function Segni() {
-        const segno = document.getElementById("segno").value.toLowerCase();
-
-        if (segniZodiacali.includes(segno)) {
-          Conteggio(segno);
-          return true;
-        } else {
-          alert("Il segno inserito non è valido");
-          return false;
-        }
-      }
-
-      // Funzione per incrementare il conteggio e salvare i dati
-      function Conteggio(segno) {
-        contatori[segno]++; // Incrementa il conteggio del segno
-        countTotale++; // Incrementa il conteggio totale
-
-        // Salva in localStorage
-        localStorage.setItem(segno, contatori[segno]);
-        localStorage.setItem("countTotale", countTotale);
-
-        // Aggiorna la UI
-        document.getElementById(`conteggio${capitalize(segno)}`).innerHTML =
-          contatori[segno];
-        document.getElementById("conteggio").innerHTML = countTotale;
-      }
-
-      // Funzione per capitalizzare la prima lettera (es: "ariete" → "Ariete")
-      function capitalize(str) {
-        return str.charAt(0).toUpperCase() + str.slice(1);
-      }
+      /*******************************************************************************************************************************************************/
     </script>
   </body>
 </html>