Не могу понять почему не проходят проверки, хотя все работает точно так как в них указано.
Точнее не понимаю почему классы не добавляются в просматриваемом коде, а сани все равно открываются 🙂
Задание:
Какой вид!!!
Давай напишем скрипт и трансформации, которые будут открывать окно.
При нажатии на кнопку элементам с классом .blind нужно добавить класс .opened.
При добавлении класса .opened, ставни (.blind) должны поворачиваться на 15 градусов и сдвигаться на 100px вдоль оси X.
Учти - направление открытия и сдвига на .left и .right разные.
Также надо ставни немного отдалить от нас - на 15px.
`<!DOCTYPE html>
<html>
<head>
<title>Window</title>
<style>
body {
display: grid;
place-items: center;
height: 100vh;
}
.window {
width: 200px;
height: 200px;
position: relative;
perspective: 200px;
border: 5px solid #312509;
}
.view {
width: 200px;
height: 200px;
background-color: aqua;
background-image: url(images/mountains.jpeg);
background-size: cover;
}
.blind {
position: absolute;
width: 100px;
height: 200px;
top: 0;
background-color: #65532F;
border: 5px solid #312509;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.plank {
width: 75%;
height: 8px;
background-color: #312509;
}
.right {
right: 0;
}
button {
margin-top: 20px;
width: 100%;
border-radius: 5px;
padding: 8px;
border: none;
outline: none;
}
div.blind.left.opened{
transform: rotateY(15deg) translateX(-100px) translateZ(-15px);
}
div.blind.right.opened{
transform: rotateY(-15deg) translateX(100px) translateZ(-15px);
}
</style>
</head>
<body>
<div class="window">
<div class="view"></div>
<div class="blind left">
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
</div>
<div class="blind right">
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
</div>
<button>Open the window</button>
</div>
<script>
const btn = document.querySelector('button');
const leftBlind = document.querySelector('.left');
const rightBlind = document.querySelector('.right');
const openBlinds = ()=>{
leftBlind.classList.add('opened');
rightBlind.classList.add('opened');
};
const closeBlinds = ()=>{
leftBlind.classList.remove('opened');
rightBlind.classList.remove('opened');
}
btn.addEventListener('click',()=>{
(leftBlind.classList.contains('opened')) ? closeBlinds() : openBlinds();
})
</script>
</body>
</html>`