Dashboard Layout Integration: Building Your Unified UI

Q: How do I handle errors in one module without crashing the other?

Wrap your init calls in try...catch blocks within app.js. If initWeather() fails, initTodo() will still run successfully.

Learn how to combine independent JavaScript modules into a cohesive dashboard. We'll structure your HTML grid and manage initialization for a smooth startup.

javascriptweb-developmentdashboarddommodules

Previously in this course, we covered building the weather service and rendering the to-do list. Now that you have functional, independent features, this lesson adds the "glue" required to combine them into one unified, production-grade dashboard.

The Anatomy of a Dashboard Layout

A dashboard is more than just a collection of components; it’s an application that needs a predictable lifecycle. When we talk about dashboard layout integration, we aren't just placing boxes on a page—we are defining how those boxes "live" together.

We will use a central HTML container to act as our grid, and a single "orchestrator" script to manage the lifecycle of our components.

1. Structuring the HTML Grid

Instead of scattering scripts throughout your body, structure your HTML to define the shell of the app. A clean, semantic layout makes your JavaScript much easier to manage.


HTML
<!-- index.html -->
style="color:#808080"><style="color:#4EC9B0">div id="dashboard" class="dashboard-grid">
  style="color:#808080"><style="color:#4EC9B0">section id="weather-widget" class="widget">
    style="color:#808080"><style="color:#4EC9B0">h2>Weatherstyle="color:#808080"></style="color:#4EC9B0">h2>
    style="color:#808080"><style="color:#4EC9B0">div id="weather-content">Loading weather...style="color:#808080"></style="color:#4EC9B0">div>
  style="color:#808080"></style="color:#4EC9B0">section>

  style="color:#808080"><style="color:#4EC9B0">section id="todo-widget" class="widget">
    style="color:#808080"><style="color:#4EC9B0">h2>My Tasksstyle="color:#808080"></style="color:#4EC9B0">h2>
    style="color:#808080"><style="color:#4EC9B0">form id="todo-form">...style="color:#808080"></style="color:#4EC9B0">form>
    style="color:#808080"><style="color:#4EC9B0">ul id="todo-list">style="color:#808080"></style="color:#4EC9B0">ul>
  style="color:#808080"></style="color:#4EC9B0">section>
style="color:#808080"></style="color:#4EC9B0">div>

Aligning JavaScript Modules

The biggest pitfall for beginners is global scope collision. If your weather script and to-do script both try to define a variable named init, the last one loaded will overwrite the first.

We fix this by using a "Controller" pattern. We define a main app.js that acts as the entry point, while keeping our feature logic isolated.

Worked Example: The Orchestrator

We will create an init function that ensures both components are ready only after the DOM has fully parsed.


JAVASCRIPT
// app.js
import { initWeather } from CE9178">'./weather.js';
import { initTodo } from CE9178">'./todo.js';

function startApp() {
    console.log("Dashboard initializing...");
    
    // Initialize services
    initWeather();
    initTodo();
    
    console.log("Dashboard ready.");
}

// Ensure the code runs after HTML is loaded
document.addEventListener(CE9178">'DOMContentLoaded', startApp);

By using DOMContentLoaded, we prevent errors where JavaScript tries to manipulate an element (like #todo-list) before it exists in the browser memory.

Hands-on Exercise: Unify Your Components

Create a file named app.js.
Ensure your weather.js and todo.js files export their initialization functions (e.g., export function initWeather() { ... }).
Add a <script type="module" src="app.js"></script> tag to the bottom of your index.html.
Inside app.js, call your init functions and log a success message to the console.

Common Pitfalls

Race Conditions: Trying to fetch weather data before the DOM container exists. Always use DOMContentLoaded or place your scripts at the end of the <body>.
Module Scope: If you don't use type="module" in your script tag, your exports won't work, and you'll get a syntax error.
CSS Conflicts: Ensure your widgets use specific IDs or classes (like .widget) so that CSS for the to-do list doesn't accidentally change the look of the weather widget.

FAQ

Why use a central orchestrator? It keeps your code DRY (Don't Repeat Yourself) and makes debugging easier. If the dashboard fails to load, you know exactly where to look: your app.js entry point.

How do I handle errors in one module without crashing the other? Wrap your init calls in try...catch blocks within app.js. If initWeather() fails, initTodo() will still run successfully.

Recap

We’ve successfully moved from individual scripts to a structured dashboard. We learned how to use DOMContentLoaded for safe initialization, how to organize our UI using a grid container, and how to use modules to prevent global scope pollution. You are now managing a real, multi-component application.

Up next: We will build a location input form to make your weather widget truly dynamic.