$(function() { // these represent our starting rbg values var r = 150; var g = 100; var b = 200; var startR = 150; var startG = 100; var startB = 200; //this represents our starting increment speed var incrementSpeed = 10; //starts the initial function init(); // initial function function init() { //functions running on start setBackground(); displayR(); displayG(); displayB(); displaySpeed(); mousedown_rUp(); mousedown_gUp(); mousedown_bUp(); mousedown_rDown(); mousedown_gDown(); mousedown_bDown(); mousedown_rValue(); mousedown_gValue(); mousedown_bValue(); mousedown_incrementSpeed(); mousedown_speedUp(); mousedown_speedDown(); mousedown_colorSelector(); mousedown_backspace(); mousedown_reset(); //all our stored functions // protects our numbers from going over 256 or below 0 function numberRange(){ if (r<0){ r=0; displayR(); console.log('cant go below 0'); }; if (g<0){ g=0; displayG(); console.log('cant go below 0'); }; if (b<0){ b=0; displayB(); console.log('cant go below 0'); }; if (r>256){ r=256; displayR(); console.log('cant go above 256'); }; if (g>256){ g=256; displayG(); console.log('cant go above 256'); }; if (b>256){ b=256; displayB(); console.log('cant go above 256'); }; } //sets background to our rgb variables function setBackground(){ $('#wrapper').css('background-color', 'rgb(' + r + ',' + g + ',' + b + ')'); } // display the r value in #rValue function displayR(){ $('#rValue').html('

R
' + r + '

'); } // display the g value in #gValue function displayG(){ $('#gValue').html('

G
' + g + '

'); } // display the b value in #bValue function displayB(){ $('#bValue').html('

B
' + b + '

'); } // this displays our current increment speed function displaySpeed(){ $('#incrementSpeed').html('

' + incrementSpeed + '

'); } // mousedown function for rUp function mousedown_rUp(){ $('#rUp').mousedown(function(){ $('#rUp').css('opacity', 0.8); }); $('#rUp').mouseup(function(){ $('#rUp').css('opacity', 0.5); }); } // mousedown function for gUp function mousedown_gUp(){ $('#gUp').mousedown(function(){ $('#gUp').css('opacity', 0.8); }); $('#gUp').mouseup(function(){ $('#gUp').css('opacity', 0.5); }); } // mousedown function for bUp function mousedown_bUp(){ $('#bUp').mousedown(function(){ $('#bUp').css('opacity', 0.8); }); $('#bUp').mouseup(function(){ $('#bUp').css('opacity', 0.5); }); } // mousedown function for rDown function mousedown_rDown(){ $('#rDown').mousedown(function(){ $('#rDown').css('opacity', 0.8); }); $('#rDown').mouseup(function(){ $('#rDown').css('opacity', 0.5); }); } // mousedown function for gDown function mousedown_gDown(){ $('#gDown').mousedown(function(){ $('#gDown').css('opacity', 0.8); }); $('#gDown').mouseup(function(){ $('#gDown').css('opacity', 0.5); }); } // mousedown function for bDown function mousedown_bDown(){ $('#bDown').mousedown(function(){ $('#bDown').css('opacity', 0.8); }); $('#bDown').mouseup(function(){ $('#bDown').css('opacity', 0.5); }); } // mousedown function for rValue function mousedown_rValue(){ $('#rValue').mousedown(function(){ $('#rValue').css('opacity', 0.8); }); $('#rValue').mouseup(function(){ $('#rValue').css('opacity', 0.5); }); } // mousedown function for gValue function mousedown_gValue(){ $('#gValue').mousedown(function(){ $('#gValue').css('opacity', 0.8); }); $('#gValue').mouseup(function(){ $('#gValue').css('opacity', 0.5); }); } // mousedown function for bValue function mousedown_bValue(){ $('#bValue').mousedown(function(){ $('#bValue').css('opacity', 0.8); }); $('#bValue').mouseup(function(){ $('#bValue').css('opacity', 0.5); }); } // mousedown function for incrementSpeed function mousedown_incrementSpeed(){ $('#incrementSpeed').mousedown(function(){ $('#incrementSpeed').css('opacity', 0.8); }); $('#incrementSpeed').mouseup(function(){ $('#incrementSpeed').css('opacity', 0.5); }); } // mousedown function for speedUp function mousedown_speedUp(){ $('#speedUp').mousedown(function(){ $('#speedUp').css('opacity', 0.8); }); $('#speedUp').mouseup(function(){ $('#speedUp').css('opacity', 0.5); }); } // mousedown function for colorSelector function mousedown_colorSelector(){ $('#colorSelector').mousedown(function(){ $('#colorSelector').css('opacity', 0.8); }); $('#colorSelector').mouseup(function(){ $('#colorSelector').css('opacity', 0.5); }); } // mousedown function for speedDown function mousedown_speedDown(){ $('#speedDown').mousedown(function(){ $('#speedDown').css('opacity', 0.8); }); $('#speedDown').mouseup(function(){ $('#speedDown').css('opacity', 0.5); }); } // mousedown function for backspace function mousedown_backspace(){ $('#backspace').mousedown(function(){ $('#backspace').css('opacity', 0.8); }); $('#backspace').mouseup(function(){ $('#backspace').css('opacity', 0.5); }); } // mousedown function for backspace function mousedown_reset(){ $('#reset').mousedown(function(){ $('#reset').css('opacity', 0.8); }); $('#reset').mouseup(function(){ $('#reset').css('opacity', 0.5); }); } // this says is we click our R value, then it will reset to 0 $('#rValue').click(function(){ r=0; displayR(); setBackground(); }); // this says is we click our R value, then it will reset to 0 $('#gValue').click(function(){ g=0; displayG(); setBackground(); }); // this says is we click our R value, then it will reset to 0 $('#bValue').click(function(){ b=0; displayB(); setBackground(); }); // this handles increasing the r value $('#rUp').click(function(){ r=r+incrementSpeed; displayR(); setBackground(); displaySpeed(); numberRange(); }); // this handles increasing the g value $('#gUp').click(function(){ g=g+incrementSpeed; displayG(); setBackground(); displaySpeed(); numberRange(); }); // this handles increasing the b value $('#bUp').click(function(){ b=b+incrementSpeed; displayB(); setBackground(); displaySpeed(); numberRange(); }); // this handles decreasing the r value $('#rDown').click(function(){ r=r-incrementSpeed; displayR(); setBackground(); displaySpeed(); numberRange(); }); // this handles decreasing the g value $('#gDown').click(function(){ g=g-incrementSpeed; displayG(); displaySpeed(); setBackground(); numberRange(); }); // this handles decreasing the b value $('#bDown').click(function(){ b=b-incrementSpeed; displayB(); displaySpeed(); setBackground(); numberRange(); }); // this handles increasing the increment speed $('#speedUp').click(function(){ incrementSpeed=incrementSpeed+1; displaySpeed(); }); // this handles decreasing the increment speed $('#speedDown').click(function(){ incrementSpeed=incrementSpeed-1; displaySpeed(); }); // this handles increasing the increment speed $('#incrementSpeed').click(function(){ incrementSpeed=10; displaySpeed(); }); // this sets up an array of our color classes var color = ['#color1','#color2','#color3','#color4','#color5']; // this is our array number x=0; // this lets us choose 5 colors by clicking // the selector button $('#colorSelector').click(function(){ console.log(x); if(r<150&g<150 | g<150&b<150 | r<150&b<150){ $(color[x]).css('color', 'white'); } else{ $(color[x]).css('color', 'black') } $(color[x]).css('background-color', 'rgb(' + r + ',' + g + ',' + b + ')'); $(color[x]).html('rgb(' + r + ',' + g + ',' + b + ')'); x=x+1 if(x>4){ x=0; console.log(x); } }); $('#backspace').click(function(){ if(x===0){ x=5; $(color[x]).css('background-color', 'white'); $(color[x]).html(''); console.log(x); } x=x-1; $(color[x]).css('background-color', 'white'); $(color[x]).html(''); console.log(x); }); // this resets our script $('#reset').click(function(){ $('#color1').css('background-color','white') $('#color1').html('') $('#color2').css('background-color','white') $('#color2').html('') $('#color3').css('background-color','white') $('#color3').html('') $('#color4').css('background-color','white') $('#color4').html('') $('#color5').css('background-color','white') $('#color5').html('') x=0; r=startR; g=startG; b=startB; displayR(); displayG(); displayB(); setBackground(); }); }; });

RGB Color Selector V1.3