Spostamento JS in file esterno

This commit is contained in:
La Programmatrice Verde 2025-04-05 16:20:56 +02:00
parent 0e7c262616
commit ff9c0d27c4
2 changed files with 353 additions and 355 deletions

View File

@ -4,7 +4,7 @@
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title>Titolo</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="script.js" defer></script>
</head>
<body class="griglia">
<div class="titolo"><center>˗ˏˋ ★ ˎˊ˗ Oroscopo ˗ˏˋ ★ ˎˊ˗</center></div>
@ -109,359 +109,5 @@
<div class="segno">
</div>
<script>
document.addEventListener("onload", Init());
function Init(){
aggiungiDefault();
impostaImmagine();
}
const segniZodiacali = [
"Ariete",
"Toro",
"Gemelli",
"Cancro",
"Leone",
"Vergine",
"Bilancia",
"Scorpione",
"Sagittario",
"Capricorno",
"Acquario",
"Pesci",
];
/***********************************************Sezione Stats*******************************************************************************************/
stats = {
contatore: [
"conteggioTotale",
"conteggioAriete",
"conteggioToro",
"conteggioGemelli",
"conteggioCancro",
"conteggioLeone",
"conteggioVergine",
"conteggioBilancia",
"conteggioScorpione",
"conteggioSagittario",
"conteggioCapricorno",
"conteggioAcquario",
"conteggioPesci",
],
aggiornaStat(segno) {
document.getElementById(this.contatore[segno]).innerHTML =
parseInt(document.getElementById(this.contatore[segno]).innerHTML) +
1;
},
};
/*******************************************************************************************************************************************************/
/***********************************************Sezione Content*****************************************************************************************/
function Oroscopo() {
const frasi = [
"Una nuova opportunità lavorativa si presenta, sfruttala!",
"Ascolta i consigli degli amici, potrebbero essere utili.",
"Attento alle spese, non esagerare.",
"La vita sentimentale si anima, aspettati un sorriso!",
"Concentrati sui tuoi obiettivi e non lasciare che le distrazioni ti rallentino.",
"Sii paziente, i risultati non tarderanno.",
"Un cambiamento di programma potrebbe essere necessario.",
"La tua intuizione è acuta, ascoltala!",
"Non lasciare che le preoccupazioni ti consumino.",
"Il tuo amore per la famiglia e gli amici si rafforza.",
"Sii più aperto ai nuovi progetti, potrebbero essere interessanti!",
"Non esitare a chiedere aiuto quando ne hai bisogno.",
"La tua autorità è riconosciuta e apprezzata.",
"Sii cauto con le tue finanze, non spendere troppo!",
"Non lasciare che la pigrizia ti rallenti.",
"Le tue abilità organizzative sono essenziali per un nuovo progetto.",
"Sii più socievole e aperto con gli altri, potresti scoprire nuove amicizie!",
"Non esitare a chiedere chiarimenti quando ne hai bisogno.",
"La tua vita sociale si anima, aspettati un'intrattenimento!",
"Sii più equilibrato e razionale nelle tue decisioni.",
"Non lasciare che la competitività ti consumi.",
"I segreti di cui sei a conoscenza potrebbero essere utili per aiutare qualcuno.",
"Sii più aperto alle novità e non temere il cambiamento!",
"Non esitare a difendere ciò che è giusto.",
"La tua ambizione si rafforza, sfruttala per raggiungere nuovi obiettivi!",
"Sii più paziente e non affrettarti troppo.",
"Non lasciare che la curiosità ti porti a commettere errori.",
"La tua responsabilità è apprezzata e riconosciuta.",
"Sii più aperto alle novità e non temere il cambiamento!",
"Non esitare a chiedere aiuto quando ne hai bisogno.",
"La tua creatività è essenziale per un nuovo progetto.",
"Sii più socievole e aperto con gli altri, potresti scoprire nuove amicizie!",
"Non lasciare che la curiosità ti porti a commettere errori.",
"La tua intuizione è acuta, ascoltala!",
"Sii più aperto alle novità e non temere il cambiamento!",
"Non esitare a chiedere aiuto quando ne hai bisogno.",
];
document.getElementById("output").innerHTML = "";
if (!(document.getElementById("nome").value === "")) {
if (!(document.getElementById("segno").value === "Seleziona un segno")) {
if (
document.getElementById("bottone").innerHTML ===
"Chiedi un altro pronostico"
) {
let isSegnoDefaultPresent = false;
for (
let i = 0;
i <
document.getElementById("segno").getElementsByTagName("option")
.length && !isSegnoDefaultPresent;
i++
) {
if (
document.getElementById("segno").getElementsByTagName("option")[
i
] == "Seleziona un segno"
) {
document.getElementById("segno").value = "Seleziona un segno";
isSegnoDefaultPresent = true;
}
}
if (!isSegnoDefaultPresent) {
aggiungiDefault();
}
document.getElementById("segno").dispatchEvent(new Event("change"));
document.getElementById("link").style.display = "block";
document.getElementById("nome").value = "";
document.getElementById("bottone").innerHTML = "Chiedi il tuo pronostico";
}
else {
stats.aggiornaStat(0);
stats.aggiornaStat(
stats.contatore.indexOf(
`conteggio${document.getElementById("segno").value}`
)
);
aggiungiNome();
document.getElementById("output").innerHTML =
frasi[Math.floor(Math.random() * frasi.length)];
document.getElementById("bottone").innerHTML =
"Chiedi un altro pronostico";
if (document.getElementById("segno").disabled) {
document.getElementById("segno").disabled = false;
}
}
} else {
alert("Inserire il proprio segno");
}
} else {
alert("Inserire il proprio nome");
}
}
//gestione UI sezione trova segno
document.getElementById("segno").addEventListener("input", function () {
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 () {
document.getElementById("output").innerHTML = "";
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 = "inline"));
});
function trovaSegno() {
document.getElementById('segno').getElementsByTagName("option")[0].remove()
let isDateInserted = document.getElementById("date").value !== "";
if (isDateInserted) {
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;
}
document.getElementById("segno").dispatchEvent(new Event("change"));
// 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;
} else {
alert("Inserire una data completa");
}
}
function aggiungiNome(){
let found = false;
nome = document.createElement('li');
nome.innerHTML = document.getElementById('nome').value;
for(let i = 0; i < document.getElementsByClassName("nomi")[0].getElementsByTagName('ul')[0].getElementsByTagName('li').length && !found; i++){
if(document.getElementsByClassName("nomi")[0].getElementsByTagName('ul')[0].getElementsByTagName('li')[i].innerHTML == nome.innerHTML) {
found = true;
}
}
if (!found){
document.getElementsByClassName("nomi")[0].getElementsByTagName("ul")[0].appendChild(nome);
}
}
//gestione immagine segno
function impostaImmagine() {
const immagine = document.createElement("img");
immagine.setAttribute(
"src",
'img/Oroscopo.jpeg'
);
immagine.setAttribute("width", `${document.getElementsByClassName("segno")[0].offsetWidth}`);
document.getElementsByClassName('segno')[0].appendChild(immagine);
}
document.getElementById("segno").addEventListener("change", function() {
cambiaImmagine(document.getElementById("segno").value);
});
function cambiaImmagine(segno) {
const immagine = document.getElementsByClassName('segno')[0].getElementsByTagName("img")[0];
if(segno == "Seleziona un segno"){
immagine.setAttribute(
"src",
'img/Oroscopo.jpeg'
);
}
else{
immagine.setAttribute(
"src",
`img/${segno}.png`
);
}
}
//modifiche select del segno dinamiche
function aggiungiDefault() {
const selezioneDefault = document.createElement("option");
selezioneDefault.innerHTML = "Seleziona un segno";
document
.getElementById("segno")
.insertBefore(
selezioneDefault,
document.getElementById("segno").getElementsByTagName("option")[0]
);
document.getElementById("segno").value = "Seleziona un segno";
}
document
.getElementById("segno")
.addEventListener("mousedown", function () {
if (this.value == "Seleziona un segno") {
this.getElementsByTagName("option")[0].remove();
}
});
/*******************************************************************************************************************************************************/
</script>
</body>
</html>

