Live Code Editor with PDF Export

HTML .html

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Welcome to the Live Editor</h1>
    <p>This is a paragraph of text. Edit the code to see changes.</p>
    <button id="demo-button">Click Me!</button>
    <div id="output"></div>
</body>
</html>

CSS .css

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
    color: #333;
}

h1 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

p {
    margin-bottom: 15px;
}

#demo-button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

#demo-button:hover {
    background-color: #2980b9;
}

#output {
    margin-top: 20px;
    padding: 10px;
    background-color: white;
    border-left: 4px solid #2ecc71;
}

JavaScript .js

document.getElementById('demo-button').addEventListener('click', function() {
    const output = document.getElementById('output');
    const now = new Date();
    output.innerHTML = '<p>Button clicked at: ' + now.toLocaleTimeString() + '</p>';
    
    // Create a new element
    const newElement = document.createElement('div');
    newElement.textContent = 'This is a new element added by JavaScript!';
    newElement.style.marginTop = '10px';
    newElement.style.padding = '10px';
    newElement.style.backgroundColor = '#e8f4fc';
    newElement.style.border = '1px dashed #3498db';
    output.appendChild(newElement);
});