Non so nemmeno cosa ho fatto

index.html

@@ -12,13 +12,20 @@
     <div class="titolo">OROSCOPO DEI POVERY 2025 AI EDITION</div>
     <div class="content">
       <center>
-        <label for="nome">Nome:</label>
+        <div id="defaultInput">
-        <input id="nome" name="nome" />
+          <label for="nome">Nome:</label>
+          <input id="nome" name="nome" />
+          <br />
+          <label for="segno">Segno:</label>
+          <input id="segno" name="segno" />
+        </div>
         <br />
-        <label for="segno">Segno:</label>
+        <div id="trovaSegno">
-        <input id="segno" name="segno" />
+          <a href="javascript: void(0)" id="link">Non conosci il tuo segno?</a>
-        <br />
+          <label for="nascita">Inserisci la tua data di nascita:</label>
-        <a href=".">Non conosci il tuo segno?</a>
+          <input type="date" id="date" />
+          <button onclick="trovaSegno()">Trova il tuo segno</button>
+        </div>
         <button onclick="Oroscopo()" id="bottone">
           Chiedi il tuo pronostico
         </button>
@@ -60,27 +67,45 @@
       <table>
         <tr>
           <td>Utenti di segno ariete: <span id="conteggioAriete">0</span></td>
-          <td class="tabellaColonna2">Utenti di segno toro: <span id="conteggioToro">0</span></td>        
+          <td class="tabellaColonna2">
+            Utenti di segno toro: <span id="conteggioToro">0</span>
+          </td>
         </tr>
         <tr>
           <td>Utenti di segno gemelli: <span id="conteggioGemelli">0</span></td>
-          <td class="tabellaColonna2">Utenti di segno cancro: <span id="conteggioCancro">0</span></td>
+          <td class="tabellaColonna2">
+            Utenti di segno cancro: <span id="conteggioCancro">0</span>
+          </td>
         </tr>
         <tr>
           <td>Utenti di segno leone: <span id="conteggioLeone">0</span></td>
-          <td class="tabellaColonna2">Utenti di segno vergine: <span id="conteggioVergine">0</span></td>
+          <td class="tabellaColonna2">
+            Utenti di segno vergine: <span id="conteggioVergine">0</span>
+          </td>
         </tr>
         <tr>
-          <td>Utenti di segno bilancia: <span id="conteggioBilancia">0</span></td>
+          <td>
-          <td class="tabellaColonna2">Utenti di segno scorpione: <span id="conteggioScorpione">0</span></td>
+            Utenti di segno bilancia: <span id="conteggioBilancia">0</span>
-        </tr>
+          </td>
-        <tr>          
+          <td class="tabellaColonna2">
-          <td>Utenti di segno sagittario: <span id="conteggioSagittario">0</span></td>
+            Utenti di segno scorpione: <span id="conteggioScorpione">0</span>
-          <td class="tabellaColonna2">Utenti di segno capricorno: <span id="conteggioCapricorno">0</span></td>
+          </td>
         </tr>
         <tr>
-          <td>Utenti di segno acquario: <span id="conteggioAcquario">0</span></td>
+          <td>
-          <td class="tabellaColonna2">Utenti di segno pesci: <span id="conteggioPesci">0</span></td>
+            Utenti di segno sagittario: <span id="conteggioSagittario">0</span>
+          </td>
+          <td class="tabellaColonna2">
+            Utenti di segno capricorno: <span id="conteggioCapricorno">0</span>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Utenti di segno acquario: <span id="conteggioAcquario">0</span>
+          </td>
+          <td class="tabellaColonna2">
+            Utenti di segno pesci: <span id="conteggioPesci">0</span>
+          </td>
         </tr>
       </table>
     </div>
@@ -223,8 +248,11 @@
         if (segniZodiacali.includes(segno)) {
           Conteggio(segno);
           return true;
-        } else {
+        } 
+        else {
           alert("Il segno inserito non è valido");
+          document.getElementById("segno").value = "";
+          document.getElementById("link").style.display = "block";
           return false;
         }
       }
