468 lines
17 KiB
HTML
468 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<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>
|
|
</head>
|
|
<body class="griglia">
|
|
<div class="titolo"><center>˗ˏˋ ★ ˎˊ˗ Oroscopo ˗ˏˋ ★ ˎˊ˗</center></div>
|
|
<div class="content">
|
|
<center>
|
|
<div id="defaultInput">
|
|
<label for="nome">Nome:</label>
|
|
<input id="nome" name="nome" />
|
|
<br />
|
|
<label for="segno">Segno:</label>
|
|
<select name="segno" id="segno">
|
|
<option>Ariete</option>
|
|
<option>Toro</option>
|
|
<option>Gemelli</option>
|
|
<option>Cancro</option>
|
|
<option>Leone</option>
|
|
<option>Vergine</option>
|
|
<option>Bilancia</option>
|
|
<option>Scorpione</option>
|
|
<option>Sagittario</option>
|
|
<option>Capricorno</option>
|
|
<option>Acquario</option>
|
|
<option>Pesci</option>
|
|
</select>
|
|
</div>
|
|
<br />
|
|
<div id="trovaSegno">
|
|
<a href="javascript: void(0)" id="link">Non conosci il tuo segno?</a>
|
|
<p">Inserisci la tua data di nascita:</p>
|
|
<input type="date" id="date" />
|
|
<br />
|
|
<br />
|
|
<button onclick="trovaSegno()">Trova il tuo segno</button>
|
|
</div>
|
|
<br />
|
|
<button onclick="Oroscopo()" id="bottone">
|
|
Chiedi il tuo pronostico
|
|
</button>
|
|
<br />
|
|
<br />
|
|
<div id="output"></div>
|
|
</center>
|
|
</div>
|
|
<div class="nomeRiquadro2"><center>Chi ha fatto affidamento a questo sito:</center></div>
|
|
<div class="nomi">
|
|
<ul>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="nomeRiquadro1"><center>Stats</center></div>
|
|
<div class="stats" id="stats">
|
|
<p>
|
|
Utenti che hanno fatto affidamento a questo oroscopo:
|
|
<span id="conteggioTotale">0</span>
|
|
</p>
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Utenti di segno bilancia: <span id="conteggioBilancia">0</span>
|
|
</td>
|
|
<td class="tabellaColonna2">
|
|
Utenti di segno scorpione: <span id="conteggioScorpione">0</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<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>
|
|
<div class="nomeRiquadro3"><center>Segno</center></div>
|
|
<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>
|