Skip to content
Permalink
827e1b1aa1
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

2024-spring-dmd-3475/week-09/backgroundchange/index.html

Go to file
 
 
Cannot retrieve contributors at this time
37 lines (31 sloc) 1.14 KB
Raw Blame
<!doctype html>
<html class="no-js" lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Changer Website</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="Color picker choice changes the color of the website background.">
</head>
<body>
<label for="color-picker">Background Color:</label><br><br>
<input type="color" value="#0000ff" id="color-picker" />
<script>
let colorPicker;
const defaultColor = "#0000ff";
window.addEventListener("load", startup, false);
function startup() {
colorPicker = document.querySelector("#color-picker");
colorPicker.value = defaultColor;
colorPicker.addEventListener("input", updateAll, false);
colorPicker.addEventListener("change", updateAll, false);
colorPicker.select();
}
function updateAll(event) {
document.querySelectorAll("body").forEach((background) => {
background.style.backgroundColor = event.target.value;
});
}
</script>
</body>
</html>