Hello coders, today we are going to solve Day 8: Buttons Container HackerRank Solution which is a part of 10 Days of JavaScript Series.
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 bebtns
. - The initial
innerHTML
labels must have the following buttonid
s:Styling. The document’s elements must have the following styles:
- The button container div‘s
- Styling. The document’s elements must have the following styles:
- The
width
ofbtns
is , relative to the document body’s width. - Each button (i.e.,
btn1
throughbtn9
) satisfies the following:- The
width
is , relative to its container width. - The
height
is48px
. - The
font-size
is24px
.
- The
- The
- Behavior. Each time
btn5
is clicked, theinnerHTML
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 buttonid
‘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: Buttons Container
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.css
.btnContainer { width: 75%; } .btnContainer > .btnStyle { width: 30%; height: 48px; font-size: 24px; }
buttonsGrid.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]; } }
Disclaimer: The above Problem (Buttons Container) is generated by Hacker Rank but the Solution is Provided by CodingBroz. This tutorial is only for Educational and Learning Purpose.