Untitled
unknown
html
a year ago
5.1 kB
3
Indexable
<html>
<head>
<title> Crea Rettangolo al Click - Esercizio 2 </title>
</head>
<body>
<h1>
Clicca un punto qualsiasi per creare un rettangolo randomico. Clicca sullo stesso per rimuoverlo.
</h1>
<script>
/* Funzione al click del mouse, stampa su schemro un rettangolo di dimensione min 50x50 e massimo 400x400 e di colore randomico.
* All'interno di ogni rettangolo viene visualizzato un testo con il numero determinato in base all'ordine di creazione e lo specifico colore.
*/
document.addEventListener("click", function () {
// Verifica che l'elemento cliccato, se non nullo, sia un rettangolo. In caso positivo lo rimuove, in caso negativo ne crea uno nuovo
// nel punto cliccato
var elementoSelezionato = document.elementFromPoint(event.clientX, event.clientY);
// Descrizione riguardo al numero che indica il numero di creazione del rettangolo
var testoNumeroRettangolo = "Rettangolo numero: ";
// Descrizione riguardo al colore del rettangolo
var testoColoreRettangolo = " Colore: ";
if (elementoSelezionato !== null && elementoSelezionato.id == "rettangolo") {
// Rimuove il rettangolo selezionato dal documento
elementoSelezionato.remove();
console.log("Rettangolo cliccato rimosso");
// Ricava una lista di tutti i rettangoli presenti
var listaRettangoli = document.querySelectorAll("#rettangolo");
// Ottiene il numero totale di rettangoli
numeroRettangoli = listaRettangoli.length;
console.log("Numero totale rettangoli: " + numeroRettangoli);
// Aggiorna il testo di ogni rettangolo con il corretto numero
for(let i = 0; i < numeroRettangoli; i++) {
// Ottiene le varie parti del testo diviso dallo spazio per ricavare il colore (si trovo all'ultima posizione)
var partiTesto = listaRettangoli[i].textContent.split(" ");
// Aggiorna il testo con il corretto numero e il colore specifico (che rimane invariato)
listaRettangoli[i].textContent = testoNumeroRettangolo + (i + 1) + testoColoreRettangolo + partiTesto[(partiTesto.length - 1)];
}
console.log("Testo rettangoli aggiornato");
} else {
// Genera misure random per l'altezza e la larghezza del rettangolo da creare
var numPxAltezza = Math.floor(Math.random() * (350)) + 50;
console.log("Altezza randomica: " + numPxAltezza);
var numPxLarghezza = Math.floor(Math.random() * (350)) + 50;
console.log("Larghezza randomica: " + numPxLarghezza);
// Crea un array dei vari colori da poter scegliere
var coloriPossibili = [
"red",
"green",
"blue",
"yellow",
"orange",
"purple",
"pink",
"brown",
"gray",
"black"
];
// Ottiene un indice randomico dal totale dei colori possibili
var indiceRandom = Math.floor(Math.random() * (coloriPossibili.length -1));
// Ottiene il colore attraverso l'indice randomico
var coloreRandom = coloriPossibili[indiceRandom];
console.log("Colore randomico: " + coloreRandom);
// Crea un nuovo rettangolo
var rettangolo = document.createElement("div");
rettangolo.id = "rettangolo";
rettangolo.style.width = numPxLarghezza + "px";
rettangolo.style.height = numPxAltezza + "px";
rettangolo.style.backgroundColor = coloreRandom;
rettangolo.style.position = "absolute";
// Calcolo quanti rettangoli sono presenti
numeroRettangoli = document.querySelectorAll("#rettangolo").length;
console.log("Numero rettangoli gia creati: " + numeroRettangoli);
// Imposto il testo con il numero dei rettangoli totali e il colore specifico
rettangolo.textContent = testoNumeroRettangolo + (numeroRettangoli + 1) + testoColoreRettangolo + coloreRandom;
console.log("Testo del nuovo rettangolo aggiunto");
// Imposta le coordinate del rettangolo in base al click
rettangolo.style.left = event.clientX + "px";
rettangolo.style.top = event.clientY + "px";
// Aggiungi l'elemento al documento
document.body.appendChild(rettangolo);
console.log("Rettangolo aggiunto")
}
}
);
</script>
</body>
</html>