The “Interactive Background Color Changer” code provides a user-friendly interface to dynamically change the background color of a web page. It includes buttons to select predefined colors such as red, green, blue, white, black, and grey. Additionally, it features buttons to incrementally adjust the RGB (Red, Green, Blue) values of the background color which allow users to create custom colors.
The interface provides a visual representation of the selected color. This makes it easy for users to experiment and find the desired background color for their web page. The code is written in HTML and JavaScript, adhering to modern standards for improved compatibility and maintainability.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Color Changer</title>
<script>
function changeBackground(hexNumber) {
document.body.style.backgroundColor = hexNumber;
}
let prefix = "#";
let rnum1 = 0;
let bnum1 = 0;
let gnum1 = 0;
let rnum2 = 0;
let bnum2 = 0;
let gnum2 = 0;
let hexNumber2 = "#000000";
let rcount = 0;
let bcount = 0;
let gcount = 0;
function num2hex(num) {
return num.toString(16).padStart(2, '0');
}
function changeBackground2(number) {
if (number === 1) {
rnum1 = rcount % 16;
if (rcount < 15) {
rcount = rcount + 1;
}
}
if (number === 2) {
gnum1 = gcount % 16;
if (gcount < 15) {
gcount = gcount + 1;
}
}
if (number === 3) {
bnum1 = bcount % 16;
if (bcount < 15) {
bcount = bcount + 1;
}
}
if (number === 4) {
rnum1 = rcount % 16;
if (rcount > 0) {
rcount = rcount - 1;
}
}
if (number === 5) {
gnum1 = gcount % 16;
if (gcount > 0) {
gcount = gcount - 1;
}
}
if (number === 6) {
bnum1 = bcount % 16;
if (bcount > 0) {
bcount = bcount - 1;
}
}
hexNumber2 = prefix + num2hex(rnum1) + num2hex(rnum2) + num2hex(gnum1) + num2hex(gnum2) + num2hex(bnum1) + num2hex(bnum2);
document.bgColor=hexNumber2;
}
</script>
</head>
<body>
<center>
<form name="background">
<table width="350" border="3" cellpadding="3">
<tr>
<td align="center"><input type="button" value="Red" >