Christmas Light Monitor with Particle Mesh

var particle = new Particle();
const token = "access token here";
var selected = "";
const devices = {xenon1:"device ids",xenon2:"",xenon3:"",argon:""};

function updateColor(r, g ,b){
    var color_btn = document.getElementById("color_btn");
    var red = Number(r);
    var green = Number(g);
    var blue = Number(b);
    console.log(rgbToHex(red,green,blue));
    $('#color_btn').css("background-color",rgbToHex(red,green,blue));
}

const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
    const hex = x.toString(16)
    return hex.length === 1 ? '0' + hex : hex
  }).join('');

function updateXenon(r, g ,b){
    console.log(selected,r,g,b);
    rgbString = rgbToString(r,g,b);
    console.log(rgbString);
    var fnPr = particle.callFunction({
        deviceId: selected, name: 'change_color', argument: rgbString,
        auth: token
    });
}

function zeroPad(num, places) {
    var zero = places - num.toString().length + 1;
    return Array(+(zero > 0 && zero)).join("0") + num;
}

function rgbToString(r,g,b){
    return zeroPad(Number(r),3)+zeroPad(Number(g),3)+zeroPad(Number(b),3)
}

function updateLightLevels(){
    const id_list = ["light_lvl1","light_lvl2","light_lvl3"];
    const dev_list = [devices.xenon1,devices.xenon2,devices.xenon3];
    id_list.forEach(function(item,index){
        var element = document.getElementById(id_list[index]);
        console.log(id_list[index]);
        $.get("https://api.particle.io/v1/devices/"+dev_list[index]
        +"/light_level?access_token="+token,function(data){
            var percentage = Number(data.result) / 4096 * 100;
            percentage = percentage.toFixed(1);
            element.innerHTML = "Light level: "+percentage.toString()+"%";
        });
    });
}
setInterval(updateLightLevels,3000);

body{
    width: 550px;
    height: 500px;
}
#xenon_list{
    width: 100%;
    margin: auto;
}
.slider_container{
    width: 100%;
    display: inline-block;
}

.slider{
    -webkit-appearance: none;
    appearance: none;
    width: 50%;
    height: 25px;
    margin: 10px;
    background: rgb(255, 255, 255);
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
    -webkit-transition: 0.2s
}

.slider:hover{
    opacity: 1;
}

label{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width:25px;
    height:25px;
    background: #fb0000;
    cursor: pointer;
}

.slider::-moz-range-thumb{
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #fb0000;
}

#red::-moz-range-thumb{
    background: #fb0000;
}

#green::-moz-range-thumb{
    background: #00fb00;
}

#blue::-moz-range-thumb{
    background: #0000fb;
}

#final_color{
    display: inline-block;
    margin-bottom: 50px;
    margin-top: 50px;
}

#color_btn{
    width: 100px;
    height: 100px;
    float: top;
    background-color: black;
}

#submit_color{
    float: bottom;
    margin: 20px;
}

.xenon_select{
}

const int led_pins[3] = {A4,A2,A1};
const int ldr_pin = A0;

int lightLevel = 0;

int change_color(String data){
    //format is RRRGGGBBB
    int r = data.substring(0,3).toInt();
    int g = data.substring(3,6).toInt();
    int b = data.substring(6,9).toInt();
    int color_array[3] = {r,g,b};
    for(int i=0;i<3;i++){
        analogWrite(led_pins[i],color_array[i]);
    }
    return 0;
}

void setup() {
    Particle.variable("light_level", lightLevel);
    Particle.function("change_color", change_color);
    for(int i=0;i<3;i++){
        pinMode(led_pins[i],OUTPUT);
    }
}

void loop() {
    lightLevel = analogRead(ldr_pin);
}