diff --git a/content/7-webapp-features/1-fetch-data/lit/index.html b/content/7-webapp-features/1-fetch-data/lit/index.html
new file mode 100644
index 0000000..7af806a
--- /dev/null
+++ b/content/7-webapp-features/1-fetch-data/lit/index.html
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/content/7-webapp-features/1-fetch-data/lit/x-app.js b/content/7-webapp-features/1-fetch-data/lit/x-app.js
new file mode 100644
index 0000000..85576ec
--- /dev/null
+++ b/content/7-webapp-features/1-fetch-data/lit/x-app.js
@@ -0,0 +1,56 @@
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+
+@customElement('x-app')
+export class XApp extends LitElement {
+ @state()
+ loading = false;
+
+ @state()
+ error;
+
+ @state()
+ data;
+
+ async fetchUsers() {
+ this.loading = true;
+ try {
+ const response = await fetch('https://randomuser.me/api/?results=3');
+ const { results: users } = await response.json();
+ this.data = users;
+ this.error = undefined;
+ } catch (err) {
+ this.data = undefined;
+ this.error = err;
+ }
+ this.loading = false;
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ this.fetchUsers();
+ }
+
+ render() {
+ if (this.loading) {
+ return html`Fetching users...
`;
+ }
+ if (this.error) {
+ return html`An error occurred while fetching users
`;
+ }
+ if (this.data) {
+ return html`
+
+ `;
+ }
+ }
+}