Context Laying out nine(9) buttons to form a 3 x 3 grid inside a div and modifying their labels after each click event on one of the buttons.
The labels on the outer button must rotate in a clockwise direction each
time we click the middle button
Design the UI to show a 3 x 3 grid form containing buttons labelled 1 - 9.
Write an algorithm to rotate the outer buttons in a clockwise direction every time
the middle button (button 5) is clicked and in an anti-clockwise direction is any
other button is clicked.
my solution can only move clockwise when the button 5 is click but i can’t initiate the call for the anticlockwise rotation. kindly help out, find my code below;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button Grid</title>
<style>
#btns {
width: 75%;
}
.btn {
width: 30%;
height: 48px;
font-size: 24px;
}
</style>
</head>
<body>
<h1>
Button Grid
</h1>
<div id="btns">
<button id="btn1" class="btn">1</button>
<button id="btn2" class="btn">2</button>
<button id="btn3" class="btn">3</button>
<button id="btn4" class="btn">4</button>
<button id="btn5" class="btn">5</button>
<button id="btn6" class="btn">6</button>
<button id="btn7" class="btn">7</button>
<button id="btn8" class="btn">8</button>
<button id="btn9" class="btn">9</button>
</div>
<script>
let nums=[1,2,3,6,9,8,7,4];
const ids=[1,2,3,6,9,8,7,4];
let btn5=document.getElementById("btn5");
btn5.onclick=function(){
nums.unshift(nums.pop());
for (i=0; i<=7; i++) {
document.getElementById("btn"+ids[i]).innerHTML=nums[i];
}
}
</script>
</body>
</html>