Engineer Lightweight Velocity: Vanilla JavaScript in a Framework Era

/*
 * Vanilla JavaScript: A Fundamental DOM Manipulation Example
 * Demonstrates direct interaction with the browser's Document Object Model (DOM).
 * This foundational skill underpins all framework interactions and remains crucial.
 */

// 1. Get a reference to an element by its ID
const myButton = document.getElementById('myButton');
const myParagraph = document.getElementById('myParagraph');

// 2. Define a function to handle the click event
function handleClick() {
    // Toggle a CSS class for visual feedback
    myParagraph.classList.toggle('highlight');

    // Change the text content
    if (myParagraph.textContent === 'Initial text.') {
        myParagraph.textContent = 'Vanilla JS is active!';
    } else {
        myParagraph.textContent = 'Initial text.';
    }

    // Log to console for debugging/observation
    console.log('Button clicked! Paragraph state updated.');
}

// 3. Attach the event listener to the button
if (myButton) {
    myButton.addEventListener('click', handleClick);
    console.log('Event listener attached to myButton.');
} else {
    console.error('Element with ID "myButton" not found.');
}

// Example HTML structure (for context, not part of the JS file itself):
// <button id="myButton">Click Me</button>
// <p id="myParagraph">Initial text.</p>
// <style>
// .highlight { background-color: yellow; font-weight: bold; }
// </style>

/*
 * Vanilla JavaScript: Simple Tab Component Example
 * Demonstrates building an isolated, lightweight UI component without a framework.
 * This pattern is ideal for small interactive elements on a larger static site,
 * or within a micro-frontend architecture.
 */

class TabManager {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        if (!this.container) {
            console.error(`Tab container with ID "${containerId}" not found.`);
            return;
        }
        this.tabs = this.container.querySelectorAll('[data-tab-target]');
        this.tabContents = this.container.querySelectorAll('[data-tab-content]');

        this.activateListeners();
        this.showInitialTab();
    }

    activateListeners() {
        this.tabs.forEach(tab => {
            tab.addEventListener('click', () => this.selectTab(tab));
        });
    }

    selectTab(selectedTab) {
        // Deactivate all current active tabs and contents
        this.tabs.forEach(tab => tab.classList.remove('active'));
        this.tabContents.forEach(content => content.classList.remove('active'));

        // Activate the clicked tab
        selectedTab.classList.add('active');

        // Activate the corresponding content
        const targetId = selectedTab.dataset.tabTarget;
        const targetContent = this.container.querySelector(targetId);
        if (targetContent) {
            targetContent.classList.add('active');
        }
    }

    showInitialTab() {
        // Find the first tab and activate it by default
        const initialTab = this.tabs[0];
        if (initialTab) {
            this.selectTab(initialTab);
        }
    }
}

// Initialize the tab manager once the DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    new TabManager('myTabComponent');
});

/* Example HTML structure (for context, not part of the JS file itself):

<div id="myTabComponent">
    <div class="tab-headers">
        <button class="tab-button" data-tab-target="#tab1-content">Tab 1</button>
        <button class="tab-button" data-tab-target="#tab2-content">Tab 2</button>
        <button class="tab-button" data-tab-target="#tab3-content">Tab 3</button>
    </div>
    <div class="tab-content-container">
        <div id="tab1-content" class="tab-content">Content for Tab 1</div>
        <div id="tab2-content" class="tab-content">Content for Tab 2</div>
        <div id="tab3-content" class="tab-content">Content for Tab 3</div>
    </div>
</div>

<style>
.tab-button { padding: 10px 15px; border: 1px solid #ccc; cursor: pointer; }
.tab-button.active { background-color: #eee; font-weight: bold; }
.tab-content { display: none; padding: 20px; border: 1px solid #eee; margin-top: -1px; }
.tab-content.active { display: block; }
</style>
*/