JavaScript – Interactive Background Color Changer

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" onclick="changeBackground('#FF0000')"></td>
    <td align="center"><input type="button" value="Green" onclick="changeBackground('#00FF00')"></td>
    <td align="center"><input type="button" value="Blue" onclick="changeBackground('#0000FF')"></td>
    <td align="center"><input type="button" value="White" onclick="changeBackground('#FFFFFF')"></td>
    <td align="center"><input type="button" value="Black" onclick="changeBackground('#000000')"></td>
    <td align="center"><input type="button" value="Grey" onclick="changeBackground('#C0C0C0')"></td>
  </tr>
</table>
<table width="350" border="3" cellpadding="3">
  <tr>
    <td><center>Variable Background Color Changer</center></td>
  </tr>
</table>
<table width="350" border="3" cellpadding="3">
  <tr>
    <td align="center">
      <input type="button" value="+ Red" onclick="changeBackground2(1)"><br />
      <input type="button" value="- Red" onclick="changeBackground2(4)">
    </td>
    <td align="center">
      <input type="button" value="+ Green" onclick="changeBackground2(2)"><br />
      <input type="button" value="- Green" onclick="changeBackground2(5)">
    </td>
    <td align="center">
      <input type="button" value="+ Blue" onclick="changeBackground2(3)"><br />
      <input type="button" value="- Blue" onclick="changeBackground2(6)">
    </td>
  </tr>
</table>
<table width="350" border="3" cellpadding="3">
  <tr>
    <td><center>Keep pressing buttons to change color<br />(The color will start as black)</center></td>
  </tr>
</table>
</form>
</center>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

<!DOCTYPE html>

<head>

<title>Background Color Changer</title>

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>

<tr>

</tr>

</table>

<tr>

<td><center>Variable Background Color Changer</center></td>

</tr>

</table>

<tr>

</td>

</td>

</td>

</tr>

</table>

<tr>

<td><center>Keep pressing buttons to change color<br />(The color will start as black)</center></td>

</tr>

</table>

</form>

</center>

</body>

</html>

JavaScript – Interactive Background Color Changer

About The Author

M. Saqib

JavaScript – Interactive Background Color Changer

About The Author

M. Saqib

Related Posts

JavaScript Code to show Browser Information

Airport Calculator

JavaScript Program to Show Current Time In Various Formats

Difference Between [] and {}: Arrays vs. Objects in JavaScript