[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-5-dakikada-yapilir-3-hizli-javascript-mini-proje-adim-adim":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},32919,"5 dakikada yapılır: 3 hızlı JavaScript mini proje (adım adım)","Bu makalede, HTML ve CSS ile birlikte kısa sürede yapılabilecek üç JavaScript mini projesi (Yaş Hesaplayıcı, Görev Listesi, Kullanıcı Profil Kartı) adım adım gösterilir. Her proje için gerekli HTML yapısı, temel JavaScript mantığı ve hızlı genişletme önerileri yer almaktadır.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>Yeni başlayan biriyseniz veya hızlı bir pratik turu yapmak istiyorsanız, kısa süre içinde tamamlanıp fayda sağlayan mini projeler en iyi yoludur. Bu yazıda her biri yaklaşık 5 dakikada yapılabilecek üç mini JavaScript projesi sunuyorum: Yaş Hesaplayıcı, Görev Listesi ve Kullanıcı Profil Kartı. Temel amaç DOM manipülasyonu, olay dinleyicileri ve basit veri kontrolü gibi kavramları uygulamalı öğrenmektir.\u003C/p>\n\n\u003Ch2>Hazırlık — Gerekenler\u003C/h2>\n\u003Cul>\n  \u003Cli>Temel bir metin editörü (VS Code, Notepad++ veya basit Notepad).\u003C/li>\n  \u003Cli>Modern bir web tarayıcısı (Chrome, Firefox veya Edge).\u003C/li>\n  \u003Cli>Basit HTML dosyası oluşturma bilgisi. Alternatif olarak \u003Ca href=\"https://codepen.io/\" target=\"_blank\">CodePen\u003C/a> veya \u003Ca href=\"https://jsfiddle.net/\" target=\"_blank\">JSFiddle\u003C/a> gibi çevrimiçi ortamlar kullanılabilir.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Neden bu üç proje?\u003C/h2>\n\u003Cp>Bu projeler, kısa sürede tamamlanabilecek şekilde seçildi ve her biri farklı temel beceriyi pekiştirir: kullanıcı girdisi ve tarih işlemleri (Yaş Hesaplayıcı), DOM üzerinde liste yönetimi ve olaylar (Görev Listesi), ve veri gösterimi ile basit düzenleme etkileşimleri (Profil Kartı). Daha fazla örnek ve ilham için MasterJS ve topluluk projelerine bakabilirsiniz: \u003Ca href=\"https://masterjs-three.vercel.app/\" target=\"_blank\">MasterJS\u003C/a> ve \u003Ca href=\"https://parve5h.github.io/js-mini-projects/\" target=\"_blank\">Parve5h — JavaScript Mini Projects\u003C/a>.\u003C/p>\n\n\u003Ch2>1) Yaş Hesaplayıcı — Yaklaşık 5 dakika\u003C/h2>\n\u003Cp>Ne yapar: Kullanıcının doğum yılı girildiğinde güncel yaşını hesaplar. Hangi kavramlar uygulanır: DOM erişimi, kullanıcı girdisi okuma, tarih işlemleri ve basit doğrulama.\u003C/p>\n\n\u003Col>\n  \u003Cli>HTML oluşturun. Örnek yapı (index.html içine):\u003C/li>\n\u003C/ol>\n\u003Cp><input id=\"birth\" type=\"number\" placeholder=\"Doğum yılınızı girin (ör. 1990)\">\u003Cbr><button id=\"calc\">Hesapla</button>\u003Cbr><p id=\"result\"></p>\u003C/p>\n\n\u003Col start=\"2\">\n  \u003Cli>JavaScript ekleyin (aynı dosyada <script> içinde veya ayrı bir .js dosyasında):\u003C/li>\n\u003C/ol>\n\u003Cp>document.getElementById('calc').addEventListener('click', function() {\u003Cbr>  const y = Number(document.getElementById('birth').value);\u003Cbr>  const now = new Date().getFullYear();\u003Cbr>  if (!y || y > now) {\u003Cbr>    document.getElementById('result').textContent = 'Lütfen geçerli bir yıl girin.';\u003Cbr>    return;\u003Cbr>  }\u003Cbr>  document.getElementById('result').textContent = 'Yaşınız: ' + (now - y);\u003Cbr>});\u003C/p>\n\n\u003Cp>Açıklama ve ipuçları:\u003C/p>\n\u003Cul>\n  \u003Cli>new Date().getFullYear() ile şu anki yılı alıyoruz.\u003C/li>\n  \u003Cli>Girilen değeri Number() ile sayıya çevirin ve basit doğrulama yapın (boş veya gelecekteki yıl olmasın).\u003C/li>\n  \u003Cli>Genişletme fikirleri: doğum tarihini (gün/ay/yıl) alıp daha hassas yaş hesaplaması yapmak veya sonuçları yerel depolamaya (localStorage) kaydetmek.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>2) Görev Listesi (To‑Do) — Yaklaşık 5 dakika\u003C/h2>\n\u003Cp>Ne yapar: Yeni görev ekleme, görevleri tamamlandı olarak işaretleme ve çift tıklama ile silme. Hangi kavramlar uygulanır: element oluşturma, olay dinleyicileri, DOM güncelleme.\u003C/p>\n\n\u003Col>\n  \u003Cli>Basit HTML:\u003C/li>\n\u003C/ol>\n\u003Cp><input id=\"task\" placeholder=\"Yeni görev\">\u003Cbr><button id=\"add\">Ekle</button>\u003Cbr><ul id=\"list\"></ul>\u003C/p>\n\n\u003Col start=\"2\">\n  \u003Cli>JavaScript (ekleme, tamamlama, silme):\u003C/li>\n\u003C/ol>\n\u003Cp>document.getElementById('add').addEventListener('click', function() {\u003Cbr>  const val = document.getElementById('task').value.trim();\u003Cbr>  if (!val) return; // boşsa ekleme\u003Cbr>  const li = document.createElement('li');\u003Cbr>  li.textContent = val;\u003Cbr>  // tek tıklama: tamamla/geri al\u003Cbr>  li.addEventListener('click', function() {\u003Cbr>    this.style.textDecoration = this.style.textDecoration === 'line-through' ? 'none' : 'line-through';\u003Cbr>  });\u003Cbr>  // çift tıklama: sil\u003Cbr>  li.addEventListener('dblclick', function() { this.remove(); });\u003Cbr>  document.getElementById('list').appendChild(li);\u003Cbr>  document.getElementById('task').value = '';\u003Cbr>});\u003C/p>\n\n\u003Cp>Notlar ve geliştirmeler:\u003C/p>\n\u003Cul>\n  \u003Cli>Bu basit örnek, olayları ve DOM oluşturmayı gösterir. Görsel geri bildirim için CSS ile tamamlanmış öğelere başka bir sınıf ekleyebilirsiniz.\u003C/li>\n  \u003Cli>Görevleri tarayıcı kapandıktan sonra saklamak için localStorage kullanılabilir; her eklemede listeden JSON oluşturup kaydetmek yeterlidir.\u003C/li>\n  \u003Cli>Daha büyük uygulamalarda olay delegasyonu kullanmak performans ve yönetim açısından faydalıdır.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>3) Kullanıcı Profil Kartı — Yaklaşık 5 dakika\u003C/h2>\n\u003Cp>Ne yapar: Basit bir profil kartı oluşturur; isim, avatar ve kısa açıklama gösterir. Hangi kavramlar uygulanır: DOM güncelleme, objeden veri okuma, kullanıcı etkileşimi (prompt ile düzenleme).\u003C/p>\n\n\u003Col>\n  \u003Cli>HTML iskeleti:\u003C/li>\n\u003C/ol>\n\u003Cp><div id=\"card\">\u003Cbr>  <img id=\"avatar\" src=\"https://via.placeholder.com/80\" alt=\"avatar\">\u003Cbr>  <h3 id=\"name\">İsim</h3>\u003Cbr>  <p id=\"bio\">Kısa açıklama</p>\u003Cbr>  <button id=\"edit\">Düzenle</button>\u003Cbr></div>\u003C/p>\n\n\u003Col start=\"2\">\n  \u003Cli>JavaScript ile veri bağlayın ve düzenlemeyi açın:\u003C/li>\n\u003C/ol>\n\u003Cp>const user = { name: 'Ayşe Yılmaz', bio: 'Frontend geliştirici', avatar: 'https://via.placeholder.com/80' };\u003Cbr>document.getElementById('name').textContent = user.name;\u003Cbr>document.getElementById('bio').textContent = user.bio;\u003Cbr>document.getElementById('avatar').src = user.avatar;\u003Cbr>document.getElementById('edit').addEventListener('click', function() {\u003Cbr>  const newName = prompt('Yeni isim', user.name);\u003Cbr>  if (newName) { user.name = newName; document.getElementById('name').textContent = user.name; }\u003Cbr>});\u003C/p>\n\n\u003Cp>Geliştirme önerileri:\u003C/p>\n\u003Cul>\n  \u003Cli>Profili form ile düzenleyip değişiklikleri localStorage veya bir API’ye gönderebilirsiniz.\u003C/li>\n  \u003Cli>Rastgele profil verisi çekmek için \u003Ca href=\"https://randomuser.me/\" target=\"_blank\">RandomUser API\u003C/a> gibi servisleri deneyebilirsiniz.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Hızlı ipuçları ve sık karşılaşılan durumlar\u003C/h2>\n\u003Cul>\n  \u003Cli>Tarayıcı konsolunu (Developer Tools) kullanarak hataları hızlıca bulun. console.log() ile değişkenleri kontrol edin.\u003C/li>\n  \u003Cli>Kullanıcı girdilerini her zaman doğrulayın (ör. sayı bekliyorsanız Number() ile dönüştürme ve NaN kontrolü yapın).\u003C/li>\n  \u003Cli>Kodunuzu küçükçe adımlara bölün: önce HTML iskelet, sonra tek bir işlevi çalışan hale getirin, ardından genişletin.\u003C/li>\n  \u003Cli>Daha fazla mini proje örneği ve görsel yönlendirme için MasterJS ve diğer topluluk koleksiyonlarına bakabilirsiniz: \u003Ca href=\"https://javascript-mini-projects.netlify.app/\" target=\"_blank\">Vanilla JavaScript Projects\u003C/a>.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Nasıl hızlıca denersiniz?\u003C/h2>\n\u003Cp>1) index.html oluşturun ve yukarıdaki HTML parçalarını yapıştırın.\u003Cbr>2) <script> içinde JavaScript kodunu ekleyin veya ayrı bir .js dosyası oluşturup bağlayın.\u003Cbr>3) Dosyayı çift tıklayıp tarayıcıda açın veya CodePen/JSFiddle’de canlı deneyin. Kod üzerinde değişiklik yapıp anında sonucu görebilirsiniz.\u003C/p>\n\n\u003Ch2>Kaynaklar ve daha fazla örnek\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://masterjs-three.vercel.app/\" target=\"_blank\">MasterJS — Proje örnekleri ve açıklamalar\u003C/a> — temel kavramları uygulamalı gösterir.\u003C/li>\n  \u003Cli>\u003Ca href=\"https://parve5h.github.io/js-mini-projects/\" target=\"_blank\">JavaScript Mini Projects — Parve5h\u003C/a> — çeşitli mini proje örnekleri içerir.\u003C/li>\n  \u003Cli>\u003Ca href=\"https://javascript-mini-projects.netlify.app/\" target=\"_blank\">Vanilla JavaScript Projects\u003C/a> — HTML/CSS/JS ile yapılmış çok sayıda mini proje.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Sonuç\u003C/h2>\n\u003Cp>Bu üç mini proje, JavaScript’in temel kavramlarını kısa sürede uygulamalı öğrenmenizi sağlar. Her proje basit tutulduğundan genişletme seçenekleri çoktur: veri kalıcılığı, daha iyi UX, API entegrasyonu gibi adımlar ilerlediğinizde ekleyebileceğiniz doğal geliştirmelerdir. Uygulama örnekleri ve daha fazla ilham için yukarıdaki kaynaklara göz atabilirsiniz.\u003C/p>\n","5 dakikada yapılır: 3 hızlı JavaScript mini proje — Adım adı","Yeni başlayanlar için 5 dakikada tamamlanabilecek üç hızlı JavaScript mini proje: Yaş Hesaplayıcı, Görev Listesi ve Kullanıcı Profil Kartı. Adım adım talimatlar","Mini JS Projeleri, mini projeler javascript, javascript başlangıç kodları, pratik projeler, javascript mini proje örnekleri","5-dakikada-yapilir-3-hizli-javascript-mini-proje-adim-adim","2026-05-08T16:45:27.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/e4017873a4d4e0050cca693d077cd17b.jpg","/media/blog/e4017873a4d4e0050cca693d077cd17b_thumb.jpg","/media/blog/e4017873a4d4e0050cca693d077cd17b.webp","/media/blog/e4017873a4d4e0050cca693d077cd17b_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,852,0,"5 dk okuma süresi","/blog/mini-js-projeleri/5-dakikada-yapilir-3-hizli-javascript-mini-proje-adim-adim",[],["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/e4017873a4d4e0050cca693d077cd17b.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/mini-js-projeleri/5-dakikada-yapilir-3-hizli-javascript-mini-proje-adim-adim",{"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-dakikada-yapilir-3-hizli-javascript-mini-proje-adim-adim",["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":114,"name":7,"item":65},4]