added frontend and script examples

frontend/script.js

@@ -0,0 +1,88 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Set the base URL for the API
+    // When running locally without the container, you would use:
+    const API_BASE_URL = 'http://localhost:8000';
+    
+    // When accessing the API running in a container, you would use:
+    // const API_BASE_URL = 'http://localhost:8000';
+    // Adjust the port if needed according to your container setup
+
+    // Function to fetch data from the API and update the UI
+    async function fetchEndpoint(endpoint, elementId) {
+        const dataElement = document.getElementById(elementId);
+        
+        try {
+            const response = await fetch(`${API_BASE_URL}${endpoint}`);
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            
+            const data = await response.json();
+            
+            // Create a formatted JSON string with syntax highlighting
+            const formattedJson = JSON.stringify(data, null, 2);
+            
+            // Update the UI with the fetched data
+            dataElement.innerHTML = `<pre>${formattedJson}</pre>`;
+
+            return data; // Return the data for potential further processing
+        } catch (error) {
+            dataElement.innerHTML = `<div class="error">Error: ${error.message}</div>`;
+            console.error(`Failed to fetch ${endpoint}:`, error);
+            return null;
+        }
+    }
+
+    // Fetch data from all endpoints
+    fetchEndpoint('/', 'root-data');
+    fetchEndpoint('/api/users', 'users-data');
+    
+    // Fetch contacts data and then process it to display locations
+    fetchEndpoint('/api/contacts', 'contacts-data')
+        .then(contactsData => {
+            if (contactsData) {
+                // Process the contacts data to extract unique locations
+                displayLocationsExample(contactsData);
+            }
+        });
+
+    // Function to display the locations example
+    function displayLocationsExample(contactsData) {
+        const locationsElement = document.getElementById('locations-example');
+        
+        try {
+            // Extract all unique locations from the contacts data
+            const locations = [...new Set(contactsData.map(contact => contact.location))];
+            
+            if (locations.length === 0) {
+                locationsElement.innerHTML = '<p>No locations found in the contacts data.</p>';
+                return;
+            }
+
+            // Create HTML for the locations list
+            const locationsHTML = `
+                <p>Found ${locations.length} unique location(s):</p>
+                <ul class="location-list">
+                    ${locations.map(location => `
+                        <li class="location-item">${location}</li>
+                    `).join('')}
+                </ul>
+                <p>Code example:</p>
+                <pre>
+// JavaScript to extract unique locations
+const locations = [...new Set(
+    contactsData.map(contact => contact.location)
+)];
+
+console.log(locations); // ${JSON.stringify(locations)}
+                </pre>
+            `;
+            
+            locationsElement.innerHTML = locationsHTML;
+        } catch (error) {
+            locationsElement.innerHTML = `<div class="error">Error processing locations: ${error.message}</div>`;
+            console.error('Error processing locations:', error);
+        }
+    }
+});