Hello Programmers/Coders, Today we are going to share solutions of Programming problems of HackerRank, 10 Days Of JavaScript. At Each Problem with Successful submission with all Test Cases Passed, you will get an score or marks. And after solving maximum problems, you will be getting stars. This will highlight your profile to the recruiters.
In this post, you will find the solution for Day 8: Buttons Container in JavaScript-HackerRank Problem. We are providing the correct and tested solutions of coding problems present on HackerRank. If you are not able to solve any problem, then you can take help from our Blog/website.
Use “Ctrl+F” To Find Any Questions Answer. & For Mobile User, You Just Need To Click On Three dots In Your Browser & You Will Get A “Find” Option There. Use These Option to Get Any Random Questions Answer.
Introduction To JavaScript
JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. JavaScript contains a standard library of objects, like Array, Date, and Math, and a core set of language elements like operators, control structures, and statements.
Advantages of JavaScript
The merits of using JavaScript are −
- Less server interaction − You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
- Immediate feedback to the visitors − They don’t have to wait for a page reload to see if they have forgotten to enter something.
- Increased interactivity − You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.
- Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.
Link for the Problem – Day 8: Buttons Container – Hacker Rank Solution
Day 8: Buttons Container – Hacker Rank Solution
Problem:
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 grid. Each button has a distinct label from to , 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:
innerHTML
id
1
btn1
2
btn2
3
btn3
4
btn4
5
btn5
6
btn6
7
btn7
8
btn8
9
btn9
- 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:
![Day 8: Buttons Container in JavaScript | 10 Days Of JavaScript Solutions | HackerRank Programming Solutions [💯Correct] 3 initial](https://s3.amazonaws.com/hr-challenge-images/0/1456632368-64062011d3-ScreenShot2016-02-28at9.22.14AM.png)
After clicking btn5
time, they look like this:
After clicking btn5
more time (for a total of clicks), they look like this:
Day 8: Buttons Container – Hacker Rank Solution
<!-- HTML --> <div id="btns"> <button id="btn1">1</button> <button id="btn2">2</button> <button id="btn3">3</button> <button id="btn4">4</button> <button id="btn5">5</button> <button id="btn6">6</button> <button id="btn7">7</button> <button id="btn8">8</button> <button id="btn9">9</button> </div>
/* CSS */ #btns { width: 75%; } button { width: 30%; height: 48px; font-size: 24px; }
// JS const ids = [1, 2, 3, 6, 9, 8, 7, 4]; // start positions ids in clockwise order let nums = [1, 2, 3, 6, 9, 8, 7, 4]; // rotating in clockwise order let btn5 = document.getElementById("btn5"); btn5.onclick = function() { nums.unshift(nums.pop()); for (i = 0; i <= 7; i++) { document.getElementById("btn" + ids[i]).innerHTML = nums[i]; } };
In order to do this, operators will certainly require you to send a
duplicate of your government-issued ID as component of the KYC
verification procedure.
Take a look at my web page: top online casino nj