78 lines
2.6 KiB
HTML
78 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Farbenlehre</title>
|
|
<style>
|
|
table {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
table, th, td {
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<label for="rot">Rot: </label>
|
|
<input id="rot" name="rot" type="number">
|
|
</br>
|
|
<label for="gruen">Grün: </label>
|
|
<input id="gruen" name="gruen" type="number">
|
|
</br>
|
|
<label for="blau">Blau: </label>
|
|
<input id="blau" name="blue" type="number">
|
|
</br>
|
|
<button id="calcbutton">Berechnen</button>
|
|
</br>
|
|
|
|
<table id="farben">
|
|
<tr>
|
|
<td><b>Rot</b></td>
|
|
<td><b>Grün</b></td>
|
|
<td><b>Blau</b></td>
|
|
<td><b>Farbwert</b></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<script>
|
|
let btn = document.getElementById("calcbutton");
|
|
let rot = document.getElementById("rot");
|
|
let gruen = document.getElementById("gruen");
|
|
let blau = document.getElementById("blau");
|
|
|
|
btn.addEventListener("click", updateTable);
|
|
|
|
function toHex(farbstring) {
|
|
let tempint = parseInt(farbstring);
|
|
let temphex = tempint.toString(16);
|
|
if (tempint < 16) {
|
|
//hex Zahl hat nur eine Stelle
|
|
temphex = "0" + temphex;
|
|
}
|
|
return temphex.toUpperCase();
|
|
}
|
|
|
|
function updateTable() {
|
|
let table = document.getElementById("farben");
|
|
let row = table.insertRow(1);
|
|
let cell1 = row.insertCell(0);
|
|
let cell2 = row.insertCell(1);
|
|
let cell3 = row.insertCell(2);
|
|
let cell4 = row.insertCell(3);
|
|
|
|
let r = rot.value;
|
|
let g = gruen.value;
|
|
let b = blau.value;
|
|
|
|
cell1.innerHTML = toHex(r);
|
|
cell2.innerHTML = toHex(g);
|
|
cell3.innerHTML = toHex(b);
|
|
let farbcode = "#" + toHex(r) + toHex(g) + toHex(b);
|
|
cell4.innerHTML = farbcode;
|
|
cell4.style.backgroundColor = farbcode;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|