Day 8: Buttons Container | 10 Days of JavaScript – Hacker Rank Solution

Day 8: Buttons Container | 10 Days of JavaScript – Hacker Rank Solution: Hey Guy’s In this post we are solving Day 8: Buttons Container which is a part of 10 Days of JavaScript Series.

Day 8: Buttons Container | 10 Days of JavaScript – Hacker Rank 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. Check out the attached tutorial for learning materials.

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:
innerHTMLid
1btn1
2btn2
3btn3
4btn4
5btn5
6btn6
7btn7
8btn8
9btn9
  • Styling. The document’s elements must have the following styles:
    • The width of btns is 75%, relative to the document body’s width.
    • Each button (i.e., btn1 through btn9) satisfies the following:
      • The width is 30%, 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., bt1btn2btn3btn4btn6btn7btn8btn9) must rotate in the clockwise direction. Do not update the button id‘s.

Day 8: Buttons Container | 10 Days of JavaScript – Hacker Rank Solution

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 (Day 8: Buttons Container) is generated by Hackerrank but the Solution is Provided by Chase2Learn. This tutorial is only for Educational and Learning purposes. Authority if any of the queries regarding this post or website fill the following contact form thank you.

Leave a Comment