The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of objects, where each object corresponds to a part of the document, such as elements, attributes, and text. The DOM is used by browsers to render web pages and allows scripts to dynamically update the content, structure, and style of a document.
Write a code in JavaScript for any one of the following:
1) To change the background color of the web page automatically after every 5 seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Color Change</title>
<script>
function changeBackgroundColor() {
const colors = ['red', 'blue', 'green'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.body.style.backgroundColor = randomColor;
}
setInterval(changeBackgroundColor, 5000);
</script>
</head>
<body>
<h1>Automatic Background Color Change</h1>
</body>
</html>
2) To display three radio buttons on the web page, namely, "Red", "Blue" and "Green". Selecting any button changes the background color as per the name of the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Background Color</title>
</head>
<body>
<form>
<label>
<input type="radio" name="color" value="red" onclick="changeBackgroundColor(this.value)">
Red
</label>
<label>
<input type="radio" name="color" value="blue" onclick="changeBackgroundColor(this.value)">
Blue
</label>
<label>
<input type="radio" name="color" value="green" onclick="changeBackgroundColor(this.value)">
Green
</label>
</form>
<script>
function changeBackgroundColor(color) {
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>
