Some fun JS


Just a fun exercise seeing if I can make the background colour of an HTML5 advertisement dynamic, but not necessarily require a hexadecimal code be used:

// get the values from the manifest or interface
var backgroundColour = myFT.instantAds.backgroundColour.toLowerCase();
var borderColour = myFT.instantAds.borderColour.toLowerCase();

// resize container to allow for a border
container.style.borderStyle = "solid";
container.style.borderWidth = "1px";
container.style.width = "158px";
container.style.height = "598px";

// set background colour
if (backgroundColour == "teal") {
    container.style.backgroundColor = "#00a2ac";
    container.style.borderColor = "#00a2ac";
}
else if (backgroundColour == "purple") {
    container.style.backgroundColor = "#79116a";
    container.style.borderColor = "#79116a";
}
else if (backgroundColour == "yellow") {
    container.style.backgroundColor = "#ffd200";
    container.style.borderColor = "#ffd200";
}
else if (backgroundColour == "white") {
    container.style.backgroundColor = "#fff";
    container.style.borderColor = "#000";
    container.parentNode.style.color = "#000";
}
else if (backgroundColour.indexOf('#') > -1) {
    container.style.backgroundColor = backgroundColour;
    container.style.borderColor = backgroundColour;
}
else {
    container.style.backgroundColor = "#00a2ac";
    container.style.borderColor = "#00a2ac";
}

// set border colour
if (borderColour == "teal") {
    container.style.borderColor = "#00a2ac";
}
else if (borderColour == "purple") {
    container.style.borderColor = "#79116a";
}
else if (borderColour == "yellow") {
    container.style.borderColor = "#ffd200";
}
else if (borderColour.indexOf('#') > -1) {
    container.style.borderColor = borderColour;
}
else if (backgroundColour != "white") {
    container.style.borderColor = container.style.backgroundColor;
}

Of course, changing the background means that every other image now needs to be dynamic because otherwise the background colour of those images will be wrong or blend. A roundel the same colour as the background? Well done, people will totally notice that.

Too bad FT components are proprietary and this probably wouldn’t be useful in real life without those specific HTML5 API or the JS Libraries. My jobs don’t usually have much IRL usage. I’m sure there are also a million better ways of doing this, but eh.

Come to think of it now, I could have added an additional variable to turn the border on/off, then I wouldn’t have to worry about necessarily setting the border the same colour as the background. The current solution works, but oh well, maybe a fun activity sometime in the future when I’m bored.