Inspect Grid

Inspect_Grid.js

(function() {
    // Function to create a line element
    function createLine() {
        const line = document.createElement('div');
        line.style.position = 'fixed';
        line.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
        line.style.zIndex = '9999';
        line.style.pointerEvents = 'none';
        document.body.appendChild(line);
        return line;
    }

    // Create four lines: top, bottom, left, and right
    const topLine = createLine();
    const bottomLine = createLine();
    const leftLine = createLine();
    const rightLine = createLine();

    // Function to show lines
    function showLines(event) {
        const target = event.target;
        const rect = target.getBoundingClientRect();
        
        // Set top line styles
        topLine.style.top = `${rect.top}px`;
        topLine.style.left = '0';
        topLine.style.width = '100vw';
        topLine.style.height = '1px';
        topLine.style.display = 'block';

        // Set bottom line styles
        bottomLine.style.top = `${rect.bottom}px`;
        bottomLine.style.left = '0';
        bottomLine.style.width = '100vw';
        bottomLine.style.height = '1px';
        bottomLine.style.display = 'block';

        // Set left line styles
        leftLine.style.top = '0';
        leftLine.style.left = `${rect.left}px`;
        leftLine.style.width = '1px';
        leftLine.style.height = '100vh';
        leftLine.style.display = 'block';

        // Set right line styles
        rightLine.style.top = '0';
        rightLine.style.left = `${rect.right}px`;
        rightLine.style.width = '1px';
        rightLine.style.height = '100vh';
        rightLine.style.display = 'block';
    }

    // Function to hide lines
    function hideLines() {
        topLine.style.display = 'none';
        bottomLine.style.display = 'none';
        leftLine.style.display = 'none';
        rightLine.style.display = 'none';
    }

    // Add event listeners for mouseover and mouseout
    document.addEventListener('mouseover', showLines);
    document.addEventListener('mouseout', hideLines);
})();