Dieses Vibe-Coding-Beispiel baut eine kleine Aufgabenliste, die ohne Framework direkt im Browser läuft und ihre Daten lokal speichert.
Ziel des Beispiels
- Aufgaben hinzufügen und abhaken
- Einträge löschen
- Zustand mit
localStoragebehalten
Startprompt
Erstelle eine zugängliche To-do-App in einer einzigen HTML-Datei. Verwende semantisches HTML, modernes CSS und Vanilla JavaScript. Speichere die Aufgaben als JSON in localStorage.
Vollständige Datei: index.html
<!doctype html>
<html lang="de">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Meine Aufgaben</title>
<style>
body{font:16px system-ui;max-width:680px;margin:3rem auto;padding:0 1rem}
form{display:flex;gap:.5rem} input{flex:1;padding:.7rem}
li{display:flex;gap:.6rem;align-items:center;padding:.6rem 0;border-bottom:1px solid #ddd}
li span{flex:1}.done{text-decoration:line-through;opacity:.55}
</style>
<h1>Meine Aufgaben</h1>
<form id="form"><input id="task" required placeholder="Neue Aufgabe"><button>Hinzufügen</button></form>
<ul id="list"></ul>
<script>
const key='occdn-todos';
let todos=JSON.parse(localStorage.getItem(key)||'[]');
const list=document.querySelector('#list');
function save(){localStorage.setItem(key,JSON.stringify(todos));render()}
function render(){
list.innerHTML='';
todos.forEach(function(todo,index){
const li=document.createElement('li');
li.innerHTML='<input type="checkbox"><span></span><button>Löschen</button>';
li.querySelector('input').checked=todo.done;
li.querySelector('span').textContent=todo.text;
li.querySelector('span').className=todo.done?'done':'';
li.querySelector('input').onchange=function(){todo.done=this.checked;save()};
li.querySelector('button').onclick=function(){todos.splice(index,1);save()};
list.append(li);
});
}
document.querySelector('#form').onsubmit=function(event){
event.preventDefault();
const input=document.querySelector('#task');
todos.push({text:input.value.trim(),done:false});
input.value='';save();
};
render();
</script></html>Ausführen
- Datei als
index.htmlspeichern. - Im Browser öffnen.
- Seite neu laden und prüfen, ob die Aufgaben erhalten bleiben.
Sinnvolle Folgeprompts
- Filter für offen und erledigt ergänzen
- Bearbeiten per Doppelklick hinzufügen
- Daten als JSON exportieren und importieren