Тебе дали доступ в управлению светофорами в городе.
Задача, которую тебе нужно решить, это ручное управление ими.
Для включения красного света - у элемента traffic-light
должен быть второй класс stop
.
Для включения зеленого света - у элемента traffic-light
должен быть второй класс go
.
Первая кнопка toggler
(с id
toggle-first
) должна переключить режим первого светофора (.traffic-light
).
Вторая кнопка toggler
(с id
toggle-second
) должна переключить режим второго светофора (.traffic-light
).
Третья кнопка (toggle-both-go
) должна включать зеленый свет на обоих светофорах.
Четвертая кнопка (toggle-both-stop
) должна включать красный свет на обоих светофорах.
Используй внутренний скрипт, не изменяй начальное состояние классов.
Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим
index.html
<!DOCTYPE html>
<html>
<head>
<title>Traffic light</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 250px);
place-items: center;
}
.traffic-light {
width: 200px;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-color: #464655;
}
.light {
border-radius: 50%;
width: 180px;
height: 180px;
}
.togglers {
height: 400px;
width: 200px;
display: flex;
flex-direction: column;
}
.toggler {
margin-bottom: 8px;
}
.red-light {
background-color: #794442;
}
.green-light {
background-color: #82926b;
}
.traffic-light.stop .red-light{
background-color: #DB3A34;
}
.traffic-light.go .green-light{
background-color: #ADE25D;
}
</style>
</head>
<body>
<div class="container">
<div class="traffic-light stop">
<div class="light red-light"></div>
<div class="light green-light"></div>
</div>
<div class="traffic-light go">
<div class="light red-light"></div>
<div class="light green-light"></div>
</div>
<div class="togglers">
<button class="toggler" id="toggle-first">Toggle first</button>
<button class="toggler" id="toggle-second">Toggle second</button>
<button class="toggler" id="toggle-both-go">Toggle both on go</button>
<button class="toggler" id="toggle-both-stop">Toggle both on go</button>
</div>
</div>
</body>
</html>