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.
Master modern programming with Beginning C++17 – your gateway to building powerful, efficient, and future-ready applications!
View on Amazon
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <!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> |
