В документе уже добавлен заголовок и пять элементов кнопок с цветами.
При нажатии на любую из кнопок, цвет текста заголовка h2
должен меняться на указанный на кнопке.
Для изменения цвета добавь свойство color
через атрибут style
.
Больше никаких стилей не изменяй; используй внутренний скрипт.
Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим
index.html
<!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>
</body>
</html>