Develop Reference

Issue with backward and forward to change colors in JavaScript

i am having this problem when i try to change colors in my small app. But first, i am trying to make a small app to generate random colors and save them to be able to use a backward and forward button.
I'll put a link to codepen if you want to see it in action and understand it way better.
Link: random colors app
My problem: after generating two colors and i click backward i get the same color (Yes, i know that i'm using a .pop() method to get current color), and i have to click it twice to see the change.
So, my question. Should I use another "logic" to get my colors instead of .pop() and .push() methods?
I'll appreciate all the help!

Here's why you're having this issue! Took me a little to figure it out...
When you generate a new color, you're immediately setting the new color as your current color. And what happens after? You're pushing it to the backwardStack array!
This means that when you turn RED, then GREEN...
Generate RED, set as current color, then immediately push RED to backward stack
Generate GREEN, set as current color, then immediately push GREEN to backward stack
Backward should only be available once at least 1 color has passed, not immediately upon adding a color. Meaning that you should...
// Reverse the order of these actions!
// Action 1
changeColor(hexColor);
currentColor = hexColor;
console.log("Current color: " + currentColor);
// Action 2
if (currentColor) {
backwardStack.push(currentColor);
}
//----------------------
// Action 2
if (currentColor) {
backwardStack.push(currentColor);
}
// Action 1
changeColor(hexColor);
currentColor = hexColor;
console.log("Current color: " + currentColor);
Which basically says:
Before I set a current color, do I have a current color? If yes, push to the backwardStack. If I have no current color, don't push to the backwardStack and still set my current color. That means on the first color generate, the backward button should not become clickable.
This is also the reason why every time you generate a color, the backward button has to then be pushed twice!
Hopefully this helps.

Syncing two colors using jQuery or JavaScript?

If I have two colors, let's say Red (#ff0000) and Dark Red (#850000). Is there a way to make it so that when one color is changed, the other changes accordingly?
So for example if I change Red into Blue, Dark Red automatically changes to Dark Blue and so on..

You could strip the "#" character, split the string into 3, run parseInt on all 3 parts with a radix 16. If you do this on both, you would know the difference between them based on individual RGB components. Then, use an appropriate event handler to detect when color A changes. Compute the difference due to the color A's change (similar to the process I just described), then apply that to color B. Reverse the process by using toString(16) on each of the integer components of the modified color B, then join those 3 components with a "#" at the beginning to recreate the string. Finally, use the appropriate jQuery to modify the CSS property. Don't forget to account for going over 255 or under 0.

CSS background colour validity

I am adding a div dynamically and adding background colors to these divs. The background color values are coming from the backend, so one div for each colour is added and its background colour is set to that colour. But if some colour that is not valid for CSS background color property comes through, it shows as a white background.
For example 'Leopard' colour. Is there any way to validate colous and not add the div if the color is not a valid background colour?

Make a list from the W3 Specifications.
Then check to see if your color is in that list. Here is an example.
colors = ['lime', 'orange', 'pink'];
if (colors.indexOf(the_color) >= 0) {
// Set background
}

I would absolutely avoid using named colours (eg. red, white, etc...) while using instead the standard hex declaration, eg:
#FF0000 = #F00 = red
#000000 = #000 = black
#ffffff = #fff = white
#ac25B1 = some other *unnamed* colour
This way, you could easily check that the string is a valid HEX string, either 6 or 3 character long.

I think you could re-use this question's solution.
It involves a jQuery script that checks if the submitted color really produces RGB values. I'm copy-pasting it.
colorToTest = 'lime'; // 'lightgray' does not work for IE
$('#dummy').css('backgroundColor', 'white');
$('#dummy').css('backgroundColor', colorToTest);
if ($('#dummy').css('backgroundColor') != 'rgb(255, 255, 255)' || colorToTest == 'white') {
alert(colorToTest+' is valid');
}
Here's how it works:
First, the colorToTest variable is set to the color you wish to validate;
Then, the background of the target div (#dummy in this case) is set to white via jQuery;
At last, the background of the target div is set to colorToTest.
If the color is still white, and colorToTest is not White, the backend color is not valid.
However, since an unvalid color won't produce any layout, you could just set the div background to white and then apply the backend color. If it's vaild, it will change. You could however use the above script to validate it, if you wish.

How browser handles CSS color names in the source code

Is there a way to override how javascript converts complex CSS color names to rgb values when applying them to DOM elements.
For example: document.getElementById("colorMe").style.background = "lightblue"
will set the div.style object with a background = rgb(...).
However, document.getElementById("colorMe").style.background = "blue"will set the div.style object with a background = blue.
I would like to bypass how javascript is converting that color into an RGB value for complex color names. Is this possible?

The normalised format for CSS colours is rgb(R,G,B) for opaque colours, and rgba(R,G,B,A) for semi-transparent ones. No matter what you give as input, it is converted to one of these formats as output, and there's nothing you can do to chnge that.
However, you can save the name elsewhere, like this:
elem.setAttribute("data-color",elem.style.color = "lightblue");
Then just get elem.getAttribute("data-color") and you have your lightblue input.

There's a standard called webcolors...
http://en.wikipedia.org/wiki/Web_colors
When your browser reads lightblue it just translates it to 173 216 230.

Html Color Code Pickup in javascript

Actually i want that, suppose i have a colorcode #FF3366. How can i examine that it is lighter or darker?
Actually i want to create a textfield and when the font color of the textfield is changed to lighter color by a javascript then the background color of the textfield becomes darker autometically for showing the value of the text field clearly and vise versa.
Please help me.

This formula is from years ago, in the W3's site, but I can't locate the address.
It sorts rgb colors from darkest to lightest. Works fine with just 2...
function lumenSort(ac, bc){
return ((ac[0]*299 + ac[1]*587 + ac[2]*114)/1000-
(bc[0]*299 + bc[1]*587 + bc[2]*114)/1000);
}
var A= [[0, 0, 0], [255, 255, 255]].sort(lumenSort);
alert(A[0]+' is darker than '+A[1]);

I suspect that you can use the API exposed by COLOURlovers to do what you need. Personally I haven't used the service before nor am I affiliated with it any way but rather was the first result from Google.