live HTML editor

Editor

<!DOCTYPE html>
			<html lang="en">
			<head>
			    <meta charset="UTF-8">
			    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			    <title>Live HTML Editor</title>
			    <style>
				body {
				    font-family: Arial, sans-serif;
				    background-color: #f0f0f0;
				    margin: 0;
				    padding: 20px;
				}
				.container {
				    max-width: 600px;
				    margin: 0 auto;
				    background-color: #fff;
				    padding: 20px;
				    border-radius: 8px;
				    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				}
				h1 {
				    color: #007BFF;
				    text-align: center;
				}
				p {
				    text-align: center;
				}
				button {
				    padding: 10px 20px;
				    cursor: pointer;
				    background-color: #007BFF;
				    color: #fff;
				    border: none;
				    border-radius: 4px;
				    transition: background-color 0.3s;
				}
				button:hover {
				    background-color: #0056b3;
				}
			    </style>
			</head>
			<body>
			    <div class="container">
				<h1>Live HTML Editor!</h1>
				<p>Clique em "Desafios" para treinar html</p>
				<button onclick="changeColor()">Clique para mudar a cor de fundo</button>
			    </div>

function getRandomColor() {
				const letters = '0123456789ABCDEF';
				let color = '#';
				for (let i = 0; i < 6; i++) {
				  color += letters[Math.floor(Math.random() * 16)];
				}
				return color;
			      }
			    </script>
			</body>
			</html>

Editor

Preview