Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
54 lines (44 sloc) 1.05 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Events: Task 3</title>
<style>
p {
color: purple;
margin: 0.5em 0;
}
* {
box-sizing: border-box;
}
button {
display: block;
margin: 20px 0 20px 20px;
}
.button-bar {
padding: 20px 0;
}
</style>
<link rel="stylesheet" href="../styles.css" />
</head>
<body>
<section class="preview">
</section>
<div class="button-bar">
<button data-color="red">Red</button>
<button data-color="yellow">Yellow</button>
<button data-color="green">Green</button>
<button data-color="purple">Purple</button>
</div>
</body>
<script>
let buttonBar = document.querySelector('.button-bar');
let section = document.querySelector('section');
// Add your code here
buttonBar.addEventListener('click', changeColor)
function changeColor(e) {
let color = e.target.dataset.color
buttonBar.style.background = color
}
</script>
</html>
You can’t perform that action at this time.