title: JavaScript- Implementing a Grid rotating algorithm
body: <p><strong>The goal is to achieve the following</strong> :</p>
  
  <p><strong>Context</strong>: 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. </p>
  
  <p><strong>Important</strong>: The labels on the outer button must rotate in a clockwise direction each time we click the middle button   </p>
  
  <p>Initial State: </p>
  
  <pre><code>1  2  3
  4  5  6
  7  8  9
  </code></pre>
  
  <p>After Clicking the middle button (button 5) 1 time: </p>
  
  <pre><code>4  1  2
  7  5  3
  8  9  6
  </code></pre>
  
  <p>After Clicking the middle button (button 5) 2 times:   </p>
  
  <pre><code>7  4  1
  8  5  2
  9  6  3
  </code></pre>
  
  <p><strong>Task</strong>: Write an algorithm to rotate the outer buttons in a clockwise direction every time the middle button (button 5) is clicked. </p>
  
  <p>The shuffle_grid function has been bound to the number "5". 
  Below is the HTML:</p>
  
  <pre><code>&lt;div id="keypad"&gt;
  &lt;input type='button' value='1' id='keys'&gt;
        &lt;input type='button' value='2' id='keys'&gt;
        &lt;input type='button' value='3' id='keys'&gt;
        &lt;br&gt;
        &lt;input type='button' value='4' id='keys'&gt;
        &lt;input type='button' value='5' id='keys' onclick= shuffle_grid()&gt;
        &lt;input type='button' value='6' id='keys'&gt;
        &lt;br&gt;
        &lt;input type='button' value='7' id='keys'&gt;
        &lt;input type='button' value='8' id='keys'&gt;
        &lt;input type='button' value='9' id='keys'&gt;
        &lt;/div&gt;  
  </code></pre>
  
  <p>Below is the challenging part, the JavaScript:    </p>
  
  <pre><code>function shuffle_grid() { 
  }
  </code></pre>
  
  <p>what should I put into this function to fulfill this task?</p>