Understanding the Switch Statement

The switch statement is used to perform different actions based on different conditions. It is more readable than nested if-else blocks when you have many options to choose from.

Context Change: We have taken the logic from a signal processing app and turned it into a Smart Home Controller.

• Instead of "Sine Waves," we have Eco Mode.
• Instead of "Rectangular Waves," we have Party Mode (flashing lights).

The Complete Source Code

Below is the entire code (HTML, CSS, and JavaScript) required to build a working Smart Home dashboard using a switch statement:

Full Project Code (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Smart Home Dashboard</title>
    <style>
        #dashboard { border: 2px solid #333; padding: 20px; width: 300px; border-radius: 10px; }
        .panel { display: none; margin-top: 10px; padding: 10px; background: #eee; }
        .active-status { color: green; font-weight: bold; }
    </style>
</head>
<body>

    <div id="dashboard">
        <h3>Home Controller</h3>
        <label>Select Home Mode:</label>
        <select id="modeSelector" onchange="runHomeLogic()">
            <option value="none">-- Select --</option>
            <option value="eco">Eco Mode</option>
            <option value="security">Security Mode</option>
            <option value="party">Party Mode</option>
        </select>

        <div id="status" class="active-status"></div>

        <!-- Panels controlled by the Switch -->
        <div id="solarPanel" class="panel"> Solar Optimization: Active</div>
        <div id="cameraPanel" class="panel"> Camera Feed: Live</div>
        <div id="musicPanel" class="panel"> Music: Playing</div>
    </div>

    <script>
        function runHomeLogic() {
            const selectedMode = document.getElementById('modeSelector').value;
            const status = document.getElementById('status');
            
            // UI Elements
            const solar = document.getElementById('solarPanel');
            const camera = document.getElementById('cameraPanel');
            const music = document.getElementById('musicPanel');

            // Resetting UI (Hide everything first)
            [solar, camera, music].forEach(p => p.style.display = 'none');

            // --- THE SWITCH STATEMENT ---
            switch (selectedMode) {
                case 'eco':
                    status.innerText = "System: Energy Saving";
                    solar.style.display = 'block';
                    // Logic calculation (Reducing power usage)
                    const powerUsage = [100, 200, 300].map(w => w * 0.5);
                    console.log("New Power Limits:", powerUsage);
                    break;

                case 'security':
                    status.innerText = "System: Armed";
                    camera.style.display = 'block';
                    break;

                case 'party':
                    status.innerText = "System: Celebration";
                    music.style.display = 'block';
                    // Flashing Light Logic (Manipulated from your code)
                    const time = [1, 2, 3, 4, 5];
                    const lightPulse = time.map(t => (t % 2 === 0) ? "ON" : "OFF");
                    console.log("Light Sequence:", lightPulse);
                    break;

                default:
                    status.innerText = "Please select a mode";
                    alert("No mode selected!");
            }
        }
    </script>
</body>
</html>

How it works

1. Selection: When the user changes the dropdown, the runHomeLogic() function triggers.
2. The Switch: It evaluates selectedMode.
3. UI Control: Instead of showing/hiding signals, it shows/hides "Panels" (solar, camera, or music).
4. Logic: In the eco and party cases, we use .map() to process data, just like in your original code.