Skip to content
Programmingoneonone
Programmingoneonone
  • Home
  • CS Subjects
    • IoT ? Internet of Things
    • Digital Communication
    • Human Values
  • Programming Tutorials
    • C Programming
    • Data structures and Algorithms
    • 100+ Java Programs
    • 100+ C Programs
  • HackerRank Solutions
    • HackerRank Algorithms Solutions
    • HackerRank C problems solutions
    • HackerRank C++ problems solutions
    • HackerRank Java problems solutions
    • HackerRank Python problems solutions
Programmingoneonone

HackerRank Day 8: Buttons Container 10 Days of javascript solution

YASH PAL, 31 July 2024

In this HackerRank Day 8: Buttons Container 10 Days of javascript problem 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.

HackerRank Day 8: Buttons Container 10 Days of javascript solution

HackerRank Day 8: Buttons Container 10 Days of javascript problem solution.

HTML File

<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>

CSS File

.btnContainer {

    width: 75%;

}

.btnContainer > .btnStyle {

    width: 30%;

    height: 48px;

    font-size: 24px;

}

JavaScript File

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];

    }

}

10 day of javascript coding problems solutions

Post navigation

Previous post
Next post

Pages

  • About US
  • Contact US
  • Privacy Policy

Programing Practice

  • C Programs
  • java Programs

HackerRank Solutions

  • C
  • C++
  • Java
  • Python
  • Algorithm

Other

  • Leetcode Solutions
  • Interview Preparation

Programming Tutorials

  • DSA
  • C

CS Subjects

  • Digital Communication
  • Human Values
  • Internet Of Things
  • YouTube
  • LinkedIn
  • Facebook
  • Pinterest
  • Instagram
©2025 Programmingoneonone | WordPress Theme by SuperbThemes