Button Container

Rotate the outer numbers Clockwise when number 5 is clicked

by trentHarlem

HTML

<div id='button-container'>
<button id='btn1' class='rotate row1'>1</button>	
<button id='btn2' class='rotate row1'>2</button>	
<button id='btn3' class='rotate row1'>3</button>	
<button id='btn4' class='rotate row2'>4</button>
<button id='btn5' onclick='updateButtons()'>5</button>
<button id='btn6' class='rotate row2'>6</button>	
<button id='btn7' class='rotate row3'>7</button>	
<button id='btn8' class='rotate row3'>8</button>	
<button id='btn9' class='rotate row3'>9</button>	
</div>

CSS

button {
  width: 30%;
  height: 48px;
  font-size: 24px;
}
/* 
#button-container{
display: -webkit-flex;
  display: flex;
   
 -webkit-flex-flow: row;
  flex-flow: row;
  flex-direction: row;
}
.row {
  flex-flow: wrap;
}
.row2{
-webkit-order: 2;
  order: 2;
}

.row3{
  flex-wrap: wrap-reverse; 
 -webkit-order: 1;
  order: 1;   
} 
*/

JavaScript

const outerButtons = document.querySelectorAll('.rotate')
const buttonArray = Array.from(outerButtons)
//buttonArray.forEach((but,i)=>but.innerHTML=`${numberRows.flat()[i]}`)
  let numberRows = [
    [1, 2, 3], // 0 // 0,1,2
    [4, 6], // 1 // 0,1
    [7, 8, 9] // 2 // 0,1,2
  ]
function updateButtons() {
  const outerButtons = document.querySelectorAll('.rotate')
  const buttonArray = Array.from(outerButtons)

  numberRows = numberRows.map((row, i) => {
    if (i === 0) {
      return [numberRows[1][0], numberRows[0][0], numberRows[0][1]]
    }
    if (i == 1) {
      return [numberRows[2][0], numberRows[0][2]]
    }
    if (i == 2) {
      return [numberRows[2][1], numberRows[2][2], numberRows[1][1]]
    }
  })
console.log(numberRows.flat())
  
  buttonArray.map((but, i) => but.innerHTML = `${numberRows.flat()[i]}`)
}