HTML Code to JSON Converter App Using HTML, CSS, and JavaScript

const htmlInput = document.getElementById('htmlInput');
const jsonOutput = document.getElementById('jsonOutput');

// Function to convert table data into JSON
const convertToJson = () => {
    const htmlCode = htmlInput.value;
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlCode, 'text/html');
    const table = doc.querySelector('table');

    if (table) {
        const jsonData = extractTableData(table);
        if (jsonData) {
            const jsonString = JSON.stringify(jsonData, null, 2);
            jsonOutput.innerHTML = jsonString.replace(/, /g, ',<br>&nbsp;&nbsp;');
            // Formatting JSON for readability
        } else {
            jsonOutput.innerText = 'Table is missing some data.';
        }
    } else {
        jsonOutput.innerText = 'No table present in the given code.';
    }
};

// Function to extract table data and convert it to JSON format
const extractTableData = (table) => {
    const data = [];
    const headers = [];

    const headerCells = table.rows[0].querySelectorAll('th');
    for (const cell of headerCells) {
        headers.push(cell.innerText.trim());
    }

    for (let i = 1; i < table.rows.length; i++) {
        const tableRow = table.rows[i];
        const rowData = {};

        for (let j = 0; j < tableRow.cells.length; j++) {
            const cell = tableRow.cells[j];
            rowData[headers[j]] = cell.innerText.trim();
        }

        if (Object.values(rowData).some(value => value !== "")) {
            data.push(rowData);
        }
    }

    return headers.length === 0 || data.length === 0 ? null : data;
};

// Function to clear user input and output
const clearFields = () => {
    htmlInput.value = '';
    jsonOutput.innerHTML = '';
};