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
Objective
In this challenge, we lay out buttons inside aย divย and modify their labels after each click event on one of the buttons.
Task
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>
<html>
<head>
<link rel="stylesheet" href="css/buttonsGrid.css" type="text/css">
</head>
<body>
<script src="js/buttonsGrid.js" type="text/javascript"></script>
</body>
</html>
Explanation
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
index.html
<body> ย ย ย ย <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> </body>
buttonGrid.js
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];
ย ย ย ย }
}
buttonGrid.css
.btnContainerย {
ย ย ย ย width:ย 75%;
}
.btnContainerย >ย .btnStyleย {
ย ย ย ย width:ย 30%;
ย ย ย ย height:ย 48px;
ย ย ย ย font-size:ย 24px;
}