Build a user interface (UI) with Calcite Design System. This tutorial will provide an overview of Calcite Components, which can be replicated and scaled to solve complex problems. You will:
Learn how to execute a query to access attributes from a feature service . Add a calcite-notice
to dynamically populate the number of records found in the query. Dynamically add calcite-card
's to display individual records from the query.Create a calcite-button
that links to a record's location in Map Viewer . This tutorial leverages vanilla JavaScript, but these concepts and methods of interaction are applicable across frameworks . For a tutorial that includes a map , visit Create a mapping app .
Prerequisites ArcGIS developer account
You need a free
ArcGIS developer account or an account associated with an ArcGIS Online organization to access the services used in this tutorial.
Steps Create a new pen Go to CodePen to create a new pen for your application. Construct the HTML In CodePen > HTML , add HTML to create a page with a <body>
tag. Also, add a <main>
section.
More info The <!DOCTYPE html>
tag is not required in CodePen. If you are using a different editor or running the page on a local server, be sure to add this tag to the top of your HTML page.
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< html lang = "en" >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< title > Calcite Components: Filter recent earthquakes </ title >
</ head >
< style >
</ style >
< body >
< main >
</ main >
</ body >
< script >
</ script >
</ html >
To access Calcite Design System web components, add references to Calcite Components in the <head>
element.
Expand
Use dark colors for code blocks
Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" />
< title > Calcite Components: Filter recent earthquakes </ title >
< script src = "https://js.arcgis.com/calcite-components/1.0.3/calcite.esm.js" type = "module" > </ script >
< link rel = "stylesheet" href = "https://js.arcgis.com/calcite-components/1.0.3/calcite.css" />
</ head >
Next, you will organize the contents of the application. In the main
section, add a calcite-shell
and calcite-panel
with attributes of heading
and heading-level
to contain the earthquake results.
More info The heading
and heading-level
attributes arrange page hierarchy throughout your application to support a larger audience. Since this is the first header on the page, set the heading-level
value to "1".
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
< calcite-shell >
<!-- Panel to display records -->
< calcite-panel heading = "Earthquake results" heading-level = "1" description = "Search by location to display results" >
</ calcite-panel >
</ calcite-shell >
Showcase the records You will continue building HTML content, which the user will have the ability to adjust. The content will change as the user interacts with the application.
In the calcite-panel
, add a calcite-filter
, which will be used to query the earthquakes feature service .
Expand
Use dark colors for code blocks
Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!-- Filter records -->
< calcite-filter placeholder = "Try searching Alaska" > </ calcite-filter >
Next, add a calcite-notice
with an id
attribute, which will provide on-demand feedback to the user.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!-- An open property will be added to display the number of records -->
< calcite-notice id = "note" >
</ calcite-notice >
In the calcite-notice
, add a div
and place it in the title
slot, which will be used later to populate the number of earthquake results using the id
attribute.
Expand
Use dark colors for code blocks
Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!-- An open property will be added to display the number of records -->
< calcite-notice id = "note" >
< div id = "number-records" slot = "title" >
<!-- Content is automatically generated -->
</ div >
</ calcite-notice >
Add a div
with a class
attribute to hold the earthquake results. Also, place calcite-pagination
in the panel's footer
slot, and add a num
attribute to specify the number of items to display per page.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!-- Container with Cards -->
< div class = "card-container" >
<!-- Content is automatically generated -->
</ div >
<!-- Pagination -->
< calcite-pagination slot = "footer" num = "12" style = "visibility:hidden" > </ calcite-pagination >
Query the data You will add JavaScript functionality to query an earthquakes feature service via a search term entered by a user.
First, create constant variables referencing the calcite-filter
, calcite-pagination
, calcite-notice
, and card-container
CSS class to reference the elements later on.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
const filterElement = document .querySelector( "calcite-filter" );
const paginationElement = document .querySelector( "calcite-pagination" );
const noticeElement = document .querySelector( "calcite-notice" );
const cardContainer = document .querySelector( ".card-container" );
Next, query the earthquakes service using the Fetch API . When successful, parse the response with Response.json()
, and the map()
method to capture the features.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/* Fetch the earthquakes feature service */
fetch( "https://services9.arcgis.com/RHVPKKiFTONKtxq3/ArcGIS/rest/services/USGS_Seismic_Data_v1/FeatureServer/0/query?where=1%3D1&outFields=*&f=json" )
.then( ( response ) => response.json())
.then( ( {features} ) => features.map( ( {attributes} ) => attributes))
Filter the results Next, with the response parsed, you will filter and display the user-defined results.
Filter results using a named function expression , init Filter
. Set the calcite-filter
component's items
property using the constant variable defined in the step above.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/* Fetch the earthquakes feature service */
fetch( "https://services9.arcgis.com/RHVPKKiFTONKtxq3/ArcGIS/rest/services/USGS_Seismic_Data_v1/FeatureServer/0/query?where=1%3D1&outFields=*&f=json" )
.then( ( response ) => response.json())
.then( ( {features} ) => features.map( ( {attributes} ) => attributes))
.then( ( attributes ) => initFilter(attributes));
/* Filter the results to display */
const initFilter = ( items ) => {
filterElement.items = items;
};
In init Filter
, add a listener for the calcite Filter Change
event to watch for changes to the filter's value
. Then, go back to the first page by changing pagination's start
and total
properties. Lastly, create a conditional to add cards when the filter's value
is not falsey.
More info The filter's [`filteredItems`](xref://site.self/filter/#component-api-properties-filteredItems) property contains all of the items when there is no [`value`](xref://site.self/filter/#component-api-properties-value). To create search functionality, you need to only add cards when the user has entered a query term.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/* Filter the results to display */
const initFilter = ( items ) => {
filterElement.items = items;
document .addEventListener( "calciteFilterChange" , () => {
paginationElement.start = 1 ;
paginationElement.total = 0 ;
// When a Filter value is present
// Create Cards, update Pagination, and number of responses
if (filterElement.value) {
}
});
};
Next, within calcite Filter Change
, you will display the pagination component when the total
filtered earthquakes is greater than the specified num
value. Set the calcite-pagination
component's visibility
CSS property to "hidden"
. When there is more than one page of results, you will change the CSS property's value to "visible".
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/* Filter the results to display */
const initFilter = ( items ) => {
filterElement.items = items;
document .addEventListener( "calciteFilterChange" , () => {
paginationElement.start = 1 ;
paginationElement.total = 0 ;
paginationElement.style.visibility = "hidden" ;
// When a Filter value is present
// Create Cards, update Pagination, and number of responses
if (filterElement.value) {
// If additional pages are populated, display Pagination
if (paginationElement.total > paginationElement.num) {
paginationElement.style.visibility = "visible" ;
}
}
});
};
Display the earthquakes To display the earthquakes you will store each result's attributes in a calcite-card
. You will also add a calcite-button
, which, when accessed, will open the earthquake location in Map Viewer .
Place the filtered earthquake(s) into calcite-card
component(s) residing in the card-container
class with a named function expression, create Card
.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/* Create Cards and their content */
const createCard = ( item ) => {
const titleName = item.place.replace( /[;']/g , "" );
// Populate Card content
if (cardContainer.childElementCount < paginationElement.num) {
const cardString =
`<calcite-card id="card- ${item.OBJECTID} ">
<span slot="title">
<b> ${item.place} </b>
</span>
<span slot="subtitle">
Occurred on: ${ new Date (item.eventTime)}
</span>
<calcite-chip
appearance="outline-fill"
scale="s"
kind="inverse"
icon="graph-time-series"
>
Magnitude: ${item.mag}
</calcite-chip>
<calcite-button
label="Open ${titleName} in map"
icon-end="launch"
slot="footer-trailing"
target="_blank"
width="full"
href="https://www.arcgis.com/apps/mapviewer/index.html?` +
`marker= ${item.longitude} ; ${item.latitude} ;` + // Marker (lng, lat)
`4326;` + // Coordinate system
titleName + `;` +
`https://clipart.world/wp-content/uploads/2021/07/Target-clipart-transparent.png;` + // Marker image
`Magnitude: ${item.mag} &` +
`level=6"
>
Open in map
</calcite-button>
</calcite-card>` ;
const cardElement = document
.createRange()
.createContextualFragment(cardString);
cardContainer.appendChild(cardElement);
}
};
To create the cards, call create Card
in the calcite Filter Change
event listener for each feature that matches the filter value
. Also, clear the card Container
content, which contains previous filter results.
Expand
Use dark colors for code blocks
Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/* Filter the results to display */
const initFilter = ( items ) => {
filterElement.items = items;
document .addEventListener( "calciteFilterChange" , () => {
paginationElement.start = 1 ;
paginationElement.total = 0 ;
paginationElement.style.visibility = "hidden" ;
cardContainer.innerHTML = "" ;
// When a Filter value is present
// Create Cards, update Pagination, and number of responses
if (filterElement.value) {
filterElement.filteredItems.forEach( ( item ) => createCard(item));
paginationElement.total = filterElement.filteredItems.length;
// If additional pages are populated, display Pagination
if (paginationElement.total > paginationElement.num) {
paginationElement.style.visibility = "visible" ;
}
}
});
};
Next, you will display the number of earthquake results for the user. Create a function, show Number Of Responses
and post the number of responses to the calcite-notice
title. To ensure content is accessible to users, set the Notice's open
property to true
.
The inner HTML
, kind
, and icon
attributes will change depending on the number of responses. Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/* Display the number of responses in a Notice */
function showNumberOfResponses ( responseNumber ) {
const note = document .getElementById( "note" );
const numberRecordsNote = document .getElementById( "number-records" );
// If 0 responses, add "Sorry" to the Notice text
// Add the Notice color and icon
if (responseNumber === 0 ) {
responseNumber = `Sorry, ${responseNumber} `
note.kind = "danger" ;
note.icon = "exclamation-mark-triangle" ;
} else {
note.kind = "brand" ;
note.icon = "information" ;
}
// Notice text
numberRecordsNote.innerHTML = ` ${responseNumber} records found.` ;
noticeElement.open = true ;
}
Similar to creating the cards, add the show Number Of Responses
function call to the calcite Filter Change
event listener's callback function. Where no filtered value is present, set the notice's open
attribute to false
, and the calcite-pagination
's visibility to "hidden"
.
Expand
Use dark colors for code blocks
Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/* Filter the results to display */
const initFilter = ( items ) => {
filterElement.items = items;
document .addEventListener( "calciteFilterChange" , () => {
paginationElement.start = 1 ;
paginationElement.total = 0 ;
// Prevent display of elements if no Filter value is present
noticeElement.open = false ;
paginationElement.style.visibility = "hidden" ;
cardContainer.innerHTML = "" ;
// When a Filter value is present
// Create Cards, update Pagination, and number of responses
if (filterElement.value) {
filterElement.filteredItems.forEach( ( item ) => createCard(item));
paginationElement.total = filterElement.filteredItems.length;
showNumberOfResponses(filterElement.filteredItems.length);
// If additional pages are populated, display Pagination
if (paginationElement.total > paginationElement.num) {
paginationElement.style.visibility = "visible" ;
}
}
});
};
Add a listener for pagination's calcite Pagination Change
event so users can view subsequent filtered items when changing pages. Display a subset of the filtered Items
, starting at the pagination's start
property, and ending at the sum of the start
and num
properties.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/* Update Cards when interacting with Pagination */
document .addEventListener( "calcitePaginationChange" , ( { target } ) => {
const displayItems = filterElement.filteredItems.slice(
target.start - 1 ,
target.start - 1 + target.num
);
});
Lastly, you will update the cards when interacting with calcite-pagination
. Clear the card Container
contents with any previous filtered results, and call create Card
in the calcite Pagination Change
event listener.
Expand
Use dark colors for code blocks
Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/* Update Cards when interacting with Pagination */
document .addEventListener( "calcitePaginationChange" , ( { target } ) => {
cardContainer.innerHTML = "" ;
const displayItems = filterElement.filteredItems.slice(
target.start - 1 ,
target.start - 1 + target.num
);
displayItems.forEach( ( item ) => createCard(item));
});
Add styling The application's functionality is now complete. Make final design tweaks to the interface using CSS styling.
Add styling to the card-container
class using CSS grid layout , calcite-chip
's color to display the earthquake magnitude, and calcite-notice
's positioning.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<style>
.card-container {
margin: 0.75rem ;
display : grid;
grid-template- columns : repeat (auto-fit, minmax ( 300px , 1 fr));
grid-gap: 1rem ;
justify-content : space-evenly;
}
calcite-chip {
color : var (--calcite-ui-danger);
}
calcite-notice {
position : relative;
margin : 0.75rem ;
}
</style>
Run the application In CodePen, run your code to display the application.