-
Notifications
You must be signed in to change notification settings - Fork 1
/
ButttonContainerHR.html
119 lines (97 loc) · 3.69 KB
/
ButttonContainerHR.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<! --
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:
layout
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:
innerHTML id
1 btn1
2 btn2
3 btn3
4 btn4
5 btn5
6 btn6
7 btn7
8 btn8
9 btn9
Styling. The document's elements must have the following styles:
The width of btns is , relative to the document body's width.
Each button (i.e., btn1 through btn9) satisfies the following:
The width is , 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., bt1, btn2, btn3, btn4, btn6, btn7, btn8, btn9) must rotate in the clockwise direction. Do not update the button id'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:
initial
After clicking btn5 time, they look like this:click1
After clicking btn5 more time (for a total of clicks), they look like this:click2
Submissions: 16570
Max Score: 25
Difficulty: Easy
Rate This Challenge:
Need Help?
Button Containers in JavaScript
More
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/buttonsGrid.css" type ="text/css">
<title>Buttons Grid</title>
</head>
<body>
<div id="btns" class="buttonContainer">
<button id="btn1" class="buttonClass">1</button>
<button id="btn2" class="buttonClass">2</button>
<button id="btn3" class="buttonClass">3</button>
<button id="btn4" class="buttonClass">4</button>
<button id="btn5" class="buttonClass">5</button>
<button id="btn6" class="buttonClass">6</button>
<button id="btn7" class="buttonClass">7</button>
<button id="btn8" class="buttonClass">8</button>
<button id="btn9" class="buttonClass">9</button>
</div>
<script src="js/buttonsGrid.js" type="text/javascript"></script>
</body>
</html>
button.css====
.buttonContainer {
width: 75%;
}
.buttonContainer > .buttonClass {
width: 30%;
height: 48px;
font-size: 24px;
}
button.js====
var b=document.getElementById('btn5');
var arr=[1,2,3,6,9,8,7,4];
b.onclick=function()
{
arr.unshift(arr.pop());
document.getElementById('btn1').innerHTML =arr[0];
document.getElementById('btn2').innerHTML =arr[1] ;
document.getElementById('btn3').innerHTML =arr[2];
document.getElementById('btn6').innerHTML =arr[3];
document.getElementById('btn9').innerHTML =arr[4];
document.getElementById('btn8').innerHTML =arr[5];
document.getElementById('btn7').innerHTML =arr[6];
document.getElementById('btn4').innerHTML =arr[7];
}