[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-5-dakikada-mini-js-projeleri-todo-saat-ve-slider":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},26331,"5 Dakikada Mini JS Projeleri: To‑Do, Saat ve Slider","Bu makale, 5 dakikada tamamlanabilecek üç mini JavaScript projesinin (To‑Do listesi, saat, slider) nasıl yapılacağını adım adım ve uygulamalı olarak açıklar.","\u003Ch2>Neden 5 dakikalık mini projeler?\u003C/h2>\n\u003Cp>Kısa süreli mini projeler, JavaScript öğrenirken kavramları (DOM, olay dinleyicileri, zamanlayıcılar) hızlıca uygulamaya geçirmenizi sağlar. Bu yazıda To‑Do listesi, canlı saat ve basit slider (resim döndürücü) için adım adım yönergeler bulacaksınız. Bu tür başlangıç projelerinin faydaları ve örnekleri için Patika.dev'in proje önerilerine göz atabilirsiniz: \u003Ca href=\"https://www.patika.dev/blog/frontend-becerilerinizi-gelistirecek-5-proje-ornegi\">Patika.dev — Frontend proje önerileri\u003C/a>. Ayrıca kişisel proje örnekleri ve ilham almak için farklı uygulama örneklerine göz atabilirsiniz: \u003Ca href=\"https://www.yusufsezer.com.tr/projeler/\">Yusuf SEZER — Projeler\u003C/a>.\u003C/p>\n\n\u003Ch3>Genel hazırlık\u003C/h3>\n\u003Cul>\n  \u003Cli>Gerekenler: Basit HTML, biraz CSS, temel JavaScript (getElementById, addEventListener, Date, setInterval).\u003C/li>\n  \u003Cli>Çalışma ortamı: Herhangi bir metin editörü ve modern bir tarayıcı yeterli.\u003C/li>\n  \u003Cli>Süre yönetimi: Her proje için amaç 5 dakikadır; örnekler başlangıç seviyesi olup hızlıca çalıştırılabilir.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch2>1) 5 Dakikada To‑Do Listesi\u003C/h2>\n\u003Ch4>Amaç\u003C/h4>\n\u003Cp>Kullanıcının görev girebileceği, listeleyebileceği ve hızlıca işaretleyebileceği basit bir To‑Do uygulaması oluşturmak.\u003C/p>\n\n\u003Ch4>Gereksinimler (basit HTML iskeleti)\u003C/h4>\n\u003Cp>Minimal HTML örneği (etiketler gösterim amaçlıdır):\u003C/p>\n\u003Cp>\u003Cstrong>HTML (örnek):\u003C/strong>\u003Cbr><input id=\"task\" placeholder=\"Yeni görev\" />\u003Cbr><button id=\"add\">Ekle</button>\u003Cbr><ul id=\"list\"></ul>\u003C/p>\n\n\u003Ch4>Adım adım (yaklaşık 5 dakika)\u003C/h4>\n\u003Col>\n  \u003Cli>HTML'yi oluşturun ve tarayıcıda açın.\u003C/li>\n  \u003Cli>JavaScript'te giriş ve liste elemanlarını seçin: \u003Cbr>\u003Cstrong>const input = document.getElementById('task');\u003C/strong> ve \u003Cstrong>const list = document.getElementById('list');\u003C/strong>\u003C/li>\n  \u003Cli>\"Ekle\" butonuna tıklandığında yeni <li> oluşturup içeriği ekleyin ve listeye ekleyin:\u003C/li>\n\u003C/ol>\n\u003Cp>\u003Cstrong>JavaScript (örnek):\u003C/strong>\u003Cbr>const addBtn = document.getElementById('add');\u003Cbr>addBtn.addEventListener('click', () => {\u003Cbr>  const text = input.value.trim();\u003Cbr>  if (!text) return; // boşsa çık\u003Cbr>  const li = document.createElement('li');\u003Cbr>  li.textContent = text;\u003Cbr>  list.appendChild(li);\u003Cbr>  input.value = '';\u003Cbr>});\u003C/p>\n\n\u003Ch4>Hızlı genişletmeler (1–10 dk)\u003C/h4>\n\u003Cul>\n  \u003Cli>Görevlerin yanına tamamlandı butonu veya checkbox ekleyin ve tamamlandığında stil değiştirin.\u003C/li>\n  \u003Cli>localStorage kullanarak sayfa yenilense bile görevleri saklayın: \u003Cstrong>localStorage.setItem\u003C/strong> ve \u003Cstrong>localStorage.getItem\u003C/strong>.\u003C/li>\n  \u003Cli>Silme ve düzenleme özellikleri ekleyin.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch2>2) 5 Dakikada Canlı Saat\u003C/h2>\n\u003Ch4>Amaç\u003C/h4>\n\u003Cp>Tarayıcıda gerçek zamanlı saat göstermek; JavaScript'in Date ve setInterval fonksiyonlarını öğrenmek için ideal.\u003C/p>\n\n\u003Ch4>Gereksinimler\u003C/h4>\n\u003Cp>Tek bir gösterge elemanı yeterli: <div id=\"clock\"></div>.\u003C/p>\n\n\u003Ch4>Adımlar\u003C/h4>\n\u003Col>\n  \u003Cli>HTML'de <div id=\"clock\"></div> ekleyin.\u003C/li>\n  \u003Cli>JavaScript'te bir fonksiyon yazın: şu anki zamanı al, <div> içine yaz.\u003C/li>\n  \u003Cli>setInterval ile fonksiyonu her saniye çağırın.\u003C/li>\n\u003C/ol>\n\u003Cp>\u003Cstrong>JavaScript (örnek):\u003C/strong>\u003Cbr>const clock = document.getElementById('clock');\u003Cbr>function updateClock() {\u003Cbr>  const now = new Date();\u003Cbr>  clock.textContent = now.toLocaleTimeString();\u003Cbr>}\u003Cbr>setInterval(updateClock, 1000);\u003Cbr>updateClock();\u003C/p>\n\n\u003Ch4>Geliştirme fikirleri\u003C/h4>\n\u003Cul>\n  \u003Cli>24 saat veya 12 saat formatı arasında geçiş ekleyin.\u003C/li>\n  \u003Cli>Tarihi de gösterin: \u003Cstrong>now.toLocaleDateString()\u003C/strong>.\u003C/li>\n  \u003Cli>CSS ile görünümü saat teması hâline getirin veya analog saat çizin (canvas öğrenme fırsatı).\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch2>3) 5 Dakikada Basit Slider (Resim Döndürücü)\u003C/h2>\n\u003Ch4>Amaç\u003C/h4>\n\u003Cp>Bir dizi resmi ileri/geri gösterebilen basit bir slider yapın; dizin ve stil manipülasyonu öğrenilir.\u003C/p>\n\n\u003Ch4>Gereksinimler (örnek HTML)\u003C/h4>\n\u003Cp>\u003Cstrong>HTML (örnek):\u003C/strong>\u003Cbr><div id=\"slider\">\u003Cbr>  <img src=\"img1.jpg\" id=\"slide\" />\u003Cbr>  <button id=\"prev\"><<<<<<></button>\u003Cbr>  <button id=\"next\">>>>>></button>\u003Cbr></div>\u003C/p>\n\n\u003Ch4>Adımlar\u003C/h4>\n\u003Col>\n  \u003Cli>Bir dizi resim URL'si oluşturun: \u003Cstrong>const images = ['img1.jpg','img2.jpg','img3.jpg'];\u003C/strong>\u003C/li>\n  \u003Cli>Geçerli indeks değişkeni oluşturun: \u003Cstrong>let i = 0;\u003C/strong>\u003C/li>\n  \u003Cli>next ve prev butonlarına tıklama olayları bağlayıp img src'sini değiştirin.\u003C/li>\n\u003C/ol>\n\u003Cp>\u003Cstrong>JavaScript (örnek):\u003C/strong>\u003Cbr>const images = ['img1.jpg','img2.jpg','img3.jpg'];\u003Cbr>let i = 0;\u003Cbr>const slide = document.getElementById('slide');\u003Cbr>function show(i) { slide.src = images[i]; }\u003Cbr>document.getElementById('next').addEventListener('click', () => { i = (i + 1) % images.length; show(i); });\u003Cbr>document.getElementById('prev').addEventListener('click', () => { i = (i - 1 + images.length) % images.length; show(i); });\u003Cbr>show(i);\u003C/p>\n\n\u003Ch4>Geliştirmeler\u003C/h4>\n\u003Cul>\n  \u003Cli>Otomatik oynatma için setInterval kullanın ve fareyle durdurma (hover) ekleyin.\u003C/li>\n  \u003Cli>Geçiş animasyonları için basit CSS geçişleri ekleyin.\u003C/li>\n  \u003Cli>Responsive yapmak için resimleri ve konteyneri esnek boyutlandırın.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch2>Test ve Hızlı Kontrol Listesi\u003C/h2>\n\u003Cul>\n  \u003Cli>Tarayıcı konsolunda hata (console) var mı kontrol edin.\u003C/li>\n  \u003Cli>Element ID'leri kodla eşleşiyor mu (büyük/küçük harf duyarlılığına dikkat).\u003C/li>\n  \u003Cli>Event listener'lar doğru öğelere bağlanmış mı?\u003C/li>\n  \u003Cli>LocalStorage varsa veriler doğru okunuyor/ayarılıyor mu?\u003C/li>\n  \u003Cli>Mobilde temel görünüm düzgün mü?\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Hataları Bulma (Hızlı Yöntemler)\u003C/h2>\n\u003Cul>\n  \u003Cli>console.log ile değişkenlerin değerlerini kontrol edin.\u003C/li>\n  \u003Cli>İlk önce HTML'de eksik etiket olup olmadığını kontrol edin.\u003C/li>\n  \u003Cli>Script dosyanızın HTML'de doğru sırada yüklendiğinden emin olun (örn. <body> sonunda veya DOMContentLoaded içinde çalıştırma).\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Genişletme ve Öğrenme Yolu\u003C/h2>\n\u003Cp>Bu mini projelerden sonra adım adım şunlara geçebilirsiniz: komponent tabanlı yapı (React veya benzeri), erişilebilirlik (keyboard navigation, ARIA), performans ve test yazımı. Kısa projeler öğrenmeyi hızlandırır; Patika.dev gibi rehberlerden proje fikirleri alabilirsiniz (\u003Ca href=\"https://www.patika.dev/blog/frontend-becerilerinizi-gelistirecek-5-proje-ornegi\">kaynak\u003C/a>).\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>Kaynaklar ve İleri Okuma\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://www.patika.dev/blog/frontend-becerilerinizi-gelistirecek-5-proje-ornegi\">Patika.dev — Frontend Becerilerinizi Geliştirecek 5 Proje Örneği\u003C/a> — Başlangıç projeleri için öneriler ve motivasyon.\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.yusufsezer.com.tr/projeler/\">Yusuf SEZER — Projeler\u003C/a> — Farklı JavaScript proje örnekleri ve kod parçacıkları.\u003C/li>\n  \u003Cli>\u003Ca href=\"https://medium.com/@sermedsefaa/10-dakikada-yapabilece%C4%9Finiz-javascript-uygulamas%C4%B1-426ab5c5d288\">10 Dakikada Yapabileceğiniz Javascript Uygulaması (Medium)\u003C/a> — Hızlı uygulama fikirleri.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch2>Sınırlamalar ve notlar\u003C/h2>\n\u003Cp>Buradaki örnekler öğretici ve minimal düzeydedir; üretim kullanımına geçmeden önce erişilebilirlik, hata yakalama ve uygun güvenlik kontrolleri eklenmelidir. Kod örnekleri basitleştirilmiştir — ortamınıza göre küçük uyarlamalar gerekebilir.\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>SSS\u003C/h2>\n\n\u003Ch3>Soru: Gerçekten bu projeler 5 dakikada tamamlanabilir mi?\u003C/h3>\n\u003Cp>Cevap: Temel işlevselliği (HTML + kısa JavaScript) kurmak genellikle 5 dakikayı alır. Stil, hata kontrolü ve genişletmeler daha fazla zaman gerektirebilir.\u003C/p>\n\n\u003Ch3>Soru: Hangi proje ile başlamalıyım?\u003C/h3>\n\u003Cp>Cevap: To‑Do listesi DOM ve olayları öğrettiği için iyi bir başlangıçtır. Saat projesi zamanlayıcıları anlamak, slider ise dizin yönetimi ve görsel değişiklikler için uygundur.\u003C/p>\n\n\u003Ch3>Soru: Yazdığım kod çalışmıyorsa nereden başlamalıyım?\u003C/h3>\n\u003Cp>Cevap: Tarayıcı konsolunu açın, console.log ile değişkenleri izleyin, element ID'lerinin doğru olduğundan emin olun ve script'in DOM yüklendikten sonra çalıştığını doğrulayın.\u003C/p>\n\n\u003Ch3>Soru: Bu projeleri genişletmek için ne öğrenmeliyim?\u003C/h3>\n\u003Cp>Cevap: HTML/CSS derinliği, ES6+ JavaScript (arrow function, const/let), localStorage, küçük testler (ör. jest), ve sonrasında bir frontend kütüphanesi (React, Vue) faydalı olacaktır.\u003C/p>\n","5 Dakikada Mini JS Projeleri — To‑Do, Saat ve Slider için Hı","5 dakikada oluşturabileceğiniz üç mini JavaScript projesi: To‑Do listesi, canlı saat ve basit slider. Adım adım yönergeler, test listesi ve genişletme fikirleri","Mini JS Projeleri, javascript mini proje, başlangıç projeleri, kısa js uygulama, mini proje örnekleri","5-dakikada-mini-js-projeleri-todo-saat-ve-slider","2026-04-09T19:15:49.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/a276bc7c1decf47b3c946aa4833300d7.jpg","/media/blog/a276bc7c1decf47b3c946aa4833300d7_thumb.jpg","/media/blog/a276bc7c1decf47b3c946aa4833300d7.webp","/media/blog/a276bc7c1decf47b3c946aa4833300d7_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,908,0,"5 dk okuma süresi","/blog/mini-js-projeleri/5-dakikada-mini-js-projeleri-todo-saat-ve-slider",[],["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/a276bc7c1decf47b3c946aa4833300d7.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/mini-js-projeleri/5-dakikada-mini-js-projeleri-todo-saat-ve-slider",{"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-mini-js-projeleri-todo-saat-ve-slider",["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]