<!DOCTYPE html>
<html>
<head>
<title>Colored header</title>
<style>
* {
font-family: monospace;
text-align: center;
}
.container {
display: grid;
gap: 8px;
grid-template-columns: repeat(5, 100px);
justify-content: center;
}
.color-button {
text-align: center;
font-size: 18px;
padding: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Change my color</h2>
<div class="container">
<div class="color-button" style="background-color: #c4d6b0">#C4D6B0</div>
<div class="color-button" style="background-color: #477998; color: white">
#477998
</div>
<div class="color-button" style="background-color: #291f1e; color: white">
#291F1E
</div>
<div class="color-button" style="background-color: #f64740; color: white">
#F64740
</div>
<div class="color-button" style="background-color: #a3333d; color: white">
#A3333D
</div>
</div>
<script>
let h2text = document.querySelector(`h2`);
document
.querySelector(`.container`)
.addEventListener("click", (event) => {
h2text.style.color = event.target.innerText;
});
</script>
</body>
</html>
код работает задача не принята, как сделать чтобы задачу приняла автопроверка ?