Materi
Roadmap
Proyek
Sertifikat
Skillance Code Lab
Jalankan »
Skillance Code Lab Editor
Editor
Hasil
Split
Editor Kode Sumber
Tekan
Ctrl + Enter
untuk Menjalankan
<!DOCTYPE html> <html> <head> <style> body { font-family: sans-serif; padding: 20px; } .todo-item { padding: 8px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; } </style> </head> <body> <h3>Contoh Aplikasi: Daftar Tugas Mini (To-Do)</h3> <input type="text" id="tugasBaru" placeholder="Tugas baru..." style="padding:8px; width:200px;"> <button onclick="tambahTugas()" style="padding:8px 15px; cursor:pointer;">Tambah</button> <div id="listTugas" style="max-width:320px; margin-top:15px;"></div> <script> function tambahTugas() { const input = document.getElementById('tugasBaru'); if (!input.value.trim()) return; const list = document.getElementById('listTugas'); const div = document.createElement('div'); div.className = 'todo-item'; div.innerHTML = '<span>' + input.value + '</span> <button onclick="this.parentElement.remove()" style="color:red; border:none; background:none; cursor:pointer;">×</button>'; list.appendChild(div); input.value = ''; } </script> </body> </html>
Hasil Tampilan (Browser Preview)
Muat Ulang