10 Days Of JavaScript

Day 8: Buttons Container Solution

Hello Friends in this article i am gone to share Hackerrank 10 days of javascript solutions with you. | Day 8: Buttons Container Solution.

Also visit this link:ย  Day 8: Create A Button Solution


Day 8: Buttons Container Solution


In this challenge, we lay out buttons inside aย divย and modify their labels after each click event on one of the buttons.


We want to create nine buttons enclosed in aย div, laid out so they form aย 3 x 3ย grid. Each button has a distinct label fromย 1ย toย 9, and the labels on the outer buttons must rotate in theย clockwiseย direction each time we click the middle button.

Complete the code in the editor so that it satisfies the following criteria:

  • Initial State.ย The initial layout looks like this:
  • Element IDs.ย Each element in the document must have anย id, specified below:
    • The button containerย divโ€˜sย idย must beย btns.
    • The initialย innerHTMLย labels must have the following buttonย ids:Styling.ย The documentโ€™s elements must have the following styles:
  • Styling.ย The documentโ€™s elements must have the following styles:
    • Theย widthย ofย btnsย isย , relative to the document bodyโ€™s width.
    • Each button (i.e.,ย btn1ย throughย btn9) satisfies the following:
      • Theย widthย isย , relative to its container width.
      • Theย heightย isย 48px.
      • Theย font-sizeย isย 24px.
  • Behavior.ย Each timeย btn5ย is clicked, theย innerHTMLย text on the gridโ€™s outer buttons (i.e.,ย bt1,ย btn2,ย btn3,ย btn4,ย btn6,ย btn7,ย btn8,ย btn9) must rotate in theย clockwiseย direction.ย Do notย update the buttonย idโ€˜s.

Theย .jsย andย .cssย files are in different directories, so use theย linkย tag to provide the CSS file path and theย scriptย tag to provide the JS file path:

<!DOCTYPE html>
        <link rel="stylesheet" href="css/buttonsGrid.css" type="text/css">
    	<script src="js/buttonsGrid.js" type="text/javascript"></script>


Initially, the buttons look like this:

1 2 3
4 5 6
7 8 9

After clickingย btn5ย 1ย time, they look like this:

4 1 2
7 5 3
8 9 6

After clickingย btn5ย 1ย more time (for a total ofย 2 clicks), they look like this:

7 4 1
8 5 2
9 6 3


Solution โ€“ Day 8: Create A Button


ย ย ย ย <scriptย src="js/buttonsGrid.js"ย type="text/javascript"></script>
ย ย ย ย <linkย rel="stylesheet"ย href="css/buttonsGrid.css"ย type="text/css">
ย ย ย ย 
ย ย ย ย <divย id="btns"ย class="btnContainer">
ย ย ย ย ย ย ย ย <buttonย id="btn1"ย class="btnStyle">1</button>
ย ย ย ย ย ย ย ย <buttonย id="btn2"ย class="btnStyle">2</button>
ย ย ย ย ย ย ย ย <buttonย id="btn3"ย class="btnStyle">3</button>
ย ย ย ย ย ย ย ย <buttonย id="btn4"ย class="btnStyle">4</button>
ย ย ย ย ย ย ย ย <buttonย id="btn5"ย class="btnStyle"ย onClick="rotate()">5</button>
ย ย ย ย ย ย ย ย <buttonย id="btn6"ย class="btnStyle">6</button>
ย ย ย ย ย ย ย ย <buttonย id="btn7"ย class="btnStyle">7</button>
ย ย ย ย ย ย ย ย <buttonย id="btn8"ย class="btnStyle">8</button>
ย ย ย ย ย ย ย ย <buttonย id="btn9"ย class="btnStyle">9</button>
ย ย ย ย </div>


varย lย =ย "4";
varย aย =ย ["1",ย "2",ย "3",ย "6",ย "9",ย "8",ย "7",ย "4"];
varย bย =ย ["1",ย "2",ย "3",ย "6",ย "9",ย "8",ย "7",ย "4"];

varย rotateย =ย function()ย {
ย ย ย ย forย (varย iย =ย 7;ย iย >ย 0;ย i--)ย {
ย ย ย ย ย ย ย ย a[i]ย =ย a[iย -ย 1];
ย ย ย ย }
ย ย ย ย a[0]ย =ย l;
ย ย ย ย lย =ย a[7];
ย ย ย ย forย (varย iย =ย 0;ย iย <ย 8;ย i++)ย {
ย ย ย ย ย ย ย ย document.getElementById("btn"ย +ย b[i]).innerTextย =ย a[i];
ย ย ย ย }


.btnContainerย {
ย ย ย ย width:ย 75%;

.btnContainerย >ย .btnStyleย {
ย ย ย ย width:ย 30%;
ย ย ย ย height:ย 48px;
ย ย ย ย font-size:ย 24px;



Complete the function in the editor. It has two parameters: a and b. It must return an object modeling a rectangle that has the following properties: Complete the function in the editor. It has two parameters:ย aย andย b. It must return an object modeling a rectangle that has the following properties: