Random Color Picker LWC

This blog post is about the POC of the Random Color Picker tool, with this lightning web component we can generate the random colors and can copy the hex color code in the clipboard.

Let’s check how to generate the random color code:

backgroundColor;
backgroundColorCode;
getRandomColor(){
        
        let x,y,z;
        x = parseInt(Math.random()*255); //generate random integer numer in 255 range
        y = parseInt(Math.random()*255);
        z = parseInt(Math.random()*255);
        
        let hexColorCode = "#" + this.componentToHex(x) + this.componentToHex(y) +   this.componentToHex(z);
        this.backgroundColorCode = hexColorCode.toUpperCase();
        this.backgroundColor = 'background-color:' + hexColorCode;

    }
componentToHex(c) {
        var hex = c.toString(16); //convert the number into hexadecimal numbers
        return hex.length == 1 ? "0" + hex : hex;
      }

Generates random integer numbers in the 255 range.

parseInt(Math.random()*255);

Converts the number into hexadecimal numbers.

var hex = c.toString(16);

Finally in the below code snippet: append ‘#’ and concatenate all the hexadecimal numbers.

let hexColorCode = "#" + this.componentToHex(x) + this.componentToHex(y) + this.componentToHex(z);

Copy to clipboard function: This function copies the hex code in the clipboard.

copyToClipboard(event){
        try{
            //dynamically creating html component
            var hiddenInputEle = document.createElement("input");
            //get the title of clicked element (hex code)
            let val = event.target.title;
            //set value attribute 
            hiddenInputEle.setAttribute("value", val);
            //append the element in the document body
            document.body.appendChild(hiddenInputEle);
            // select the content
            hiddenInputEle.select();
            // Execute the copy command
            document.execCommand("copy");
            document.body.removeChild(hiddenInputEle); 
            // show the toast meesage
            const evt = new ShowToastEvent({
                title: this._title,
                message: this.message,
                variant: this.variant,
            });
            this.dispatchEvent(evt);
        }
        catch(error){
            //show toast message in case of error
            const evt = new ShowToastEvent({
                title: 'Error!',
                message: 'Error has occured '+error,
                variant: 'error',
            });
            this.dispatchEvent(evt);
        }
    }