Filter recent earthquakes

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

  1. Go to CodePen to create a new pen for your application.

Construct the HTML

  1. In CodePen > HTML, add HTML to create a page with a <body> tag. Also, add a <main> section.
Use dark colors for code blocks
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>
  1. To access Calcite Design System web components, add references to Calcite Components in the <head> element.
Expand
Use dark colors for code blocks
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211

<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/2.13.2/calcite.esm.js" type="module"></script>
  <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />

</head>
Expand
  1. 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.
Expand
Use dark colors for code blocks
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
    <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>
Expand

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.

  1. 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
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
        <!-- Filter records -->
        <calcite-filter placeholder="Try searching Alaska"></calcite-filter>
Expand
  1. Next, add two calcite-notice elements, each accompanied with an unique id attribute. The first will provide guidance on the app's initial state and be set as open. The second will supply on-demand feedback to the user.
Expand
Use dark colors for code blocks
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
    <calcite-shell>
      <!-- Panel to display records -->
      <calcite-panel heading="Earthquake results" heading-level="1" description="Search by location to display results">

        <!-- Filter records -->
        <calcite-filter placeholder="Try searching Alaska"></calcite-filter>

        <!-- Provide details of the app's initial state -->
        <calcite-notice id="initial-note" open icon="information">
          <div slot="title">Try searching a place of interest</div>
          <div slot="message">Results will display when text is entered.</div>
          </div>
        </calcite-notice>

        <!-- An open property will be added to display the number of filtered records -->
        <calcite-notice id="note">

        </calcite-notice>

      </calcite-panel>
    </calcite-shell>
Expand
  1. In the second 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
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
        <!-- An open property will be added to display the number of filtered records -->
        <calcite-notice id="note">

          <div id="number-records" slot="title">
            <!-- Content is automatically generated -->
          </div>

        </calcite-notice>
Expand
  1. Next, 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 page-size attribute to specify the number of items to display per page.
Expand
Use dark colors for code blocks
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
        <!-- Container with Cards -->
        <div class="card-container">
          <!-- Content is automatically generated -->
        </div>
        <!-- Pagination -->
        <calcite-pagination slot="footer" page-size="12" style="visibility:hidden"></calcite-pagination>
Expand

Query the data

You will add JavaScript functionality to query an earthquakes feature service via a search term entered by a user.

  1. First, create constant variables referencing the calcite-filter, calcite-pagination, both calcite-notice's, and the card-container CSS class to reference the elements later on.
Expand
Use dark colors for code blocks
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
  const filterElement = document.querySelector("calcite-filter");
  const paginationElement = document.querySelector("calcite-pagination");
  const initialNoticeElement = document.getElementById("initial-note");
  const noticeElement = document.getElementById("note");
  const cardContainer = document.querySelector(".card-container");
Expand
  1. 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
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
  /* 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))

Expand

Filter the results

Next, with the response parsed, you will filter and display the user-defined results.

  1. Filter results using a named function expression, initFilter. Set the calcite-filter component's items property using the constant variable defined in the step above.
Expand
Use dark colors for code blocks
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
  /* 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;

  };

Expand
  1. In initFilter, add a listener for the calciteFilterChange event to watch for changes to the filter's value. Then, go back to the first page by changing pagination's startItem and totalItems properties. Lastly, create a conditional to add cards when the filter's value is not falsey.
Expand
Use dark colors for code blocks
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
  /* Filter the results to display */
  const initFilter = (items) => {
    filterElement.items = items;

    document.addEventListener("calciteFilterChange", () => {
      paginationElement.startItem = 1;
      paginationElement.totalItems = 0;

      // 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.totalItems > paginationElement.pageSize) {
          paginationElement.style.visibility = "visible";
        }

    });

  };
Expand
  1. When there is no text present in the calcite-filter, set the initial notice's open property to true.
Expand
Use dark colors for code blocks
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
  /* Filter the results to display */
  const initFilter = (items) => {
    filterElement.items = items;

    document.addEventListener("calciteFilterChange", () => {
      paginationElement.startItem = 1;
      paginationElement.totalItems = 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.totalItems > paginationElement.pageSize) {
          paginationElement.style.visibility = "visible";
        }

      } else {
        // If no text is present in the Filter, display the initial notice
        initialNoticeElement.open = true;
      }

    });

  };
Expand
  1. Next, within calciteFilterChange, you will display the pagination component when the totalItems filtered earthquakes is greater than the specified pageSize 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
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
  /* Filter the results to display */
  const initFilter = (items) => {
    filterElement.items = items;

    document.addEventListener("calciteFilterChange", () => {
      paginationElement.startItem = 1;
      paginationElement.totalItems = 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.totalItems > paginationElement.pageSize) {
          paginationElement.style.visibility = "visible";
        }

      } else {
        // If no text is present in the Filter, display the initial notice
        initialNoticeElement.open = true;
      }

    });

  };
Expand

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.

  1. Place the filtered earthquake(s) into calcite-card component(s) residing in the card-container class with a named function expression, createCard.
