Untitled

unknown
html
a year ago
5.1 kB
Indexable
Never
<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>