Суть:
У index.html файле есть две кнопки: #left и #right.
При нажатии на кнопку #left элемент .box должен поворачиваться на 30 градусов против часовой стрелке.
При нажатии на кнопку #right элемент .box должен поворачиваться на 30 градусов по часовой стрелке.
Стили трансформации добавляй с помощью атрибута style.
Изначально атрибута style быть не должно.
Скрипты используй внутренние.
Без добавление атрибута ID, задача не проходит проверку?
Вопрос:
1) зачем нужно добавлять атрибут ID, если и без этого суть задачи выполняется?
2) как можна достать значение из transform:rotate(), чтобы не использовать переменную degree?
код:
<!DOCTYPE html>
<html>
<head>
<title>Rotate</title>
<style>
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
background-color: #9CFC97;
position: relative;
}
button {
margin: 20px;
}
</style>
</head>
<body>
<button class="rotate-left">-30 deg</button>
<div class="box"></div>
<button class="rotate-right">+30 deg</button>
<script>
const body=document.querySelector('body');
const buttonLeft=document.querySelector('.rotate-left');
buttonLeft.setAttribute('id','left');
const buttonRight=document.querySelector('.rotate-right');
buttonRight.setAttribute('id','right');
const box=document.querySelector('.box')
box.setAttribute('style', 'transform');
let degree=0;
box.style.transform=`rotate(${degree}deg)`;
const rotationSeter=(e)=>{
const element=e.target;
const styles=getComputedStyle(box);
if (element==buttonLeft){
degree-=30;
box.style.transform=`rotate(${degree}deg)`;
}
if (element==buttonRight){
degree+=30;
box.style.transform=`rotate(${degree}deg)`;
}
}
body.addEventListener('click', (e)=>{
rotationSeter(e)
});
</script>
</body>
</html>
Спасибо за внимание!