Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 1 down vote favorite 
var EVENT_TYPE      = "touchstart" // Global Event Type

var H               = 360,
S                   = 1.0,
V                   = 1.0

var 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   = 15
var 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 Button
var 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 Wrapper
var 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 Colors
var staticColorID                       = "staticColor",
    staticColorWidth                    = 55,
    staticColorHeight                   = 55,
    staticColorCorner                   = 15,
    staticColorBorder                   = "5px solid #712f04",
    staticColorMargin                   = "5px 0px 0px 6px",
    staticColorFloat                    = "left"

//Options Menu Wrapper
var optionsMenuWrapperID                = "optionsMenuWrapper",
    optionsMenuWrapperWidth             = 580,
    optionsMenuWrapperTop               = 383,
    optionsMenuWrapperPosition          = "absolute",
    optionsMenuWrapperBorder            = "0px solid black",
    optionsMenuWrapperMargin            = "0px 0px 0px 14px",
    optionsMenuWrapperPadding           = "0px 0px 0px 0px"

//Options Buttons Properties
var 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 Backgounds
var 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 #ffedcc"

var 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 WRAPPER

var 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 WRAPPER
optionsButtonWrapper = 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 1
optionButtonOne = 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 2
optionButtonTwo = 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 3
optionButtonThree = 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 4
optionButtonFour = 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);
}
share|improve this question
1  
Care to tell us what the code does? And, perhaps focus your question on one particular piece of code rather than several pages of code? – jfriend00 Oct 5 '12 at 4:27
up vote 2 down vote

You are using a variable named i, but I don't see it being declared(var i). This might cause problems. Same with your RANDOM/STATIC color constants:

var INIT_RANDOM_COLORS  = 0,
MAX_RANDOM_COLORS   = 15,
INIT_STATIC_COLORS  = 0,
MAX_STATIC_COLORS   = 15;

You seem to have a lot of duplicated code (particularly when you set the style). Don't Repeat Yourself. Instead, have those common commands go in a function.

Alternatively, in optionButtonN, you might have more readable code by instead using optionButtons[N] and setting the styles in a for loop.

var optionButtonBackgrounds = [optionButtonOneBG, optionButtonTwoBG,
          optionButtonThreeBG, optionButtonFourBG];

var optionButtons = [];

for (var buttonNumber = 0; buttonNumber < 4; ++buttonNumber) {
    var optionButton = document.createElement("div");
    optionButton.setAttribute("id", optionsButtonID);
    optionButton.style.width                     = optionsButtonWidth;
    optionButton.style.height                    = optionsButtonHeight;
    optionButton.style.float                     = optionsButtonFloat;
    optionButton.style.border                    = optionsButtonBorder;
    optionButton.style.background                = optionButtonBackgrounds[buttonNumber];
    optionButton.style.borderRadius              = optionsButtonCorner;
    optionButton.style.margin                    = optionsButtonMargin;
    optionButton.style.padding                   = optionsButtonPadding;
    optionsButtonWrapper.appendChild(optionButton);

    optionButtons.push(optionButton);
}

optionButtonOne = optionButtons[0];
optionButtonTwo = optionButtons[1];
optionButtonThree = optionButtons[2];
optionButtonFour = optionButtons[3];

If you change portions of the rest of the code, the first and the last four lines in the code above may be removed, but I just wanted you to get the idea.

Perhaps more importantly, most of your style attributes seem to be constant. Instead of having so many styles be assigned manually, you should just have optionButtons (and other elements) have a class, and then assign your styles in CSS instead of JavaScript.

Also, the array syntax [r = 255, g = 56, b = 30] seems odd and is probably not what you wanted. Perhaps you meant {"r" : 255, "g" : 56, "b" : 30 } or just [255, 56, 30].

If you use CSS properly and for loops, I suspect your code will be reduced to less than a third.

Also, I put your code in Google Closure Compiler and it reported a few errors:

IE8 (and below) will parse trailing commas in array and object literals incorrectly.

Apparently, the code [..., [r = 112, g = 25, b = 3],] (with the , right before the ]) causes problems in some browsers. You can simply remove that last comma.

swtich should be switch and switch(...)[] does not exist in JavaScript. Did you mean switch(...) { instead? What were those [] supposed to mean?

case default: isn't valid JavaScript. Just have default:.

share|improve this answer
Yes, the switch case is suppose to have a opening curly brace have no idea what the brackets are. You suggested {"r" : 255, "g" : 56, "b" : 30 } instead of my old array syntax, what is the difference if you don't mind me asking? Thanks for your feedback! – bersekro88 Oct 5 '12 at 15:17
in var x = {"r" : 2};, x.r has the value 2. In var x = [r=2];, x[0] has the value 2, and the variable r is also assigned the same value. In other words, var x = [r=2]; is equivalent to r = 2; var x = [2];. – luiscubal Oct 5 '12 at 15:20
Thanks for the clarification. – bersekro88 Oct 5 '12 at 16:12

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.