script.js

document.addEventListener('DOMContentLoaded', function() {
    const keyboardLayout = [
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
    ];

    const keyboardContainer = document.getElementById('keyboard');
    const textInput = document.getElementById('textInput');
    const textToType = document.getElementById('textToType').innerText;
    let currentCharIndex = 0;

    function createKeyboard() {
        keyboardLayout.forEach(row => {
            row.forEach(key => {
                const keyButton = document.createElement('button');
                keyButton.innerText = key;
                keyButton.addEventListener('click', () => handleKeyPress(key));
                keyboardContainer.appendChild(keyButton);
            });
        });
    }

    function handleKeyPress(key) {
        if (key === textToType[currentCharIndex].toUpperCase()) {
            currentCharIndex++;
            textInput.value += key;
            if (currentCharIndex === textToType.length) {
                alert("You've typed the full text!");
            }
        }
    }

    createKeyboard();
});