Testare i colori esadecimali al volo con Javascript

Corso Javascript Impara a creare controlli ed animazioni

Un modulo, un semplice foglio di stile, uno script di poche righe e con un po di fantasia, possiamo testare i codici dei colori esadecimali che ci passano per la mente! Non sono un esperto della materia, so solo (e tanto mi basta) che non tutti i caratteri sono adatti alla generazione di un codice esadecimale valido, il quale deve essere composto di almeno 6 caratteri più un cancelletto (#) iniziale.

Passiamo in rassegna rispettivamente i codici del modulo Html, del box che mostrerà il colore (come colore di sfondo del box stesso) e dello script per dinamizzare l'applicazione:

<form name="modulo">
    <b>#</b> <input type="text" name="colore" value="FFFFFF" maxlength="6">
    <input type="button" value="Test" onClick="Colore()">
</form>

<div id="box">&nbsp;</div>

#box
{
    text-align: Center;
    width: 300px;
    height: 300px;
    border: Solid 1px #000000;
}

function Colore()
{
    // CONTROLLO CHE L'IMMISSIONE DI UN CARATTERE NON VALIDO NON GENERI ERRORE
    try
    {
        var colore = document.modulo.colore.value;
       // CONTROLLO CHE IL VALORE IMMESSO CONTENGE ALMENO 6 CARATTERI
        if (colore.length < 6)
        {
            alert("Inserire un minimo di 6 caratteri");
            document.modulo.colore.value = "";
            document.modulo.colore.focus();
        }
        else
        {
            // COLORO LO SFONDO DEL BOX PER FORNIRE IL RISULTATO FINALE
            box.style.backgroundColor = "#" + colore;
        }
    }
    // GESTISCO L'EVENTUALE ERRORE
    catch (e)
    {
        alert("Attenzione! Hai utilizzato un carattere non valido!");
        document.modulo.colore.value = "";
        document.modulo.colore.focus();
    }
}