Day 8: Buttons Container

Problem Link

HackerRank Problem Link

Solution

HTML + CSS + JS Solution

btnContainer.css

#btns {
  width: 75%;
}

button {
  width: 30%;
  height: 48px;
  font-size: 24px;
}

btnContainer.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];
  }
};

btnContainer.js

<!-- Enter your HTML code here -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/buttonsGrid.css" type="text/css">
    </head>
    <body>
        <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>
        <script src="js/buttonsGrid.js" type="text/javascript"></script>
    </body>
</html>

PreviousDay 8: Create a Button NextDay 9: Binary Calculator

Last updated 4 years ago

Was this helpful?