diff --git a/js/api-users.js b/js/api-users.js
new file mode 100644
index 0000000..4d292d9
--- /dev/null
+++ b/js/api-users.js
@@ -0,0 +1,82 @@
+// ====================== API INTEGRATION ======================
+// Fetch & Display Users from JSONPlaceholder API
+
+const API_URL = 'https://jsonplaceholder.typicode.com/users';
+const apiContainer = document.getElementById('apiUsersContainer');
+
+/**
+ * Fetches users from JSONPlaceholder API
+ * Parses response as JSON and renders to DOM
+ * Includes error handling with catch()
+ */
+function fetchAndDisplayUsers() {
+ if (!apiContainer) {
+ console.log('API container not found on this page');
+ return;
+ }
+
+ // Show loading state
+ apiContainer.innerHTML = 'Daten werden geladen...
';
+
+ fetch(API_URL)
+ .then(response => {
+ console.log('Response Status:', response.status);
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ return response.json();
+ })
+ .then(data => {
+ console.log('Fetched Users Data:', data);
+
+ // Clear container
+ apiContainer.innerHTML = '';
+
+ // Create list of users using createElement
+ const userList = document.createElement('ul');
+ userList.className = 'api-users-list';
+
+ data.forEach(user => {
+ const listItem = document.createElement('li');
+ listItem.className = 'api-user-item';
+
+ // Create user card with detailed information
+ const userCard = document.createElement('div');
+ userCard.className = 'api-user-card';
+
+ userCard.innerHTML = `
+
+
+ `;
+
+ listItem.appendChild(userCard);
+ userList.appendChild(listItem);
+ });
+
+ apiContainer.appendChild(userList);
+ console.log(`Successfully loaded and displayed ${data.length} users`);
+ })
+ .catch(error => {
+ console.error('Error fetching users:', error);
+ apiContainer.innerHTML = `
+
+
⚠️ Fehler beim Laden der Daten
+
${error.message}
+
Bitte versuchen Sie es später erneut oder kontaktieren Sie den Administrator.
+
Erneut versuchen
+
+ 📡 API Integration Demo
+ Hier demonstrieren wir die Integration einer öffentlichen API mit Fetch & JavaScript. Die Daten werden dynamisch von JSONPlaceholder geladen und im DOM gerendert.
+
+
+
+
+
+