[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-5-dakikada-mini-js-projeleri-adim-adim-5-basit-uygulama":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},41019,"5 Dakikada Mini JS Projeleri: Adım Adım 5 Basit Uygulama","Bu rehberde her biri yaklaşık 5 dakikada tamamlanabilen beş küçük JavaScript projesini adım adım gösteriyorum; her proje için gerekli dosyalar, temel kod parçacıkları ve geliştirme önerileri bulunuyor.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>Mini projeler, JavaScript öğrenirken hızlı geri bildirim almanızı sağlar ve temel kavramları pratik olarak tekrarlamanıza yardımcı olur. Bu yazıda her biri yaklaşık 5 dakikada tamamlanabilecek beş mini proje bulacaksınız: renk değiştirici, palindrom kontrolü, rastgele alıntı üretici, kronometre ve kalıcı yapılacaklar listesi. Bu tür kısa uygulamalar, \u003Cstrong>DOM manipülasyonu\u003C/strong>, \u003Cstrong>olay işleme\u003C/strong> ve temel API kullanımı konularını pratikte görmenizi sağlar; benzer örnek koleksiyonları için \u003Ca href=\"https://www.5minsofcode.com/\">5minsofcode\u003C/a> ve eğitim önerilerini \u003Ca href=\"https://jetacademy.az/en/news/5-beginner-friendly-javascript-projects-you-can-build-in-your-first-month-of-coding\">JET Academy\u003C/a> üzerinde bulabilirsiniz. Ayrıca adım adım video anlatımlar için bir eğitim kaynağı: \u003Ca href=\"https://www.classcentral.com/course/youtube-5-mini-javascript-projects-for-beginners-282635\">Class Central video\u003C/a>.\u003C/p>\n\n\u003Ch3>Hızlı Başlangıç — Gerekli Araçlar\u003C/h3>\n\u003Cul>\n  \u003Cli>Basit bir metin editörü veya IDE (ör. Visual Studio Code).\u003C/li>\n  \u003Cli>Modern bir tarayıcı (Chrome, Firefox, Edge vb.).\u003C/li>\n  \u003Cli>Proje dizini: \u003Cem>index.html\u003C/em> ve \u003Cem>script.js\u003C/em> dosyaları.\u003C/li>\n  \u003Cli>Canlı önizleme için Live Server eklentisi (isteğe bağlı).\u003C/li>\n\u003C/ul>\n\u003Cp>Her proje için kısa bir HTML iskeleti ve bir adet JavaScript dosyası yeterlidir. Aşağıdaki projelerde temel DOSYALAR, adım adım yapılacaklar ve basit kod parçacıkları yer alıyor.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>1) Renk Değiştirici (Color Switcher)\u003C/h3>\n\u003Cp>Amaç: Bir butona tıklandığında sayfanın arka plan rengini değiştirmek. Bu proje DOM seçimi ve olay dinleyici eklemeyi öğretiyor.\u003C/p>\n\u003Col>\n  \u003Cli>index.html içinde bir buton oluşturun.\u003C/li>\n  \u003Cli>script.js içinde butonu seçin ve \u003Ccode>click\u003C/code> olayına bir fonksiyon bağlayın.\u003C/li>\n  \u003Cli>Renkleri bir dizide tutup rastgele bir eleman seçin veya sırayla ilerletin.\u003C/li>\n\u003C/ol>\n\u003Cp>Basit HTML iskeleti (index.html):\u003Cbr>\n<!DOCTYPE html>\u003Cbr>\n<html lang=\"tr\">\u003Cbr>\n<head><meta charset=\"utf-8\"><title>Renk Değiştirici</title></head>\u003Cbr>\n<body>\u003Cbr>\n  <button id=\"colorBtn\">Rengi Değiştir</button>\u003Cbr>\n  <script src=\"script.js\"></script>\u003Cbr>\n</body>\u003Cbr>\n</html>\u003C/p>\n\u003Cp>script.js (temel):\u003Cbr>\nconst btn = document.getElementById('colorBtn');\u003Cbr>\nconst colors = ['#FF6B6B', '#4ECDC4', '#FFE66D', '#556270', '#C7F464'];\u003Cbr>\nbtn.addEventListener('click', () => {\u003Cbr>\n  const next = colors[Math.floor(Math.random() * colors.length)];\u003Cbr>\n  document.body.style.backgroundColor = next;\u003Cbr>\n});\u003C/p>\n\u003Cul>\n  \u003Cli>Hızlı kontrol listesi: buton çalışıyor mu, renk değişiyor mu, konsolda hata var mı?\u003C/li>\n  \u003Cli>Geliştirme önerileri: renk geçişleri için CSS \u003Cem>transition\u003C/em> ekleyin veya klavye kısayolu ekleyin.\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cstrong>Ne öğrenirsiniz:\u003C/strong> DOM seçimi, \u003Ccode>addEventListener\u003C/code>, stil güncelleme. Bu tür küçük uygulamalar DOM ve olay işleme pratiği sağlar (\u003Ca href=\"https://jetacademy.az/en/news/5-beginner-friendly-javascript-projects-you-can-build-in-your-first-month-of-coding\">kaynak\u003C/a>).\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>2) Palindrom Kontrolü\u003C/h3>\n\u003Cp>Amaç: Kullanıcıdan alınan metnin palindrom (tersten okunuşu aynı) olup olmadığını kontrol etmek. Bu, string işleme ve temel algoritma mantığını öğretir.\u003C/p>\n\u003Col>\n  \u003Cli>Basit bir input ve kontrol butonu oluşturun.\u003C/li>\n  \u003Cli>Metni normalize edin: küçük harfe çevirme ve alfasayısal olmayan karakterleri temizleme.\u003C/li>\n  \u003Cli>Temizlenmiş metni ters çevirip karşılaştırın.\u003C/li>\n\u003C/ol>\n\u003Cp>Örnek JS kontrol fonksiyonu:\u003Cbr>\nconst raw = document.getElementById('textInput').value;\u003Cbr>\nconst cleaned = raw.toLowerCase().replace(/[^a-z0-9]/g, '');\u003Cbr>\nconst isPal = cleaned === cleaned.split('').reverse().join('');\u003Cbr>\n// Sonucu göster\u003C/p>\n\u003Cp>Not: Bu basit sürüm Latin alfabesi ve rakamlar için uygundur; aksanlı karakterler ve diğer yazı sistemleri için ek normalizasyon gerekebilir.\u003C/p>\n\u003Cul>\n  \u003Cli>Geliştirme önerileri: büyük/küçük harf duyarlılığı, boşlukları yok sayma, kullanıcıya vurgulu geri bildirim ekleme.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch3>3) Rastgele Alıntı Üretici\u003C/h3>\n\u003Cp>Amaç: Bir düğmeye tıklandığında ekranda rastgele bir alıntı gösterme. Burada temel API isteği (fetch) kullanımıyla hata yakalama pratik edebilirsiniz.\u003C/p>\n\u003Col>\n  \u003Cli>Alıntıyı gösterecek bir alan ve yeni alıntı butonu oluşturun.\u003C/li>\n  \u003Cli>fetch kullanarak bir dış API'den rastgele alıntı çekin veya kod içinde bir yedek dizi kullanın.\u003C/li>\n  \u003Cli>Hata durumunda yedek alıntılardan gösterin.\u003C/li>\n\u003C/ol>\n\u003Cp>Basit fetch örneği (script.js):\u003Cbr>\nconst quoteEl = document.getElementById('quote');\u003Cbr>\nasync function newQuote() {\u003Cbr>\n  try {\u003Cbr>\n    const res = await fetch('https://api.quotable.io/random');\u003Cbr>\n    if (!res.ok) throw new Error('Ağ hatası');\u003Cbr>\n    const data = await res.json();\u003Cbr>\n    quoteEl.textContent = `${data.content} — ${data.author}`;\u003Cbr>\n  } catch (err) {\u003Cbr>\n    const fallback = [{content: 'Basitlik güzeldir', author: 'Anonim'}];\u003Cbr>\n    const q = fallback[Math.floor(Math.random() * fallback.length)];\u003Cbr>\n    quoteEl.textContent = `${q.content} — ${q.author}`;\u003Cbr>\n  }\u003Cbr>\n}\u003C/p>\n\u003Cp>Not: Teknik olarak üçüncü taraf API'ler CORS veya ağ sorunlarına yol açabilir; bu yüzden her zaman bir fallback mekanizması koyun.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>4) Kronometre (Stopwatch)\u003C/h3>\n\u003Cp>Amaç: Başlat/durdur/sıfırla işlevlerine sahip basit bir kronometre. Burada zamanlayıcı yönetimi ve setInterval kullanımı gösterilir.\u003C/p>\n\u003Cp>Örnek mantık (script.js):\u003Cbr>\nlet startTime = 0, elapsed = 0, timer = null;\u003Cbr>\nfunction start() {\u003Cbr>\n  startTime = Date.now() - elapsed;\u003Cbr>\n  timer = setInterval(() => {\u003Cbr>\n    elapsed = Date.now() - startTime;\u003Cbr>\n    display(elapsed);\u003Cbr>\n  }, 100);\u003Cbr>\n}\u003Cbr>\nfunction stop() { clearInterval(timer); }\u003Cbr>\nfunction reset() { clearInterval(timer); elapsed = 0; display(0); }\u003C/p>\n\u003Cp>display(ms) fonksiyonu ile dakika:saniye formatına dönüştürüp DOM'a yazdırın. Bu proje zaman hesaplama ve DOM güncelleme döngüsünü anlamanızı sağlar.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>5) Kalıcı Yapılacaklar Listesi (Persistent To‑Do)\u003C/h3>\n\u003Cp>Amaç: Kullanıcı görevleri ekleyip silebilsin; liste sayfa yenilendiğinde kaybolmasın. Bunun için \u003Ccode>localStorage\u003C/code> kullanacağız.\u003C/p>\n\u003Cp>Örnek temel akış:\u003Cbr>\nlet tasks = JSON.parse(localStorage.getItem('tasks') || '[]');\u003Cbr>\nfunction addTask(text) {\u003Cbr>\n  tasks.push({id: Date.now(), text});\u003Cbr>\n  localStorage.setItem('tasks', JSON.stringify(tasks));\u003Cbr>\n  render();\u003Cbr>\n}\u003Cbr>\nfunction removeTask(id) {\u003Cbr>\n  tasks = tasks.filter(t => t.id !== id);\u003Cbr>\n  localStorage.setItem('tasks', JSON.stringify(tasks));\u003Cbr>\n  render();\u003Cbr>\n}\u003C/p>\n\u003Cp>Not: localStorage, tarayıcıda basit veri saklamak için uygundur; hassas veya kritik veriler için sunucu tarafı çözümler değerlendirilmelidir.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Kısa Hata Ayıklama İpuçları\u003C/h3>\n\u003Cul>\n  \u003Cli>Tarayıcı konsolunu (DevTools) açıp hata mesajlarını kontrol edin.\u003C/li>\n  \u003Cli>DOM elementlerini seçerken \u003Ccode>id\u003C/code> veya \u003Ccode>class\u003C/code> isimlerinin doğru olduğundan emin olun.\u003C/li>\n  \u003Cli>Network isteklerinde CORS veya ağ hatalarını Network sekmesinden inceleyin.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Projeleri Tamamladığınızda Ne Öğrenmiş Olursunuz?\u003C/h3>\n\u003Cul>\n  \u003Cli>DOM manipülasyonu ve olay dinleyicilerinin nasıl kullanıldığını (seçme, güncelleme, event binding).\u003C/li>\n  \u003Cli>Basit string ve dizi işlemleri (ör. ters çevirme, filtreleme).\u003C/li>\n  \u003Cli>Temel zamanlayıcı yönetimi (setInterval / clearInterval) ve zaman hesaplama.\u003C/li>\n  \u003Cli>Yerel veri depolama için \u003Ccode>localStorage\u003C/code> kullanımı ve temel fetch ile API çağrıları.\u003C/li>\n\u003C/ul>\n\u003Cp>Bu başlıklar ve pratikler hakkında daha fazla örnek ve kısa egzersizler için \u003Ca href=\"https://www.5minsofcode.com/\">5minsofcode\u003C/a> ve \u003Ca href=\"https://jetacademy.az/en/news/5-beginner-friendly-javascript-projects-you-can-build-in-your-first-month-of-coding\">JET Academy\u003C/a> kaynaklarına göz atabilirsiniz.\u003C/p>\n\n\u003Ch3>İleriye Dönük Adımlar\u003C/h3>\n\u003Cul>\n  \u003Cli>Projeleri birleştirerek daha büyük bir uygulama oluşturun (ör. yapılacaklar listesinde zamanlayıcı ve hatırlatıcılar ekleyin).\u003C/li>\n  \u003Cli>CSS ile kullanıcı arayüzünü güzelleştirin; küçük animasyonlar ekleyin.\u003C/li>\n  \u003Cli>Basit testler yazın veya kodu modüler hale getirip tekrar kullanılabilir fonksiyonlar oluşturun.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Kaynaklar\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://www.5minsofcode.com/\">5minsofcode — 5 dakikada kodlama örnekleri\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://jetacademy.az/en/news/5-beginner-friendly-javascript-projects-you-can-build-in-your-first-month-of-coding\">JET Academy — Başlangıç dostu JS projeleri\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.classcentral.com/course/youtube-5-mini-javascript-projects-for-beginners-282635\">Class Central — Video: 5 mini JavaScript projesi\u003C/a>\u003C/li>\n\u003C/ul>\n\n\u003Cp>Bu kısa projeler öğrenme sürecinde hız kazanmanızı sağlar. Küçük, tamamlanabilir hedefler belirleyin; sonra üzerine özellikler ekleyerek büyütün. İyi kodlamalar!\u003C/p>","5 Dakikada Mini JS Projeleri: 5 Basit JavaScript Uygulama","Yeni başlayanlar için adım adım yönergelerle 5 kısa JavaScript projesi: renk değiştirici, palindrom kontrolü, rastgele alıntı üretici, kronometre ve kalıcı yap�","Mini JS Projeleri, mini proje javascript, öğrenme projeleri, küçük js uygulama örnekleri, slug","5-dakikada-mini-js-projeleri-adim-adim-5-basit-uygulama","2026-11-10T12:41:46.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/523c163ba7ef7e36a5ef2a46a6b99106.jpg","/media/blog/523c163ba7ef7e36a5ef2a46a6b99106_thumb.jpg","/media/blog/523c163ba7ef7e36a5ef2a46a6b99106.webp","/media/blog/523c163ba7ef7e36a5ef2a46a6b99106_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,913,0,"5 dk okuma süresi","/blog/mini-js-projeleri/5-dakikada-mini-js-projeleri-adim-adim-5-basit-uygulama",[],["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/523c163ba7ef7e36a5ef2a46a6b99106.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/mini-js-projeleri/5-dakikada-mini-js-projeleri-adim-adim-5-basit-uygulama",{"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-adim-adim-5-basit-uygulama",["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]