var EVENT_TYPE      = touchstart // Global Event Typevar H               = 360,S                   = 1.0,V                   = 1.0var randomColorsList    = [],staticColorsList    = [                         [r = 255, g = 56, b = 30],                        [r = 22, g = 20, b = 32],                        [r = 24, g = 244, b = 223],                        [r = 188, g = 222, b = 32],                        [r = 122, g = 211, b = 36],                        [r = 199, g = 22, b = 33],                        [r = 12, g = 11, b = 56],                        [r = 133, g = 22, b = 31],                        [r = 122, g = 2, b = 3],                        [r = 133, g = 222, b = 44],                        [r = 122, g = 211, b = 24],                        [r = 133, g = 222, b = 11],                        [r = 141, g = 255, b = 3],                        [r = 156, g = 25, b = 3],                        [r = 112, g = 25, b = 3],                        [r = 112, g = 25, b = 3],                     ];INIT_RANDOM_COLORS  = 0,MAX_RANDOM_COLORS   = 15,INIT_STATIC_COLORS  = 0,MAX_STATIC_COLORS   = 15var colorListener = function( event ){var r = this.r,    g = this.g,    b = this.b    alert(R:  + r +  G:  + g +  B:  + b);}var randomColorButtonListener = function( event ){for(i = INIT_RANDOM_COLORS; i <= MAX_RANDOM_COLORS ; i++ ){    var color = hsvToRgb(Math.random()*H, S, V); //Renders high intesity colors    var r = Math.round(color[0]);    var g = Math.round(color[1]);    var b = Math.round(color[2]);    randomColorsList[i].style.background = rgb(+ r + , + b + , + g +);    randomColorsList[i].r = r;    randomColorsList[i].g = g;    randomColorsList[i].b = b;}}var optionsButtonsListener = function( event ){var optionID = this.buttonID;swtich( optionID ){case button1:    alert(Options Button 1);    return;case button2:    alert(Options Button 2);    return;case button3:    alert(Options Button 3);    return;case button4:    alert(Options Button 4);    return;case default:    alert(This is not an option);    return}}function simpleDashInit(){//simpleDashboardWrapper Div var simpleDashID                        = simpleDash,    simpleDashWrapperWidth              = 600,    simpleDashWrapperHeight             = 712,    simpleDashWrapperPosition           = absolute,    simpleDashWrapperTop                = 480,    simpleDashWrapperBG                 = url('simpleDashBG.png'),    simpleDashWrapperBGRepeat           = no-repeat//randomColorWrapper Div var randomColorWrapperID                = randomColorWrapper,    randomColorWrapperWidth             = 580,    randomColorWrapperTop               = 75,    randomColorWrapperLeft              = 5,    randomColorWrapperPosition          = absolute,    randomColorWrapperBorder            = 1px solid #712f04,    randomColorWrapperBackground        = #ffedcc,    randomColorWrapperCorner            = 15,    randomColorWrapperMargin            = 0px 0px 0px 8px,    randomColorWrapperPadding           = 0px 0px 5px 0px//randomColor Div var randomColorID                       = randomColor,    randomColorsHeight                  = 55,    randomColorsWidth                   = 55,    randomColorCorner                   = 15,    randomColorsBorder                  = 5px solid #712f04,    randomColorsMargin                  = 5px 0px 0px 6px,    randomColorsFloat                   = left,    randomColorsCorner                  = 15,    randomColorsBackground              = #ffedcc//Random Colors Buttonvar newRandomColorsID                   = newRandomColorButton,    newRandomColorWidth                 = 580,    newRandomColorHeight                = 50,    newRandomColorsCorner               = 15,    newRandomColorsTop                  = 10,    newRandomColorsLeft                 = 5,    newRandomColorFontSize              = 14,    newRandomColorFontType              = comic-sans,    newRandomColorsPosition             = absolute,    newRandomColorBorder                = 5px solid #712f04,    newRandomColorBG                    = #ffedcc//Random Color Button Text var newRandomColorButtonTextID          = newRandomColorText,    newRandomColorButtonTextInnerHTML   = Touch For New Colors,    newRandomColorButtomTextFontSize    = 30,    newRandomColorButtonTextFontFamily  = Arial,    newRandomColorButtonTextFontWeight  = bold,    newRandomColorButtonTextPosition    = absolute,    newRandomColorButtonTextColor       = #712f04,    newRandomColorButtonTextLeft        = 120,    newRandomColorButtonTextTop         = 10//Static Colors Wrappervar staticColorsWrapperID               = staticColorsWrapper,    staticColorsWrapperWidth            = 580,    staticColorsWrapperTop              = 229,      staticColorsWrapperPosition         = absolute,    staticColorsWrapperBorder           = 1px solid black,    staticColorsWrapperBackground       = #ffedcc,    staticColorsWrapperCorner           = 15,    staticColorsWrapperMargin           = 0px 0px 0px 8px,    staticColorsWrapperPadding          = 0px 0px 5px 0px//Static Colorsvar staticColorID                       = staticColor,    staticColorWidth                    = 55,    staticColorHeight                   = 55,    staticColorCorner                   = 15,    staticColorBorder                   = 5px solid #712f04,    staticColorMargin                   = 5px 0px 0px 6px,    staticColorFloat                    = left//Options Menu Wrappervar optionsMenuWrapperID                = optionsMenuWrapper,    optionsMenuWrapperWidth             = 580,    optionsMenuWrapperTop               = 383,    optionsMenuWrapperPosition          = absolute,    optionsMenuWrapperBorder            = 0px solid black,    optionsMenuWrapperMargin            = 0px 0px 0px 14px,    optionsMenuWrapperPadding           = 0px 0px 0px 0px//Options Buttons Propertiesvar optionsButtonID                     = optionsButton,       optionsButtonWidth                  = 132,    optionsButtonHeight                 = 150,    optionsButtonFloat                  = left    optionsButtonBorder                 = 1px solid black,    optionsButtonBackground             = #ffedcc,    optionsButtonCorner                 = 15,    optionsButtonMargin                 = 0px 11px 0px 0px,    optionsButtonPadding                = 5px 0px 0px 0px//Button Backgoundsvar optionButtonOneBG                   = url(homeIcon.png)  3px 9px no-repeat #ffedcc,    optionButtonTwoBG                   = url(pagesIcon.png) 3px 9px no-repeat #ffedcc,    optionButtonThreeBG                 = url(saveIcon.png)  3px 9px no-repeat #ffedcc,    optionButtonFourBG                  = url(eraseIcon.png) 3px 9px no-repeat #ffedccvar simpleDashboardWrapper = document.createElement(div);simpleDashboardWrapper.setAttribute(id, simpleDashID);simpleDashboardWrapper.style.width            = simpleDashWrapperWidth;simpleDashboardWrapper.style.height           = simpleDashWrapperHeight;simpleDashboardWrapper.style.position         = simpleDashWrapperPosition;simpleDashboardWrapper.style.top              = simpleDashWrapperTop;simpleDashboardWrapper.style.background       = simpleDashWrapperBG;simpleDashboardWrapper.style.backgroundRepeat = simpleDashWrapperBGRepeat;document.body.appendChild(simpleDashboardWrapper);var randomColorPalleteWrapper = document.createElement(div);randomColorPalleteWrapper.setAttribute(id, randomColorWrapperID);randomColorPalleteWrapper.style.width        = randomColorWrapperWidth;randomColorPalleteWrapper.style.position     = randomColorWrapperPosition;randomColorPalleteWrapper.style.top          = randomColorWrapperTop;randomColorPalleteWrapper.style.border       = randomColorWrapperBorder;randomColorPalleteWrapper.style.background   = randomColorWrapperBackground;randomColorPalleteWrapper.style.borderRadius = randomColorWrapperCorner;randomColorPalleteWrapper.style.margin       = randomColorWrapperMargin;randomColorPalleteWrapper.style.padding      = randomColorWrapperPadding;simpleDashboardWrapper.appendChild(randomColorPalleteWrapper);for(i = INIT_RANDOM_COLORS; i <= MAX_RANDOM_COLORS; i++){    var color = hsvToRgb(Math.random()*H, S, V); //Pruduces high intesity colors    var r = Math.round(color[0]);    var g = Math.round(color[1]);    var b = Math.round(color[2]);    var randomColor = document.createElement(div);    randomColor.setAttribute(id, randomColorID);    randomColor.style.width        = randomColorsWidth;    randomColor.style.height       = randomColorsHeight;    randomColor.style.margin       = randomColorsMargin;    randomColor.style.border       = randomColorsBorder;    randomColor.style.float        = randomColorsFloat;    randomColor.style.borderRadius = randomColorCorner;    randomColor.r                  = r;    randomColor.b                  = b;    randomColor.g                  = g;    randomColor.style.background   = rgb(+ r + , + b + , + g +);    randomColorsList[i] = randomColor;    randomColor.addEventListener(EVENT_TYPE, colorListener);    randomColorPalleteWrapper.appendChild(randomColor);}var newRandomColorsButton = document.createElement(div);    newRandomColorsButton.setAttribute(id, newRandomColorsID);    newRandomColorsButton.style.width           = newRandomColorWidth;    newRandomColorsButton.style.height          = newRandomColorHeight;    newRandomColorsButton.style.borderRadius    = newRandomColorsCorner;    newRandomColorsButton.style.fontSize        = newRandomColorFontSize;    newRandomColorsButton.style.fontFamily      = newRandomColorFontType;    newRandomColorsButton.style.position        = newRandomColorsPosition;    newRandomColorsButton.style.top             = newRandomColorsTop;    newRandomColorsButton.style.left            = newRandomColorsLeft;    newRandomColorsButton.style.border          = newRandomColorBorder;    newRandomColorsButton.style.background      = newRandomColorBG;    newRandomColorsButton.addEventListener(EVENT_TYPE, randomColorButtonListener);    simpleDashboardWrapper.appendChild(newRandomColorsButton);var newRandomColorButtonText = document.createElement(div);    newRandomColorButtonText.setAttribute(id, newRandomColorButtonTextID);    newRandomColorButtonText.style.fontSize     = newRandomColorButtomTextFontSize;    newRandomColorButtonText.style.fontFamily   = newRandomColorButtonTextFontFamily;    newRandomColorButtonText.style.fontWeight   = newRandomColorButtonTextFontWeight;    newRandomColorButtonText.style.color        = newRandomColorButtonTextColor;    newRandomColorButtonText.style.position     = newRandomColorButtonTextPosition;    newRandomColorButtonText.style.left         = newRandomColorButtonTextLeft;    newRandomColorButtonText.style.top          = newRandomColorButtonTextTop;    newRandomColorButtonText.innerHTML          = newRandomColorButtonTextInnerHTML;    newRandomColorsButton.appendChild(newRandomColorButtonText);// STATIC COLORS WRAPPERvar staticColorsWrapper = document.createElement(div);    staticColorsWrapper.setAttribute(id, staticColorsWrapperID);    staticColorsWrapper.style.width             = staticColorsWrapperWidth;    staticColorsWrapper.style.position          = staticColorsWrapperPosition;    staticColorsWrapper.style.top               = staticColorsWrapperTop;    staticColorsWrapper.style.border            = staticColorsWrapperBorder;    staticColorsWrapper.style.background        = staticColorsWrapperBackground;    staticColorsWrapper.style.borderRadius      = staticColorsWrapperCorner;    staticColorsWrapper.style.margin            = staticColorsWrapperMargin;    staticColorsWrapper.style.padding           = staticColorsWrapperPadding;    simpleDashboardWrapper.appendChild(staticColorsWrapper);for(i = INIT_STATIC_COLORS; i <= MAX_STATIC_COLORS; i++){    var staticColor = document.createElement(div);    staticColor.setAttribute(id, staticColorID)    staticColor.style.width                     = staticColorWidth;    staticColor.style.height                    = staticColorHeight;    staticColor.style.margin                    = staticColorMargin;    staticColor.style.border                    = staticColorBorder;    staticColor.style.float                     = staticColorFloat;    staticColor.style.borderRadius              = staticColorCorner;    staticColor.style.background                = rgb(+ staticColorsList[i][0] + , + staticColorsList[i][1] + , + staticColorsList[i][2] +);    staticColor.r                               = staticColorsList[i][0]; //  0 = r    staticColor.g                               = staticColorsList[i][1]; //  1 = g    staticColor.b                               = staticColorsList[i][2]; //  2 = b    staticColor.addEventListener(EVENT_TYPE, colorListener);    staticColorsWrapper.appendChild(staticColor);}// OPTION BUTTONS WRAPPERoptionsButtonWrapper = document.createElement(div);optionsButtonWrapper.setAttribute(id, optionsMenuWrapperID);optionsButtonWrapper.style.width                = optionsMenuWrapperWidth;optionsButtonWrapper.style.top                  = optionsMenuWrapperTop;optionsButtonWrapper.style.position             = optionsMenuWrapperPosition;optionsButtonWrapper.style.border               = optionsMenuWrapperBorder;optionsButtonWrapper.style.margin               = optionsMenuWrapperMargin;optionsButtonWrapper.style.padding              = optionsMenuWrapperPadding;simpleDashboardWrapper.appendChild(optionsButtonWrapper);//Option Button 1optionButtonOne = document.createElement(div);optionButtonOne.setAttribute(id, optionsButtonID);optionButtonOne.style.width                     = optionsButtonWidth;optionButtonOne.style.height                    = optionsButtonHeight;optionButtonOne.style.float                     = optionsButtonFloat;optionButtonOne.style.border                    = optionsButtonBorder;optionButtonOne.style.background                = optionButtonOneBG;optionButtonOne.style.borderRadius              = optionsButtonCorner;optionButtonOne.style.margin                    = optionsButtonMargin;optionButtonOne.style.padding                   = optionsButtonPadding;optionsButtonWrapper.appendChild(optionButtonOne);//Option Button 2optionButtonTwo = document.createElement(div);optionButtonTwo.setAttribute(id, optionsButtonID);optionButtonTwo.style.width                     = optionsButtonWidth;optionButtonTwo.style.height                    = optionsButtonHeight;optionButtonTwo.style.float                     = optionsButtonFloat;optionButtonTwo.style.border                    = optionsButtonBorder;optionButtonTwo.style.background                = optionButtonTwoBG;optionButtonTwo.style.borderRadius              = optionsButtonCorner;optionButtonTwo.style.margin                    = optionsButtonMargin;optionButtonTwo.style.padding                   = optionsButtonPadding;optionsButtonWrapper.appendChild(optionButtonTwo);//Option Button 3optionButtonThree = document.createElement(div);optionButtonThree.setAttribute(id, optionsButtonID);optionButtonThree.style.width                   = optionsButtonWidth;optionButtonThree.style.height                  = optionsButtonHeight;optionButtonThree.style.float                   = optionsButtonFloat;optionButtonThree.style.border                  = optionsButtonBorder;optionButtonThree.style.background              = optionButtonThreeBG;optionButtonThree.style.borderRadius            = optionsButtonCorner;optionButtonThree.style.margin                  = optionsButtonMargin;optionButtonThree.style.padding                 = optionsButtonPadding;optionsButtonWrapper.appendChild(optionButtonThree);//Option Button 4optionButtonFour = document.createElement(div);optionButtonFour.setAttribute(id, optionsButtonID);optionButtonFour.style.width                    = optionsButtonWidth;optionButtonFour.style.height                   = optionsButtonHeight;optionButtonFour.style.float                    = optionsButtonFloat;optionButtonFour.style.border                   = optionsButtonBorder;optionButtonFour.style.background               = optionButtonFourBG;optionButtonFour.style.borderRadius             = optionsButtonCorner;optionButtonFour.style.margin                   = optionsButtonMargin;optionButtonFour.style.padding                  = optionsButtonPadding;optionsButtonWrapper.appendChild(optionButtonFour);}
Buttons and Random Colours
javascript