Dieses Beispiel zeigt eine typische kleine Web-App: Eingaben werden geprüft, als strukturierte Daten angezeigt und als JSON-Datei exportiert.
Ziel
Ein Projektformular erfasst Name, Sprache und Beschreibung. JavaScript nutzt die native Browser-Validierung und erzeugt anschließend eine herunterladbare JSON-Datei.
Startprompt
Erstelle ein barrierearmes HTML-Formular für Projektdaten. Validiere Pflichtfelder, zeige das Ergebnis als formatiertes JSON und biete einen Download ohne Backend an.
Vollständige Datei: index.html
<!doctype html><html lang="de"><meta charset="utf-8">
<title>Projekt-Generator</title>
<style>body{font:16px system-ui;max-width:720px;margin:2rem auto}label{display:block;margin:1rem 0}input,select,textarea{display:block;width:100%;padding:.6rem}pre{background:#111827;color:#d1fae5;padding:1rem;white-space:pre-wrap}</style>
<h1>Projekt-Generator</h1>
<form id="project">
<label>Name<input name="name" required minlength="3"></label>
<label>Sprache<select name="language"><option>JavaScript</option><option>Node.js</option><option>C++</option></select></label>
<label>Beschreibung<textarea name="description" required maxlength="240"></textarea></label>
<button>JSON erzeugen</button> <button type="button" id="download" disabled>Download</button>
</form><pre id="output">Noch keine Daten.</pre>
<script>
let current=null;
document.querySelector('#project').onsubmit=function(event){
event.preventDefault();
if(!this.reportValidity())return;
current=Object.fromEntries(new FormData(this));
document.querySelector('#output').textContent=JSON.stringify(current,null,2);
document.querySelector('#download').disabled=false;
};
document.querySelector('#download').onclick=function(){
const blob=new Blob([JSON.stringify(current,null,2)],{type:'application/json'});
const link=document.createElement('a');
link.href=URL.createObjectURL(blob);link.download='projekt.json';link.click();
URL.revokeObjectURL(link.href);
};
</script></html>Prüfen
- Leere Pflichtfelder absenden.
- Gültige Projektdaten eingeben.
- JSON herunterladen und in einem Editor öffnen.
Folgeprompts
- Import einer vorhandenen JSON-Datei
- Mehrere Projekte als Liste verwalten
- Schema-Version und Erstellungsdatum ergänzen