352
script.js Normal file
View File

@ -0,0 +1,352 @@
document.addEventListener("onload", Init());
function Init(){
aggiungiDefault();
impostaImmagine();
}
const segniZodiacali = [
"Ariete",
"Toro",
"Gemelli",
"Cancro",
"Leone",
"Vergine",
"Bilancia",
"Scorpione",
"Sagittario",
"Capricorno",
"Acquario",
"Pesci",
];
/***********************************************Sezione Stats*******************************************************************************************/
stats = {
contatore: [
"conteggioTotale",
"conteggioAriete",
"conteggioToro",
"conteggioGemelli",
"conteggioCancro",
"conteggioLeone",
"conteggioVergine",
"conteggioBilancia",
"conteggioScorpione",
"conteggioSagittario",
"conteggioCapricorno",
"conteggioAcquario",
"conteggioPesci",
],
aggiornaStat(segno) {
document.getElementById(this.contatore[segno]).innerHTML =
parseInt(document.getElementById(this.contatore[segno]).innerHTML) +
1;
},
};
/*******************************************************************************************************************************************************/
/***********************************************Sezione Content*****************************************************************************************/
function Oroscopo() {
const frasi = [
"Una nuova opportunità lavorativa si presenta, sfruttala!",
"Ascolta i consigli degli amici, potrebbero essere utili.",
"Attento alle spese, non esagerare.",
"La vita sentimentale si anima, aspettati un sorriso!",
"Concentrati sui tuoi obiettivi e non lasciare che le distrazioni ti rallentino.",
"Sii paziente, i risultati non tarderanno.",
"Un cambiamento di programma potrebbe essere necessario.",
"La tua intuizione è acuta, ascoltala!",
"Non lasciare che le preoccupazioni ti consumino.",
"Il tuo amore per la famiglia e gli amici si rafforza.",
"Sii più aperto ai nuovi progetti, potrebbero essere interessanti!",
"Non esitare a chiedere aiuto quando ne hai bisogno.",
"La tua autorità è riconosciuta e apprezzata.",
"Sii cauto con le tue finanze, non spendere troppo!",
"Non lasciare che la pigrizia ti rallenti.",
"Le tue abilità organizzative sono essenziali per un nuovo progetto.",
"Sii più socievole e aperto con gli altri, potresti scoprire nuove amicizie!",
"Non esitare a chiedere chiarimenti quando ne hai bisogno.",
"La tua vita sociale si anima, aspettati un'intrattenimento!",
"Sii più equilibrato e razionale nelle tue decisioni.",
"Non lasciare che la competitività ti consumi.",
"I segreti di cui sei a conoscenza potrebbero essere utili per aiutare qualcuno.",
"Sii più aperto alle novità e non temere il cambiamento!",
"Non esitare a difendere ciò che è giusto.",
"La tua ambizione si rafforza, sfruttala per raggiungere nuovi obiettivi!",
"Sii più paziente e non affrettarti troppo.",
"Non lasciare che la curiosità ti porti a commettere errori.",
"La tua responsabilità è apprezzata e riconosciuta.",
"Sii più aperto alle novità e non temere il cambiamento!",
"Non esitare a chiedere aiuto quando ne hai bisogno.",
"La tua creatività è essenziale per un nuovo progetto.",
"Sii più socievole e aperto con gli altri, potresti scoprire nuove amicizie!",
"Non lasciare che la curiosità ti porti a commettere errori.",
"La tua intuizione è acuta, ascoltala!",
"Sii più aperto alle novità e non temere il cambiamento!",
"Non esitare a chiedere aiuto quando ne hai bisogno.",
];
document.getElementById("output").innerHTML = "";
if (!(document.getElementById("nome").value === "")) {
if (!(document.getElementById("segno").value === "Seleziona un segno")) {
if (
document.getElementById("bottone").innerHTML ===
"Chiedi un altro pronostico"
) {
let isSegnoDefaultPresent = false;
for (
let i = 0;
i <
document.getElementById("segno").getElementsByTagName("option")
.length && !isSegnoDefaultPresent;
i++
) {
if (
document.getElementById("segno").getElementsByTagName("option")[
i
] == "Seleziona un segno"
) {
document.getElementById("segno").value = "Seleziona un segno";
isSegnoDefaultPresent = true;
}
}
if (!isSegnoDefaultPresent) {
aggiungiDefault();
}
document.getElementById("segno").dispatchEvent(new Event("change"));
document.getElementById("link").style.display = "block";
document.getElementById("nome").value = "";
document.getElementById("bottone").innerHTML = "Chiedi il tuo pronostico";
}
else {
stats.aggiornaStat(0);
stats.aggiornaStat(
stats.contatore.indexOf(
`conteggio${document.getElementById("segno").value}`
)
);
aggiungiNome();
document.getElementById("output").innerHTML =
frasi[Math.floor(Math.random() * frasi.length)];
document.getElementById("bottone").innerHTML =
"Chiedi un altro pronostico";
if (document.getElementById("segno").disabled) {
document.getElementById("segno").disabled = false;
}
}
} else {
alert("Inserire il proprio segno");
}
} else {
alert("Inserire il proprio nome");
}
}
//gestione UI sezione trova segno
document.getElementById("segno").addEventListener("input", function () {
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 () {
document.getElementById("output").innerHTML = "";
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 = "inline"));
});
function trovaSegno() {
document.getElementById('segno').getElementsByTagName("option")[0].remove()
let isDateInserted = document.getElementById("date").value !== "";
if (isDateInserted) {
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;
}
document.getElementById("segno").dispatchEvent(new Event("change"));
// 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;
} else {
alert("Inserire una data completa");
}
}
function aggiungiNome(){
let found = false;
nome = document.createElement('li');
nome.innerHTML = document.getElementById('nome').value;
for(let i = 0; i < document.getElementsByClassName("nomi")[0].getElementsByTagName('ul')[0].getElementsByTagName('li').length && !found; i++){
if(document.getElementsByClassName("nomi")[0].getElementsByTagName('ul')[0].getElementsByTagName('li')[i].innerHTML == nome.innerHTML) {
found = true;
}
}
if (!found){
document.getElementsByClassName("nomi")[0].getElementsByTagName("ul")[0].appendChild(nome);
}
}
//gestione immagine segno
function impostaImmagine() {
const immagine = document.createElement("img");
immagine.setAttribute(
"src",
'img/Oroscopo.jpeg'
);
immagine.setAttribute("width", `${document.getElementsByClassName("segno")[0].offsetWidth}`);
document.getElementsByClassName('segno')[0].appendChild(immagine);
}
document.getElementById("segno").addEventListener("change", function() {
cambiaImmagine(document.getElementById("segno").value);
});
function cambiaImmagine(segno) {
const immagine = document.getElementsByClassName('segno')[0].getElementsByTagName("img")[0];
if(segno == "Seleziona un segno"){
immagine.setAttribute(
"src",
'img/Oroscopo.jpeg'
);
}
else{
immagine.setAttribute(
"src",
`img/${segno}.png`
);
}
}
//modifiche select del segno dinamiche
function aggiungiDefault() {
const selezioneDefault = document.createElement("option");
selezioneDefault.innerHTML = "Seleziona un segno";
document
.getElementById("segno")
.insertBefore(
selezioneDefault,
document.getElementById("segno").getElementsByTagName("option")[0]
);
document.getElementById("segno").value = "Seleziona un segno";
}
document
.getElementById("segno")
.addEventListener("mousedown", function () {
if (this.value == "Seleziona un segno") {
this.getElementsByTagName("option")[0].remove();
}
});
/*******************************************************************************************************************************************************/