[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-5-dakikalik-mini-js-projesi-basit-to-do-uygulamasi-ile-hizli-baslangic":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},34121,"5 Dakikalık Mini JS Projesi: Basit To-Do Uygulaması ile Hızlı Başlangıç","Bu makalede, 5 dakikalık Mini JS Projeleri kapsamında, \u003Cstrong>vanilla js proje\u003C/strong> olarak geliştirebileceğiniz basit bir \u003Cstrong>to-do uygulaması js\u003C/strong> örneğini adım adım ele alıyoruz. \u003Cstrong>Mini JS Projeleri\u003C/strong> ve \u003Cstrong>javascript mini projeler\u003C/strong> arayanlar için ideal bir rehber.","\u003Ch1>5 Dakikalık Mini JS Projesi: Basit To-Do Uygulaması\u003C/h1>\u003Cp>Günümüzde programlama öğrenmek isteyenler için \u003Cstrong>Mini JS Projeleri\u003C/strong> oldukça popüler hale gelmiştir. Özellikle \u003Cstrong>javascript mini projeler\u003C/strong> arasında yer alan basit uygulamalar, hem hızlı öğrenme hem de pratik yapma imkanı sunar. Bu yazıda, sadece 5 dakika içinde tamamlayabileceğiniz basit bir \u003Cstrong>to-do uygulaması js\u003C/strong> projesini adım adım inceleyeceğiz.\u003C/p>\u003Ch2>To-Do Uygulaması Nedir?\u003C/h2>\u003Cp>\u003Cem>To-Do Uygulaması\u003C/em>, kullanıcıların günlük yapacakları işleri listeleyip yönetebildiği basit ama etkili bir uygulama türüdür. Bu uygulama sayesinde kullanıcılar görevlerini ekleyebilir, tamamladıklarını işaretleyebilir ve gerekirse silebilir. Bu tür uygulamalar, programlama öğrenenler için \u003Cstrong>mini proje örnekleri\u003C/strong> arasında temel yapı taşlarından biridir.\u003C/p>\u003Ch2>Neden Vanilla JS Proje Tercih Edilmeli?\u003C/h2>\u003Cp>\u003Cstrong>Vanilla JS proje\u003C/strong> terimi, herhangi bir kütüphane veya framework kullanmadan sadece saf JavaScript ile yazılmış projeleri ifade eder. Bu yaklaşım, JavaScript'in temel prensiplerini anlamak ve uygulamak için en etkili yöntemlerden biridir. Ayrıca, herhangi bir dış bağımlılık olmadan çalıştığı için projeler daha hafif ve hızlıdır.\u003C/p>\u003Ch2>Proje İçin Gerekli Araçlar\u003C/h2>\u003Cul>\u003Cli>Basit bir metin editörü (Visual Studio Code, Sublime Text vb.)\u003C/li>\u003Cli>Modern bir web tarayıcısı (Google Chrome, Firefox vb.)\u003C/li>\u003Cli>Temel HTML, CSS ve JavaScript bilgisi\u003C/li>\u003C/ul>\u003Ch2>Adım Adım Basit To-Do Uygulaması\u003C/h2>\u003Ch3>1. HTML Yapısını Oluşturma\u003C/h3>\u003Cp>İlk olarak, uygulamanın temel yapısını oluşturmak için basit bir HTML dosyası yazacağız. Bu dosyada bir başlık, görev eklemek için bir input alanı ve görevlerin listeleneceği bir liste elementi yer alacak.\u003C/p>\u003Cpre>\u003Ccode>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"tr\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Basit To-Do Uygulaması&lt;/title&gt;\n&lt;/head&gt;\n&lt;body&gt;\n  &lt;h1&gt;Görev Listesi&lt;/h1&gt;\n  &lt;input type=\"text\" id=\"taskInput\" placeholder=\"Yeni görev ekle...\"&gt;\n  &lt;button id=\"addTaskBtn\"&gt;Ekle&lt;/button&gt;\n  &lt;ul id=\"taskList\"&gt;&lt;/ul&gt;\n&lt;/body&gt;\n&lt;/html&gt;\u003C/code>\u003C/pre>\u003Ch3>2. JavaScript ile İşlevsellik Katma\u003C/h3>\u003Cp>Şimdi, kullanıcıların görev ekleyebilmesi ve listeye yeni görevlerin eklenmesi için JavaScript kodlarını yazacağız. Ayrıca, görevlerin tamamlandığını işaretlemek için event listener ekleyeceğiz.\u003C/p>\u003Cpre>\u003Ccode>const taskInput = document.getElementById('taskInput');\nconst addTaskBtn = document.getElementById('addTaskBtn');\nconst taskList = document.getElementById('taskList');\n\naddTaskBtn.addEventListener('click', () =&gt; {\n  const taskText = taskInput.value.trim();\n  if(taskText !== '') {\n    const li = document.createElement('li');\n    li.textContent = taskText;\n    li.addEventListener('click', () =&gt; {\n      li.style.textDecoration = li.style.textDecoration === 'line-through' ? 'none' : 'line-through';\n    });\n    taskList.appendChild(li);\n    taskInput.value = '';\n  }\n});\u003C/code>\u003C/pre>\u003Ch3>3. Kullanıcı Deneyimini Artırmak İçin İpuçları\u003C/h3>\u003Cp>Bu basit uygulamayı daha kullanışlı hale getirmek için bazı ek özellikler ekleyebilirsiniz:\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>Görev Silme:\u003C/strong> Her görev için bir silme butonu ekleyerek görevlerin kolayca kaldırılmasını sağlayabilirsiniz.\u003C/li>\u003Cli>\u003Cstrong>Görevleri Kaydetme:\u003C/strong> LocalStorage kullanarak sayfa yenilense bile görevlerin kaybolmamasını sağlayabilirsiniz.\u003C/li>\u003Cli>\u003Cstrong>Stil Düzenlemeleri:\u003C/strong> CSS ile listeyi daha estetik ve kullanıcı dostu hale getirebilirsiniz.\u003C/li>\u003C/ul>\u003Ch2>Başlangıç Seviyesi Kod & Snippet Rehberi ile Daha Fazlasını Öğrenin\u003C/h2>\u003Cp>Bu tür \u003Cstrong>mini proje örnekleri\u003C/strong> ve \u003Cstrong>javascript mini projeler\u003C/strong> üzerinde çalışmak, programlamada pratik yapmanın en iyi yollarından biridir. Başlangıç Seviyesi Kod & Snippet Rehberi, yeni başlayanlar için özel olarak tasarlanmış kapsamlı kaynaklar ve örneklerle doludur. Eğer JavaScript öğrenmeye yeni başladıysanız veya bilginizi pekiştirmek istiyorsanız, bu rehber size büyük katkı sağlayacaktır.\u003C/p>\u003Ch2>Sonuç\u003C/h2>\u003Cp>5 dakikalık bu \u003Cstrong>vanilla js proje\u003C/strong> örneği ile basit bir \u003Cstrong>to-do uygulaması js\u003C/strong> geliştirdik. Bu tür \u003Cstrong>Mini JS Projeleri\u003C/strong> hem hızlı hem de etkili öğrenme deneyimi sunar. Kod yazarak öğrenmek isteyenler için bu tür küçük projeler, kavramları pekiştirmenin ve yeni beceriler kazanmanın mükemmel yoludur. 2026 yılında da programlama öğrenmeye devam eden herkes için bu yaklaşım geçerliliğini koruyacaktır.\u003C/p>","Yazılım Öğrenme Rehberi – Kolay Kod Örnekleri ve Etkili İpuçları","5 dakikada tamamlanabilen basit bir to-do uygulaması JS projesi. Mini JS Projeleri arasında hızlı ve etkili öğrenme için ideal örnek.","Mini JS Projeleri, javascript mini projeler, to do uygulamasi js, vanilla js proje, mini proje ornekleri","5-dakikalik-mini-js-projesi-basit-to-do-uygulamasi-ile-hizli-baslangic","2026-05-13T15:49:03.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/7103eb3a84335e2bc178e5e21a794b6b.jpg","/media/blog/7103eb3a84335e2bc178e5e21a794b6b_thumb.jpg","/media/blog/7103eb3a84335e2bc178e5e21a794b6b.webp","/media/blog/7103eb3a84335e2bc178e5e21a794b6b_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},3,549,0,"3 dk okuma süresi","/blog/mini-js-projeleri/5-dakikalik-mini-js-projesi-basit-to-do-uygulamasi-ile-hizli-baslangic",[],["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/7103eb3a84335e2bc178e5e21a794b6b.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/mini-js-projeleri/5-dakikalik-mini-js-projesi-basit-to-do-uygulamasi-ile-hizli-baslangic",{"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-mini-js-projesi-basit-to-do-uygulamasi-ile-hizli-baslangic",["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,112],{"@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":30,"name":17,"item":111},"https://kodogreniyorum.com/blog/mini-js-projeleri",{"@type":102,"position":113,"name":7,"item":65},4]