Expand
Use dark colors for code blocks
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
  /* Create Cards and their content */
  const createCard = (item) => {
    const headingName = item.place.replace(/[;']/g, "");
    // Populate Card content
    if (cardContainer.childElementCount < paginationElement.pageSize) {
      const cardString =
        `<calcite-card id="card-${item.OBJECTID}">
        <span slot="heading">
          <b>${item.place}</b>
        </span>
        <span slot="description">
          Occurred on: ${new Date(item.eventTime)}
        </span>
        <calcite-chip
          appearance="outline"
          scale="s"
          icon="graph-time-series"
        >
          Magnitude: ${item.mag}
        </calcite-chip>
        <calcite-button
          label="Open ${headingName} in map"
          icon-end="launch"
          slot="footer-end"
          target="_blank"
          width="full"
          href="https://www.arcgis.com/apps/mapviewer/index.html?` +
        `marker=${item.longitude};${item.latitude};` + // Marker (lng, lat)
        `4326;` + // Coordinate system
        headingName + `;` +
        `;` + // Marker image
        `Magnitude: ${item.mag}&` +
        `center=${item.longitude};${item.latitude}&` +
        `level=6"
        >
          Open in map
        </calcite-button>
        </calcite-card>`;
      const cardElement = document
        .createRange()
        .createContextualFragment(cardString);
      cardContainer.appendChild(cardElement);
    }
  };
Expand
  1. To create the cards, call createCard in the calciteFilterChange event listener for each feature that matches the filter value. Also, clear the cardContainer content, which contains previous filter results.
Expand
Use dark colors for code blocks
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
  /* Filter the results to display */
  const initFilter = (items) => {
    filterElement.items = items;

    document.addEventListener("calciteFilterChange", () => {
      paginationElement.startItem = 1;
      paginationElement.totalItems = 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.totalItems = filterElement.filteredItems.length;

        // If additional pages are populated, display Pagination
        if (paginationElement.totalItems > paginationElement.pageSize) {
          paginationElement.style.visibility = "visible";
        }

      } else {
        // If no text is present in the Filter, display the initial notice
        initialNoticeElement.open = true;
      }

    });

  };
Expand
  1. Next, you will display the number of earthquake results for the user. Create a function, showNumberOfResponses and post the number of responses to the calcite-notice title. To ensure content is accessible to users, remove the initial notice's open attribute and set the results notice open property to true.
    • The innerHTML, kind, and icon attributes will change depending on the number of responses.
Expand
Use dark colors for code blocks
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
  /* 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";
    }
    // Hide the initial notice
    initialNoticeElement.removeAttribute("open");
    // Notice text
    numberRecordsNote.innerHTML = `${responseNumber} records found.`;
    noticeElement.open = true;
  }
Expand
  1. Similar to creating the cards, add the showNumberOfResponses function call to the calciteFilterChange event listener's callback function. When no text is present in the calcite-filter, set the filtered notice's open attribute to false, and the calcite-pagination's visibility to "hidden".

    Expand
    Use dark colors for code blocks
    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
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
      /* Filter the results to display */
      const initFilter = (items) => {
        filterElement.items = items;
    
        document.addEventListener("calciteFilterChange", () => {
          paginationElement.startItem = 1;
          paginationElement.totalItems = 0;
    
          // Prevent display 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.totalItems = filterElement.filteredItems.length;
    
            showNumberOfResponses(filterElement.filteredItems.length);
    
            // If additional pages are populated, display Pagination
            if (paginationElement.totalItems > paginationElement.pageSize) {
              paginationElement.style.visibility = "visible";
            }
    
          } else {
            // If no text is present in the Filter, display the initial notice
            initialNoticeElement.open = true;
          }
    
        });
    
      };
    
    Expand
  2. Add a listener for pagination's calcitePaginationChange event so users can view subsequent filtered items when changing pages. Display a subset of the filteredItems, starting at the pagination's startItem property, and ending at the sum of the startItem and pageSize properties.

    Expand
    Use dark colors for code blocks
    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
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
      /* Update Cards when interacting with Pagination */
      document.addEventListener("calcitePaginationChange", ({ target }) => {
    
        const displayItems = filterElement.filteredItems.slice(
          target.startItem - 1,
          target.startItem - 1 + target.pageSize
        );
    
      });
    
    Expand
  3. Lastly, you will update the cards when interacting with calcite-pagination. Clear the cardContainer contents with any previous filtered results, and call createCard in the calcitePaginationChange event listener.

    Expand
    Use dark colors for code blocks
    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
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
      /* Update Cards when interacting with Pagination */
      document.addEventListener("calcitePaginationChange", ({ target }) => {
    
        cardContainer.innerHTML = "";
    
        const displayItems = filterElement.filteredItems.slice(
          target.startItem - 1,
          target.startItem - 1 + target.pageSize
        );
    
        displayItems.forEach((item) => createCard(item));
    
      });
    
    Expand

Add styling

The application's functionality is now complete. Make final design tweaks to the interface using CSS styling.

  1. Add styling to the card-container class using CSS grid layout, calcite-chip's color to display the earthquake magnitude, and calcite-notice positioning.
Expand
Use dark colors for code blocks
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<style>

  .card-container {
    margin: 0.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1rem;
    justify-content: space-evenly;
  }

  calcite-chip {
    --calcite-chip-border-color: var(--calcite-color-status-danger);
    --calcite-chip-text-color: var(--calcite-color-status-danger);
  }

  calcite-notice {
    position: relative;
    margin: 0.75rem;
  }


</style>
Expand

Run the application

In CodePen, run your code to display the application.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.