10 Days Of JavaScript
  • 10 Days Of JS
  • INDEX
    • Day 0: Hello, World!
    • Day 0: Data Types
    • Day 1: Arithmetic Operators
    • Day 1: Functions
    • Day 1: Let and Const
    • Day 2: Conditional Statements: If-Else
    • Day 2: Conditional Statements: Switch
    • Day 2: Loops
    • Day 3: Arrays
    • Day 3: Try, Catch, and Finally
    • Day 3: Throw
    • Day 4: Create a Rectangle Object
    • Day 4: Count Objects
    • Day 4: Classes
    • Day 5: Inheritance
    • Day 5: Template Literals
    • Day 5: Arrow Functions
    • Day 6: Bitwise Operators
    • Day 6: JavaScript Dates
    • Day 7: Regular Expressions I
    • Day 7: Regular Expressions II
    • Day 7: Regular Expressions III
    • Day 8: Create a Button
    • Day 8: Buttons Container
    • Day 9: Binary Calculator
Powered by GitBook
On this page
  • Problem Link
  • Solution

Was this helpful?

  1. INDEX

Day 8: Buttons Container

PreviousDay 8: Create a ButtonNextDay 9: Binary Calculator

Last updated 3 years ago

Was this helpful?

Problem Link

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>
HackerRank Problem Link