Code Viewer

HTML, CSS & JavaScript Editor mit Live-Vorschau

Code-Editor

<!DOCTYPE html>
<html>
<head>
    <title>Meine Webseite</title>
</head>
<body>
    <div class="container">
        <h1>Willkommen zu meiner Webseite</h1>
        <p>Dies ist ein Beispieltext. <span id="demo">Klicke auf den Button</span>!</p>
        <button id="myButton">Klick mich!</button>
        <div id="output"></div>
    </div>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f5f5f5;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 20px;
}

p {
  color: #34495e;
  line-height: 1.6;
  margin-bottom: 20px;
}

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

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

#output {
  margin-top: 20px;
  padding: 15px;
  background-color: #ecf0f1;
  border-radius: 4px;
  min-height: 50px;
}

#demo {
  color: #e74c3c;
  font-weight: bold;
}

document.addEventListener('DOMContentLoaded', function() {
  const button = document.getElementById('myButton');
  const output = document.getElementById('output');
  let clickCount = 0;
  
  button.addEventListener('click', function() {
    clickCount++;
    output.innerHTML = `
      <h3>Button wurde ${clickCount} mal geklickt!</h3>
      <p>Aktuelles Datum: ${new Date().toLocaleString()}</p>
    `;
    
    const colors = ['#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9b59b6'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    button.style.backgroundColor = randomColor;
    
    output.style.transform = 'scale(1.05)';
    setTimeout(() => {
      output.style.transform = 'scale(1)';
    }, 200);
  });
  
  const demoText = document.getElementById('demo');
  demoText.addEventListener('mouseover', function() {
    this.textContent = 'Gut gemacht!';
  });
  
  demoText.addEventListener('mouseout', function() {
    this.textContent = 'Klicke auf den Button';
  });
});

Bereit

Jetzt starten

Welche Leistung benötigen Sie?

Fast fertig — Ihre Kontaktdaten

Vielen Dank für Ihre Anfrage!

Code Viewer

Code-Editor

Live-Vorschau

Vorschau (Vollbild)