[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-5-dakikalik-js-mini-proje-basit-yapilacaklar-listesi-localstorage-ile":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},25929,"5 Dakikalık JS Mini Proje: Basit Yapılacaklar Listesi (localStorage ile)","Bu rehberde, 5 dakikada HTML, CSS ve JavaScript ile localStorage kullanan basit bir yapılacaklar listesi oluşturmayı öğreneceksiniz; görev ekleme, silme, tamamlamayı işaretleme ve sayfa yenilendiğinde veriyi koruma adımlarını bulacaksınız.","\u003Ch2>5 Dakikalık JS Mini Proje: Basit Yapılacaklar Listesi (localStorage ile)\u003C/h2>\n\u003Cp>Bu kısa rehberde, yalnızca HTML, biraz CSS ve JavaScript kullanarak localStorage ile kalıcı bir yapılacaklar (to-do) listesi nasıl oluşturulur adım adım gösterilecektir. Hedef: yaklaşık 5 dakika içinde çalışan bir mini proje elde etmek. Bu proje, Mini JS Projeleri arayışındaki başlangıç seviyesindeki geliştiriciler için uygundur ve localStorage kullanımını pratik olarak gösterir.\u003C/p>\n\n\u003Ch3>Gereksinimler\u003C/h3>\n\u003Cul>\n  \u003Cli>Temel HTML, CSS ve JavaScript bilgisi\u003C/li>\n  \u003Cli>Herhangi bir metin editörü (VS Code, Notepad++ vb.)\u003C/li>\n  \u003Cli>Modern bir tarayıcı (localStorage destekleyen)\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Ne yapacağız?\u003C/h3>\n\u003Cp>Kısa özet: basit bir arayüzde görev ekleyeceğiz, görevleri listede göstereceğiz, görevleri tamamlandı olarak işaretleyebilecek ve silebileceğiz. Tüm görevler tarayıcının localStorage alanına kaydedilecek; sayfa yenilense bile görevler korunacak. localStorage hakkında temel bilgiler ve örnekler için W3Schools'taki \u003Ca href=\"https://www.w3schools.com/js/js_project_todo.asp\">JavaScript To-Do List Projesi\u003C/a> rehberine bakabilirsiniz.\u003C/p>\n\n\u003Ch3>Hızlı adımlar\u003C/h3>\n\u003Col>\n  \u003Cli>Basit bir HTML iskeleti oluşturun.\u003C/li>\n  \u003Cli>Minimal stil (CSS) ekleyin — görünüm opsiyoneldir.\u003C/li>\n  \u003Cli>JavaScript ile görev ekleme, silme, tamamlama ve render fonksiyonlarını yazın.\u003C/li>\n  \u003Cli>tasks dizisini localStorage'a kaydedin ve sayfa yüklenince geri yükleyin.\u003C/li>\n  \u003Cli>Tarayıcıda test edin: görev ekleyin, sayfayı yenileyin, görevlerin korunup korunmadığını kontrol edin.\u003C/li>\n\u003C/ol>\n\n\u003Ch3>Adım 1 — HTML (ilk iskelet)\u003C/h3>\n\u003Cp>Aşağıdaki minimal HTML yapısını kullanın (burada gerçek &lt;html&gt; ya da &lt;body&gt; etiketleri sayfaya eklenmelidir; aşağıdaki sadece içerik iskeletini gösterir):\u003C/p>\n\u003Cp>&lt;div id=\"todo-app\"&gt;\u003Cbr>&lt;h1&gt;Yapılacaklar&lt;/h1&gt;\u003Cbr>&lt;input id=\"taskInput\" placeholder=\"Yeni görev...\"&gt;\u003Cbr>&lt;button id=\"addBtn\"&gt;Ekle&lt;/button&gt;\u003Cbr>&lt;ul id=\"taskList\"&gt;&lt;/ul&gt;\u003Cbr>&lt;/div&gt;\u003C/p>\n\n\u003Ch3>Adım 2 — Basit stil\u003C/h3>\n\u003Cp>Görünüm için kısa bir CSS eklemek isterseniz örnek:\u003C/p>\n\u003Cp>&lt;style&gt;\u003Cbr>  body { font-family: Arial, sans-serif; padding: 20px; }\u003Cbr>  #taskList li { margin: 8px 0; list-style: none; }\u003Cbr>  #taskList li.done { text-decoration: line-through; color: #888; }\u003Cbr>  #taskList button { margin-left: 10px; }\u003Cbr>&lt;/style&gt;\u003C/p>\n\n\u003Ch3>Adım 3 — JavaScript (localStorage ile)\u003C/h3>\n\u003Cp>Aşağıdaki JavaScript kodu, görevleri \u003Cstrong>localStorage\u003C/strong> kullanarak saklar ve sayfa yenilense bile görevler korunur. localStorage yalnızca string saklayabildiği için dizi/nesneleri \u003Ccode>JSON.stringify\u003C/code> ile kaydedip, \u003Ccode>JSON.parse\u003C/code> ile geri alıyoruz (ayrıntılar için kaynak: \u003Ca href=\"https://www.w3schools.com/js/js_project_todo.asp\">W3Schools To-Do Project\u003C/a>).\u003C/p>\n\u003Cp>&lt;script&gt;\u003Cbr>const taskInput = document.getElementById('taskInput');\u003Cbr>const addBtn = document.getElementById('addBtn');\u003Cbr>const taskList = document.getElementById('taskList');\u003Cbr>\u003Cbr>// localStorage'dan yükle veya boş dizi\u003Cbr>let tasks = JSON.parse(localStorage.getItem('tasks')) || [];\u003Cbr>\u003Cbr>function saveTasks() {\u003Cbr>  localStorage.setItem('tasks', JSON.stringify(tasks));\u003Cbr>}\u003Cbr>\u003Cbr>function renderTasks() {\u003Cbr>  taskList.innerHTML = '';\u003Cbr>  tasks.forEach((t, i) =&gt; {\u003Cbr>    const li = document.createElement('li');\u003Cbr>    li.textContent = t.text;\u003Cbr>    if (t.done) li.classList.add('done');\u003Cbr>    // tıklayınca tamamla/geri al\u003Cbr>    li.addEventListener('click', () =&gt; {\u003Cbr>      tasks[i].done = !tasks[i].done;\u003Cbr>      saveTasks();\u003Cbr>      renderTasks();\u003Cbr>    });\u003Cbr>    // silme butonu\u003Cbr>    const del = document.createElement('button');\u003Cbr>    del.textContent = 'Sil';\u003Cbr>    del.addEventListener('click', (e) =&gt; {\u003Cbr>      e.stopPropagation();\u003Cbr>      tasks.splice(i, 1);\u003Cbr>      saveTasks();\u003Cbr>      renderTasks();\u003Cbr>    });\u003Cbr>    li.appendChild(del);\u003Cbr>    taskList.appendChild(li);\u003Cbr>  });\u003Cbr>}\u003Cbr>\u003Cbr>addBtn.addEventListener('click', () =&gt; {\u003Cbr>  const text = taskInput.value.trim();\u003Cbr>  if (!text) return; // boşsa ekleme\u003Cbr>  tasks.push({ text, done: false });\u003Cbr>  saveTasks();\u003Cbr>  renderTasks();\u003Cbr>  taskInput.value = '';\u003Cbr>});\u003Cbr>\u003Cbr>// sayfa yüklenince listeyi göster\u003Cbr>renderTasks();\u003Cbr>&lt;/script&gt;\u003C/p>\n\n\u003Ch3>Kodun kısa açıklaması\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Cstrong>tasks\u003C/strong> dizisi görevleri tutar; her görev { text, done } formatındadır.\u003C/li>\n  \u003Cli>\u003Cstrong>saveTasks()\u003C/strong> fonksiyonu tasks dizisini JSON olarak localStorage'a kaydeder.\u003C/li>\n  \u003Cli>\u003Cstrong>renderTasks()\u003C/strong> DOM üzerinde görevleri çizer; tamamlanma ve silme için olay dinleyicileri ekler.\u003C/li>\n  \u003Cli>Sayfa her yüklendiğinde localStorage'dan görevler alınır ve ekrana yazdırılır.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Hızlı test checklist\u003C/h3>\n\u003Cul>\n  \u003Cli>Sayfayı açın, bir görev ekleyin.\u003C/li>\n  \u003Cli>Görevi tıklayarak tamamlandığını/geri alındığını kontrol edin.\u003C/li>\n  \u003Cli>Sil düğmesiyle görevi kaldırın.\u003C/li>\n  \u003Cli>Tarayıcıda sayfayı yenileyin — görevlerin kalıcı olduğunu doğrulayın.\u003C/li>\n  \u003Cli>Gelişmiş: Tarayıcınızın geliştirici araçlarında (Application &gt; Local Storage) 'tasks' anahtarını kontrol edin.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Geliştirme fikirleri (biraz daha ileri)\u003C/h3>\n\u003Cul>\n  \u003Cli>Görev düzenleme (edit): görev üzerine çift tıklayınca metni düzenleyin.\u003C/li>\n  \u003Cli>Filtreler: tüm, tamamlanan, tamamlanmayan şeklinde gösterim.\u003C/li>\n  \u003Cli>Clear completed: tamamlananları tek seferde temizleme düğmesi.\u003C/li>\n  \u003Cli>Sunucu senkronizasyonu: kullanıcı hesabı varsa görevleri bir sunucuya gönderip cihazlar arasında eşitleme.\u003C/li>\n  \u003Cli>Drag & drop ile sıralama (HTML5 Drag & Drop veya bir kütüphane kullanarak).\u003C/li>\n\u003C/ul>\n\n\u003Ch3>İpuçları ve sınırlamalar\u003C/h3>\n\u003Cul>\n  \u003Cli>localStorage tarayıcı başına çalışır; farklı cihazlarda otomatik olarak senkronize edilmez.\u003C/li>\n  \u003Cli>localStorage yalnızca string saklar; bu nedenle nesneleri JSON.stringify ile kaydedip JSON.parse ile alıyoruz.\u003C/li>\n  \u003Cli>Hassas veri (şifre, kişisel bilgiler) localStorage'da saklanmamalıdır; bu alanda güvenlik ihtiyaçları varsa sunucu tarafı çözümler düşünün.\u003C/li>\n  \u003Cli>Daha fazla bilgi ve örnekler için W3Schools'taki proje rehberine bakabilirsiniz: \u003Ca href=\"https://www.w3schools.com/js/js_project_todo.asp\">https://www.w3schools.com/js/js_project_todo.asp\u003C/a>.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\u003Cp>Bu mini proje, JavaScript ve localStorage kullanımını öğrenmek için hızlı ve pratiktir. Aşağıdaki SSS bölümünde sık sorulan kısa sorulara yanıtlar bulabilirsiniz.\u003C/p>","5 Dakikalık JS Mini Proje: Basit Yapılacaklar Listesi (local","Adım adım rehber: 5 dakikada HTML, CSS ve JavaScript kullanarak localStorage ile kalıcı bir yapılacaklar listesi oluşturun. Kod örnekleri ve test checklist'iyle","Mini JS Projeleri, mini proje, to-do list, localStorage, adım adım proje, javascript mini projeler","5-dakikalik-js-mini-proje-basit-yapilacaklar-listesi-localstorage-ile","2026-04-08T18:50:26.000Z",{"id":16,"title":17,"slug":18},207,"Mini JS Projeleri","mini-js-projeleri",{"id":20,"name":21,"nickname":22,"slug":23},92,"Burak Demirtaş","CodeMentor","burak-demirtas","/media/blog/661de407479ace6569b896adf97464e3.jpg","/media/blog/661de407479ace6569b896adf97464e3_thumb.jpg","/media/blog/661de407479ace6569b896adf97464e3.webp","/media/blog/661de407479ace6569b896adf97464e3_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,682,0,"4 dk okuma süresi","/blog/mini-js-projeleri/5-dakikalik-js-mini-proje-basit-yapilacaklar-listesi-localstorage-ile",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/661de407479ace6569b896adf97464e3.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/mini-js-projeleri/5-dakikalik-js-mini-proje-basit-yapilacaklar-listesi-localstorage-ile",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/mini-js-projeleri/5-dakikalik-js-mini-proje-basit-yapilacaklar-listesi-localstorage-ile",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/burak-demirtas",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,113],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":111,"name":17,"item":112},3,"https://kodogreniyorum.com/blog/mini-js-projeleri",{"@type":102,"position":30,"name":7,"item":65}]