@@ -305,6 +333,127 @@
           }
         }
       }
+
+      document
+        .getElementById("segno")
+        .addEventListener("input", function (event) {
+          document.getElementById("link").style.display = "none";
+        });
+
+      //mostro la parte per inserire la data e trovare il proprio segno e nascondo defaultInput
+      document
+        .getElementById("link")
+        .addEventListener("click", function (event) {
+          document.getElementById("link").style.display = "none";
+          document.getElementById("defaultInput").style.display = "none";
+          document.getElementById("bottone").style.display = "none";
+          document
+            .querySelectorAll("#trovaSegno > :not(#link)")
+            .forEach((tag) => (tag.style.display = "block"));
+        });
+
+      function trovaSegno() {
+        const nascita = document.getElementById("date").value.split("-");
+        const mese = parseInt(nascita[1]);
+        const giorno = parseInt(nascita[2]);
+        const campoSegno = document.getElementById("segno");
+
+        switch (mese) {
+          case 3:
+            if (giorno >= 20) {
+              campoSegno.value = segniZodiacali[0];
+            } else {
+              campoSegno.value = segniZodiacali[11];
+            }
+            break;
+          case 4:
+            if (giorno >= 19) {
+              campoSegno.value = segniZodiacali[1];
+            } else {
+              campoSegno.value = segniZodiacali[0];
+            }
+            break;
+          case 5:
+            if (giorno >= 20) {
+              campoSegno.value = segniZodiacali[2];
+            } else {
+              campoSegno.value = segniZodiacali[1];
+            }
+            break;
+          case 6:
+            if (giorno >= 20) {
+              campoSegno.value = segniZodiacali[3];
+            } else {
+              campoSegno.value = segniZodiacali[2];
+            }
+            break;
+          case 7:
+            if (giorno >= 22) {
+              campoSegno.value = segniZodiacali[4];
+            } else {
+              campoSegno.value = segniZodiacali[3];
+            }
+            break;
+          case 8:
+            if (giorno >= 22) {
+              campoSegno.value = segniZodiacali[5];
+            } else {
+              campoSegno.value = segniZodiacali[4];
+            }
+            break;
+          case 9:
+            if (giorno >= 22) {
+              campoSegno.value = segniZodiacali[6];
+            } else {
+              campoSegno.value = segniZodiacali[5];
+            }
+            break;
+          case 10:
+            if (giorno >= 22) {
+              campoSegno.value = segniZodiacali[7];
+            } else {
+              campoSegno.value = segniZodiacali[6];
+            }
+            break;
+          case 11:
+            if (giorno >= 21) {
+              campoSegno.value = segniZodiacali[8];
+            } else {
+              campoSegno.value = segniZodiacali[7];
+            }
+            break;
+          case 12:
+            if (giorno >= 21) {
+              campoSegno.value = segniZodiacali[9];
+            } else {
+              campoSegno.value = segniZodiacali[8];
+            }
+            break;
+          case 1:
+            if (giorno >= 20) {
+              campoSegno.value = segniZodiacali[10];
+            } else {
+              campoSegno.value = segniZodiacali[9];
+            }
+            break;
+          case 2:
+            if (giorno >= 18) {
+              campoSegno.value = segniZodiacali[11];
+            } else {
+              campoSegno.value = segniZodiacali[10];
+            }
+            break;
+        }
+
+        // Reset della UI a prima di premere il link
+        document.getElementById("link").style.display = "block";
+        document.getElementById("defaultInput").style.display = "block";
+        document.getElementById("bottone").style.display = "block";
+        document
+          .querySelectorAll("#trovaSegno > :not(#link)")
+          .forEach((tag) => (tag.style.display = "none"));
+        campoSegno.disabled = true;
+      }
       /*******************************************************************************************************************************************************/
     </script>
   </body>

style.css

@@ -62,4 +62,8 @@
 
 .tabellaColonna2{
     padding-left: 40px;
+}
+
+#trovaSegno > :not(#link){
+    display: none;
 }