I have a to write an html page, where you have a colour circle and by clicking on some of the colours you get the rgb, cmy and hex values. There is also a text that has to change its colour.
I could do it by just writing the values in the document.getElementById("id").innertext but I want to know if there is a better option using only html, css and js.
This is the image that we have to click on in order to get the colour values. (http://www.castelligasse.at/Werbetechnik/Farben/Farbkreis.gif)
function updateData(colour) {
switch (colour) {
case "red":
document.getElementById("text").style.color = "red";
document.getElementById("red").innerText = "255";
document.getElementById("green").innerText = "0";
document.getElementById("blue").innerText = "0";
document.getElementById("rgbhex").innerText = "#ff0000";
break;
case "green":
document.getElementById("text").style.color = "green";
document.getElementById("red").innerText = "0";
document.getElementById("green").innerText = "255";
document.getElementById("blue").innerText = "0";
document.getElementById("rgbhex").innerText = "#00ff00";
break;
case "blue":
document.getElementById("text").style.color = "blue";
document.getElementById("red").innerText = "0";
document.getElementById("green").innerText = "0";
document.getElementById("blue").innerText = "255";
document.getElementById("rgbhex").innerText = "#0000ff";
break;
case "cyan":
document.getElementById("text").style.color = "cyan";
document.getElementById("red").innerText = "0";
document.getElementById("green").innerText = "255";
document.getElementById("blue").innerText = "255";
document.getElementById("rgbhex").innerText = "#00ffff";
break;
case "magenta":
document.getElementById("text").style.color = "magenta";
document.getElementById("red").innerText = "255";
document.getElementById("green").innerText = "0";
document.getElementById("blue").innerText = "255";
document.getElementById("rgbhex").innerText = "#ff00ff";
break;
case "yellow":
document.getElementById("text").style.color = "yellow";
document.getElementById("red").innerText = "255";
document.getElementById("green").innerText = "255";
document.getElementById("blue").innerText = "0";
document.getElementById("rgbhex").innerText = "#ffff00";
break;
default:
alert("Error!");
}
}<p id="text">
This text has to be changed in the selected colour. <br>
</p>
<!--Color-circle image-->
<div id="image">
<img src="http://www.castelligasse.at/Werbetechnik/Farben/Farbkreis.gif" usemap="#colourcircle">
<map name="colourcircle">
<area shape="poly" coords="13,117, 67,131, 66,169, 14,182, 10,148" alt="Red" href="javascript: updateData('red')">
<area shape="poly" coords="253,53, 274,83, 285,108, 234,122, 215,91" alt="Gren" href="javascript: updateData('green')">
<area shape="poly" coords="178,233, 210,214, 248,251, 224,269, 193,283" alt="Blue" href="javascript: updateData('blue')">
<area shape="poly" coords="235,175, 285,189, 273,219, 254,244, 216,208" alt="Cyan" href="javascript: updateData('cyan')">
<area shape="poly" coords="16,190, 68,176, 87,208, 49,246, 31,222, 17,190" alt="Magenta" href="javascript: updateData('magenta')">
<area shape="poly" coords="117,13, 149,8, 182,12, 169,65, 132,66" alt="Yellow" href="javascript: updateData('yellow')">
</map>
</div>
<div id="data">
<table id="rgb">
<th>Ihre gewählte Farbe in RGB</th>
<tr>
<td>ROT:</td>
<td id="red">0</td>
</tr>
<tr>
<td>GRÜN:</td>
<td id="green">0</td>
</tr>
<tr>
<td>BLAU:</td>
<td id="blue">0</td>
</tr>
<tr>
<td id="rgbhex">#000000:</td>
<td> </td>
</tr>
</table>
<table id="cmy">
<th>Ihre gewählte Farbe in CMY</th>
<tr>
<td>Cyan:</td>
<td>0</td>
</tr>
<tr>
<td>Magenta:</td>
<td>0</td>
</tr>
<tr>
<td>Blau:</td>
<td>0</td>
</tr>
<tr>
<td>#000000:</td>
<td> </td>
</tr>
</table>
</div>There may be very good and reasonable refactors to this code. One of them is to separate the data from your code. You can use a JavaScript object to define the relationship between a color and its components (RGB values, hex value etc.).
This way, you can completely eliminate the need of the switch...case statements. Following is a working demo:
// This is the color configuration object which defines the relationship between a color string and its respective RGB combination values with hex
var colorMap = {
red: {
red: 255,
green: 0,
blue: 0,
hex: '#ff0000'
},
green: {
red: 0,
green: 255,
blue: 0,
hex: '#00ff00'
}
// ... And so on
};
function updateData(colour) {
// Search for the config based on colour
var config = colorMap[colour];
if (!config) {
// Show error if config is not found
alert('error');
} else {
// Update the HTML components if config is found
document.getElementById("text").style.color = colour;
document.getElementById("red").innerText = config['red'];
document.getElementById("green").innerText = config['green'];
document.getElementById("blue").innerText = config['blue'];
document.getElementById("rgbhex").innerText = config['hex'];
}
}<p id="text">
This text has to be changed in the selected colour. <br>
</p>
<!--Color-circle image-->
<div id="image">
<img src="http://www.castelligasse.at/Werbetechnik/Farben/Farbkreis.gif" usemap="#colourcircle">
<map name="colourcircle">
<area shape="poly" coords="13,117, 67,131, 66,169, 14,182, 10,148" alt="Red" href="javascript: updateData('red')">
<area shape="poly" coords="253,53, 274,83, 285,108, 234,122, 215,91" alt="Gren" href="javascript: updateData('green')">
<area shape="poly" coords="178,233, 210,214, 248,251, 224,269, 193,283" alt="Blue" href="javascript: updateData('blue')">
<area shape="poly" coords="235,175, 285,189, 273,219, 254,244, 216,208" alt="Cyan" href="javascript: updateData('cyan')">
<area shape="poly" coords="16,190, 68,176, 87,208, 49,246, 31,222, 17,190" alt="Magenta" href="javascript: updateData('magenta')">
<area shape="poly" coords="117,13, 149,8, 182,12, 169,65, 132,66" alt="Yellow" href="javascript: updateData('yellow')">
</map>
</div>
<div id="data">
<table id="rgb">
<th>Ihre gewählte Farbe in RGB</th>
<tr>
<td>ROT:</td>
<td id="red">0</td>
</tr>
<tr>
<td>GRÜN:</td>
<td id="green">0</td>
</tr>
<tr>
<td>BLAU:</td>
<td id="blue">0</td>
</tr>
<tr>
<td id="rgbhex">#000000:</td>
<td> </td>
</tr>
</table>
<table id="cmy">
<th>Ihre gewählte Farbe in CMY</th>
<tr>
<td>Cyan:</td>
<td>0</td>
</tr>
<tr>
<td>Magenta:</td>
<td>0</td>
</tr>
<tr>
<td>Blau:</td>
<td>0</td>
</tr>
<tr>
<td>#000000:</td>
<td> </td>
</tr>
</table>
</div>Just keep adding as much colors you want and those will work as long as the value of colour is valid.