history.js

const progressBody = document.getElementById('progress-body');

function displayProgress() {
    console.log('displayProgress called');
    try {
        if (!progressBody) {
            console.error('Progress table body not found');
            return;
        }
        const history = JSON.parse(localStorage.getItem('typingHistory')) || [];
        console.log('History data loaded:', history);
        progressBody.innerHTML = '';
        if (history.length === 0) {
            console.log('No history data available');
            progressBody.innerHTML = '<tr><td colspan="3">No history data available</td></tr>';
            return;
        }
        history.forEach((entry, index) => {
            console.log('Adding history entry:', entry);
            const tr = document.createElement('tr');
            tr.innerHTML = `<td>${new Date(entry.date).toLocaleString()}</td><td>${entry.wpm}</td><td>${entry.accuracy}%</td>`;
            progressBody.appendChild(tr);
        });
        console.log('Progress history updated, rows:', history.length);
    } catch (error) {
        console.error('Error displaying progress history:', error);
        if (progressBody) {
            progressBody.innerHTML = '<tr><td colspan="3">Error loading history</td></tr>';
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM fully loaded for history.js');
    if (!document.getElementById('progress-body')) {
        console.error('Progress body element not found on DOM load');
    } else {
        console.log('Progress body element found, ID:', document.getElementById('progress-body').id);
    }
    displayProgress();
});