// Sample JavaScript functions for the web page

function showMessage() {
    const output = document.getElementById('output');
    output.innerHTML = '<p><strong>Hello from JavaScript!</strong> This message was generated by the external script file.</p>';
}

function changeColor() {
    const output = document.getElementById('output');
    const colors = ['#e3f2fd', '#f3e5f5', '#e8f5e8', '#fff3e0', '#fce4ec'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];

    output.style.backgroundColor = randomColor;
    output.innerHTML = '<p>Background color changed! The new color is: <strong>' + randomColor + '</strong></p>';
}

function showDateTime() {
    const output = document.getElementById('output');
    const now = new Date();
    const dateTimeString = now.toLocaleString();

    output.innerHTML = '<p>Current date and time: <strong>' + dateTimeString + '</strong></p>';
}

// Add event listener for when the page loads
document.addEventListener('DOMContentLoaded', function() {
    console.log('JavaScript file loaded successfully!');

    // You can add any initialization code here
    const container = document.querySelector('.container');
    if (container) {
        container.addEventListener('click', function(event) {
            if (event.target.classList.contains('button')) {
                console.log('Button clicked:', event.target.textContent);
            }
        });
    }
});