Live code editor Professional Code Editor with Live Preview CodeCraft Pro Format Run HTML CSS JavaScript <!DOCTYPE html> <html> <head> <title>My Project</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; } .container { max-width: 800px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } h1 { color: #333; border-bottom: 2px solid #eee; padding-bottom: 10px; } button { background-color: #4CAF50; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; margin-top: 10px; } button:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h1>Welcome to CodeCraft Pro</h1> <p>Edit the HTML, CSS, and JavaScript in the editors on the left to see live changes here.</p> <button id="demoBtn">Click Me!</button> <div id="output" style="margin-top: 20px;"></div> </div> </body> </html> /* Add your CSS here */ .container { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } #demoBtn { transition: all 0.3s ease; } #demoBtn:hover { transform: scale(1.05); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } // Add your JavaScript here document.getElementById('demoBtn').addEventListener('click', function() { const output = document.getElementById('output'); output.innerHTML = '<p>Button clicked! Current time: ' + new Date().toLocaleTimeString() + '</p>'; // Create a colorful element const colorfulDiv = document.createElement('div'); colorfulDiv.style.padding = '10px'; colorfulDiv.style.marginTop = '10px'; colorfulDiv.style.backgroundColor = getRandomColor(); colorfulDiv.style.color = 'white'; colorfulDiv.style.borderRadius = '4px'; colorfulDiv.textContent = 'Dynamic content added!'; output.appendChild(colorfulDiv); }); function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } Live Preview HTML 0 0 Just now
