Posts
Live code editor 2
.png){kind=small}
index.html × style.css × script.js × + <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Project</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is a live code editor with modern UI.</p>
<script src="script.js"></script>
</body>
</html> body {
font-family: 'Inter', system-ui, sans-serif;
line-height: 1.6;
margin: 0;
padding: 2rem;
color: #333;
background: #f9f9f9;
}
h1 {
color: #2c3e50;
font-weight: 700;
}
p {
max-width: 60ch;
} // DOM Content Loaded
document.addEventListener('DOMContentLoaded', () => {
const heading = document.querySelector('h1');
// Typewriter effect
let i = 0;
const text = 'Hello Worl…