ere’s a basic example of how you might create a dashboard in JavaScript with a header and six square fields to display data fetched from different RESTful API sources:
HTML:
html <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Dashboard</title> <link rel=”stylesheet” href=”styles.css”> </head> <body> <div class=”dashboard”> <header class=”dashboard-header”> <h1>Dashboard</h1> </header> <div class=”dashboard-content”> <div id=”data-field-1″ class=”data-field”></div> <div id=”data-field-2″ class=”data-field”></div> <div id=”data-field-3″ class=”data-field”></div> <div id=”data-field-4″ class=”data-field”></div> <div id=”data-field-5″ class=”data-field”></div> <div id=”data-field-6″ class=”data-field”></div> </div> </div> <script src=”dashboard.js”></script> </body> </html>
CSS (styles.css):
css body { margin: 0; font-family: Arial, sans-serif; } .dashboard { width: 100%; max-width: 1200px; margin: auto; } .dashboard-header { background-color: #333; color: white; text-align: center; padding: 1em; } .dashboard-content { display: flex; flex-wrap: wrap; justify-content: space-around; padding: 20px; } .data-field { width: 30%; height: 150px; /* Adjust as needed for your design */ background-color: #f4f4f4; border: 1px solid #ddd; margin: 10px 0; display: flex; justify-content: center; align-items: center; font-size: 18px; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } @media (max-width: 600px) { .data-field { width: 100%; } }
JavaScript (dashboard.js):
javascript document.addEventListener(‘DOMContentLoaded’, (event) => { const dataFields = [ { id: ‘data-field-1’, url: ‘api/data-source-1.json’ }, { id: ‘data-field-2’, url: ‘api/data-source-2.json’ }, { id: ‘data-field-3’, url: ‘api/data-source-3.json’ }, { id: ‘data-field-4’, url: ‘api/data-source-4.json’ }, { id: ‘data-field-5’, url: ‘api/data-source-5.json’ }, { id: ‘data-field-6’, url: ‘api/data-source-6.json’ } ]; dataFields.forEach(field => { fetchData(field); }); async function fetchData(field) { try { const response = await fetch(field.url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); // Here, we’re assuming the API returns a ‘value’ field. Adjust according to your API’s response structure. document.getElementById(field.id).textContent = data.value || ‘No data’; } catch (error) { document.getElementById(field.id).textContent = ‘Error loading data’; console.error(‘Error:’, error); } } });
Explanation:
– HTML: Sets up the structure with a header and six div elements for the data fields.
– CSS: Styles the dashboard layout, making sure it’s responsive and the data fields are displayed as squares with some basic styling.
– JavaScript:
– On DOM load, it iterates over each data field, calling fetchData to retrieve data from different API endpoints.
– fetchData uses the Fetch API to make asynchronous requests to the specified URLs, updating the text content of each div with the data received or an error message if the fetch fails.
This example assumes that each API endpoint returns JSON with a value field. You would need to adjust the data handling in the fetchData function if your APIs return data in a different format or structure. Remember to replace the api/data-source-x.json URLs with actual REST API endpoints.
