BG Color Changer in Javascript || 2024
The given HTML document is designed to change the background color of a webpage when a user clicks on different color options. The HTML structure includes a container with a heading, a paragraph prompting the user to select a background color, and an unordered list with four list items, each representing a color (orange, green, blue, and pink). Each list item has a unique ID corresponding to a color. The JavaScript code handles the functionality of changing the background color. It assigns event listeners to each list item using their IDs. When a list item is clicked, its respective function (changeToOrange, changeToGreen, changeToBlue, or changeToPink) is called, changing the background color of the body element to the chosen color. Each function changes the background color and also sets the text color to white for better readability against the new background color. For example, when the list item with the ID "orange" is clicked, the changeToOrange function sets the body's background color to orange and the text color to white. This interaction is similar for the other colors. This script enhances user experience by allowing easy and interactive customization of the webpage's appearance.