[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-5-dakikada-yapilabilecek-mini-javascript-projeleri-3-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},25806,"5 Dakikada Yapılabilecek Mini JavaScript Projeleri: 3 Uygulama","Bu yazıda, temel JavaScript becerileri kazanmak için 5 dakikada tamamlanabilen üç mini proje (canlı saat, renk değiştirici buton, hareketli arka plan) adım adım gösterilmektedir.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>Yeni başlıyorsanız veya hızlıca portföyünüze ekleyebileceğiniz örnekler arıyorsanız, bu yazı tam size göre. Burada üç tane, her biri yaklaşık 5 dakikada oluşturulabilen mini JavaScript uygulaması bulacaksınız: canlı saat, tıklamayla renk değiştiren buton ve dinamik hareketli arka plan. Örnekler temel DOM, zamanlayıcılar ve olay (event) kullanımını gösterir; kısa \u003Cstrong>javascript başlangıç kodları\u003C/strong> arayanlar için uygundur.\u003C/p>\n\u003Cp>Benzer kısa proje fikirlerinin öğrenme ve portföy hazırlama açısından faydası üzerine referanslar için örnek listelere bakabilirsiniz: \u003Ca href='https://www.alestamedya.com/blog/hayal-gucunu-sinirlayan-5-javascript-projesi'>AlesTamedya\u003C/a> ve \u003Ca href='https://www.patika.dev/blog/frontend-becerilerinizi-gelistirecek-5-proje-ornegi'>Patika.dev\u003C/a> gibi kaynaklar benzer öneriler sunuyor.\u003C/p>\n\n\u003Ch2>Hazırlık: Gerekenler (2 dakika)\u003C/h2>\n\u003Cul>\n  \u003Cli>Basit bir metin editörü (VS Code, Sublime, Notepad++ vb.).\u003C/li>\n  \u003Cli>Modern bir tarayıcı (Chrome, Firefox, Edge).\u003C/li>\n  \u003Cli>HTML dosyası oluşturup kaydetme ve tarayıcıda açma bilgisi.\u003C/li>\n  \u003Cli>Opsiyonel: VS Code Live Server uzantısı ile hızlı canlı önizleme.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>1) Canlı Saat (Live Clock)\u003C/h2>\n\u003Cp>Ne öğretiyor: \u003Cem>Date\u003C/em> nesnesi, \u003Cem>setInterval\u003C/em>, DOM güncelleme. Çok kısa ve anında çıktı alırsınız.\u003C/p>\n\u003Col>\n  \u003Cli>Yeni bir klasör açın, \u003Cstrong>index.html\u003C/strong> ve \u003Cstrong>app.js\u003C/strong> dosyalarını oluşturun.\u003C/li>\n  \u003Cli>\u003Cstrong>index.html\u003C/strong> içine basit bir yer tutucu ekleyin.\u003C/li>\n\u003C/ol>\n\u003Cp>\u003Cstrong>index.html\u003C/strong>\u003Cbr>&lt;!doctype html&gt;\u003Cbr>&lt;html lang='tr'&gt;\u003Cbr>&lt;head&gt;&lt;meta charset='utf-8'&gt;&lt;title&gt;Canlı Saat&lt;/title&gt;&lt;/head&gt;\u003Cbr>&lt;body&gt;&lt;div id='clock' style='font-size:2rem;font-family:monospace'&gt;&lt;/div&gt;&lt;script src='app.js'&gt;&lt;/script&gt;&lt;/body&gt;\u003Cbr>&lt;/html&gt;\u003C/p>\n\u003Cp>\u003Cstrong>app.js\u003C/strong>\u003Cbr>// Kısa ve anlaşılır saat güncelleme\u003Cbr>function updateClock() {\u003Cbr>  const now = new Date();\u003Cbr>  const time = now.toLocaleTimeString();\u003Cbr>  document.getElementById('clock').textContent = time;\u003Cbr>}\u003Cbr>setInterval(updateClock, 1000);\u003Cbr>updateClock();\u003C/p>\n\u003Cp>İpucu: Zaman formatını değiştirmek veya tarih eklemek için \u003Cem>toLocaleDateString\u003C/em> ve \u003Cem>toLocaleTimeString\u003C/em> seçeneklerini kullanabilirsiniz.\u003C/p>\n\n\u003Ch2>2) Renk Değiştiren Buton\u003C/h2>\n\u003Cp>Ne öğretiyor: olay dinleyicileri (event listeners), stil (style) güncelleme ve rastgele seçim mantığı. Kullanıcı deneyimi için hızlı görsel geri bildirim sağlar.\u003C/p>\n\u003Col>\n  \u003Cli>\u003Cstrong>index.html\u003C/strong> dosyanıza bir buton ekleyin.\u003C/li>\n  \u003Cli>JS ile tıklamaya tepki verip arka plan rengini değiştirin.\u003C/li>\n\u003C/ol>\n\u003Cp>\u003Cstrong>index.html\u003C/strong>\u003Cbr>&lt;!doctype html&gt;\u003Cbr>&lt;html lang='tr'&gt;\u003Cbr>&lt;head&gt;&lt;meta charset='utf-8'&gt;&lt;title&gt;Renk Butonu&lt;/title&gt;&lt;/head&gt;\u003Cbr>&lt;body&gt;&lt;button id='colorBtn'&gt;Rengi Değiştir&lt;/button&gt;&lt;script src='app.js'&gt;&lt;/script&gt;&lt;/body&gt;\u003Cbr>&lt;/html&gt;\u003C/p>\n\u003Cp>\u003Cstrong>app.js\u003C/strong>\u003Cbr>const btn = document.getElementById('colorBtn');\u003Cbr>const colors = ['#ffd166','#06d6a0','#118ab2','#ef476f','#ffd6a5'];\u003Cbr>function changeColor() {\u003Cbr>  const c = colors[Math.floor(Math.random() * colors.length)];\u003Cbr>  document.body.style.background = c;\u003Cbr>}\u003Cbr>btn.addEventListener('click', changeColor);\u003C/p>\n\u003Cp>Alternatif: Rastgele renk üretmek için RGB veya HSL hesaplayabilirsiniz; bu, renk paletleriyle denemeler yapmak için iyi bir alıştırmadır.\u003C/p>\n\n\u003Ch2>3) Hareketli Arka Plan (Basit Gradient Animasyonu)\u003C/h2>\n\u003Cp>Ne öğretiyor: stil özelliklerini dinamik değiştirme, animasyon mantığı (zaman ile değişen değerler). Görsel olarak etkileyici ama kodu kısa.\u003C/p>\n\u003Col>\n  \u003Cli>Sayfa tamamına uygulanan bir arka plan animasyonu oluşturun.\u003C/li>\n  \u003Cli>Bir açı değişkeni ile linear-gradient açısını düzenli aralıklarla güncelleyin.\u003C/li>\n\u003C/ol>\n\u003Cp>\u003Cstrong>index.html\u003C/strong>\u003Cbr>&lt;!doctype html&gt;\u003Cbr>&lt;html lang='tr'&gt;\u003Cbr>&lt;head&gt;&lt;meta charset='utf-8'&gt;&lt;title&gt;Hareketli Arka Plan&lt;/title&gt;&lt;/head&gt;\u003Cbr>&lt;body style='margin:0;height:100vh'&gt;&lt;script src='app.js'&gt;&lt;/script&gt;&lt;/body&gt;\u003Cbr>&lt;/html&gt;\u003C/p>\n\u003Cp>\u003Cstrong>app.js\u003C/strong>\u003Cbr>let angle = 0;\u003Cbr>setInterval(() =&gt; {\u003Cbr>  angle = (angle + 1) % 360;\u003Cbr>  document.body.style.background = `linear-gradient(${angle}deg, #ff9a9e, #fad0c4)`;\u003Cbr>}, 30);\u003C/p>\n\u003Cp>İpucu: Farklı renk çiftleri veya daha yumuşak geçişler için iki veya üç renk kullanın ve aralığı (interval) değiştirerek hızını ayarlayın.\u003C/p>\n\n\u003Ch2>Projeleri Hızla Geliştirme ve Portföy İpuçları\u003C/h2>\n\u003Cul>\n  \u003Cli>Her proje için ayrı bir klasör, kısa açıklama (README) ve ekran görüntüsü ekleyin.\u003C/li>\n  \u003Cli>GitHub üzerinde bir depo oluşturarak dosyaları paylaşın; basit projeler GitHub Pages ile ücretsiz yayınlanabilir.\u003C/li>\n  \u003Cli>Kaynaklar benzer mini projelerin öğrenme sürecine katkısını vurguluyor; bunu README içinde belirtin ve hangi becerileri geliştirdiğinizi yazın (\u003Ca href='https://www.alestamedya.com/blog/hayal-gucunu-sinirlayan-5-javascript-projesi'>referans\u003C/a>).\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Kısa Kontrol Listesi (5 dakikalık hızlı yol)\u003C/h2>\n\u003Cul>\n  \u003Cli>Dosyaları oluşturun: index.html + app.js.\u003C/li>\n  \u003Cli>Tarayıcıda dosyayı açın ve konsolu kontrol edin (F12).\u003C/li>\n  \u003Cli>İlk çalıştırmada çıktıyı doğrulayın: saat görünmeli, buton çalışmalı, arka plan hareket etmeli.\u003C/li>\n  \u003Cli>Değişiklik yapıp tarayıcıyı yenileyerek iteratif test yapın.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Sık Karşılaşılan Sorunlar ve Çözümleri\u003C/h2>\n\u003Cul>\n  \u003Cli>Hiçbir şey görünmüyorsa: Dosya yollarını ve id adlarını kontrol edin; doğru dosya tarayıcıya yüklenmiş mi bakın.\u003C/li>\n  \u003Cli>Konsolda hata mesajı varsa: mesajı okuyun; örneğin bir elemana erişilemiyorsa id yanlış olabilir.\u003C/li>\n  \u003Cli>Renkler beklediğiniz gibi değilse: tarayıcı önbelleğini temizleyin veya inline stilin üzerine yazan başka CSS var mı kontrol edin.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\u003Ch2>Kaynaklar ve İleri Okuma\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Ca href='https://www.alestamedya.com/blog/hayal-gucunu-sinirlayan-5-javascript-projesi'>Hayal Gücünü Sınırlayan 5 JavaScript Projesi — AlesTamedya\u003C/a> (benzer kısa proje örnekleri).\u003C/li>\n  \u003Cli>\u003Ca href='https://www.patika.dev/blog/frontend-becerilerinizi-gelistirecek-5-proje-ornegi'>Frontend Becerilerinizi Geliştirecek 5 Proje Örneği — Patika.dev\u003C/a> (uygulamalı öğrenme fikirleri).\u003C/li>\n  \u003Cli>Daha fazla örnek ve genişletme fikirleri için internette “mini JS proje fikirleri” araması yapabilirsiniz.\u003C/li>\n\u003C/ul>\n\n\u003Cp>\u003Cem>Not:\u003C/em> Bu örnekler eğitim amaçlıdır; farklı tarayıcılar veya yerel ayarlar farklı davranışlara neden olabilir. Kodu denedikten sonra geliştirmek için kendi varyasyonlarınızı oluşturmanızı öneririm.\u003C/p>","5 Dakikada Mini JavaScript Projeleri — javascript başlangıç ","5 dakikada tamamlanabilecek üç mini JavaScript projesi: canlı saat, renk değiştiren buton ve hareketli arka plan. Adım adım kodlar ve portföy ipuçlarıyla hemen ","javascript başlangıç kodları, mini JS proje fikirleri, kısa uygulama örnekleri, adım adım proje, başlangıç portföy","5-dakikada-yapilabilecek-mini-javascript-projeleri-3-uygulama","2026-04-08T15:00: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/b48336bafa84c48ecf97ad755ca0e273.jpg","/media/blog/b48336bafa84c48ecf97ad755ca0e273_thumb.jpg","/media/blog/b48336bafa84c48ecf97ad755ca0e273.webp","/media/blog/b48336bafa84c48ecf97ad755ca0e273_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,750,0,"4 dk okuma süresi","/blog/mini-js-projeleri/5-dakikada-yapilabilecek-mini-javascript-projeleri-3-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/b48336bafa84c48ecf97ad755ca0e273.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/mini-js-projeleri/5-dakikada-yapilabilecek-mini-javascript-projeleri-3-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-yapilabilecek-mini-javascript-projeleri-3-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":30,"name":7,"item":65}]