5 Dakikada Yapılabilecek Mini JavaScript Projeleri: 3 Uygulama
Mini JS Projeleri
Giriş
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 javascript başlangıç kodları arayanlar için uygundur.
Benzer kısa proje fikirlerinin öğrenme ve portföy hazırlama açısından faydası üzerine referanslar için örnek listelere bakabilirsiniz: AlesTamedya ve Patika.dev gibi kaynaklar benzer öneriler sunuyor.
Hazırlık: Gerekenler (2 dakika)
- Basit bir metin editörü (VS Code, Sublime, Notepad++ vb.).
- Modern bir tarayıcı (Chrome, Firefox, Edge).
- HTML dosyası oluşturup kaydetme ve tarayıcıda açma bilgisi.
- Opsiyonel: VS Code Live Server uzantısı ile hızlı canlı önizleme.
1) Canlı Saat (Live Clock)
Ne öğretiyor: Date nesnesi, setInterval, DOM güncelleme. Çok kısa ve anında çıktı alırsınız.
- Yeni bir klasör açın, index.html ve app.js dosyalarını oluşturun.
- index.html içine basit bir yer tutucu ekleyin.
index.html
<!doctype html>
<html lang='tr'>
<head><meta charset='utf-8'><title>Canlı Saat</title></head>
<body><div id='clock' style='font-size:2rem;font-family:monospace'></div><script src='app.js'></script></body>
</html>
app.js
// Kısa ve anlaşılır saat güncelleme
function updateClock() {
const now = new Date();
const time = now.toLocaleTimeString();
document.getElementById('clock').textContent = time;
}
setInterval(updateClock, 1000);
updateClock();
İpucu: Zaman formatını değiştirmek veya tarih eklemek için toLocaleDateString ve toLocaleTimeString seçeneklerini kullanabilirsiniz.
2) Renk Değiştiren Buton
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.
- index.html dosyanıza bir buton ekleyin.
- JS ile tıklamaya tepki verip arka plan rengini değiştirin.
index.html
<!doctype html>
<html lang='tr'>
<head><meta charset='utf-8'><title>Renk Butonu</title></head>
<body><button id='colorBtn'>Rengi Değiştir</button><script src='app.js'></script></body>
</html>
app.js
const btn = document.getElementById('colorBtn');
const colors = ['#ffd166','#06d6a0','#118ab2','#ef476f','#ffd6a5'];
function changeColor() {
const c = colors[Math.floor(Math.random() * colors.length)];
document.body.style.background = c;
}
btn.addEventListener('click', changeColor);
Alternatif: Rastgele renk üretmek için RGB veya HSL hesaplayabilirsiniz; bu, renk paletleriyle denemeler yapmak için iyi bir alıştırmadır.
3) Hareketli Arka Plan (Basit Gradient Animasyonu)
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.
- Sayfa tamamına uygulanan bir arka plan animasyonu oluşturun.
- Bir açı değişkeni ile linear-gradient açısını düzenli aralıklarla güncelleyin.
index.html
<!doctype html>
<html lang='tr'>
<head><meta charset='utf-8'><title>Hareketli Arka Plan</title></head>
<body style='margin:0;height:100vh'><script src='app.js'></script></body>
</html>
app.js
let angle = 0;
setInterval(() => {
angle = (angle + 1) % 360;
document.body.style.background = `linear-gradient(${angle}deg, #ff9a9e, #fad0c4)`;
}, 30);
İ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.
Projeleri Hızla Geliştirme ve Portföy İpuçları
- Her proje için ayrı bir klasör, kısa açıklama (README) ve ekran görüntüsü ekleyin.
- GitHub üzerinde bir depo oluşturarak dosyaları paylaşın; basit projeler GitHub Pages ile ücretsiz yayınlanabilir.
- Kaynaklar benzer mini projelerin öğrenme sürecine katkısını vurguluyor; bunu README içinde belirtin ve hangi becerileri geliştirdiğinizi yazın (referans).
Kısa Kontrol Listesi (5 dakikalık hızlı yol)
- Dosyaları oluşturun: index.html + app.js.
- Tarayıcıda dosyayı açın ve konsolu kontrol edin (F12).
- İlk çalıştırmada çıktıyı doğrulayın: saat görünmeli, buton çalışmalı, arka plan hareket etmeli.
- Değişiklik yapıp tarayıcıyı yenileyerek iteratif test yapın.
Sık Karşılaşılan Sorunlar ve Çözümleri
- 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.
- Konsolda hata mesajı varsa: mesajı okuyun; örneğin bir elemana erişilemiyorsa id yanlış olabilir.
- Renkler beklediğiniz gibi değilse: tarayıcı önbelleğini temizleyin veya inline stilin üzerine yazan başka CSS var mı kontrol edin.
Kaynaklar ve İleri Okuma
- Hayal Gücünü Sınırlayan 5 JavaScript Projesi — AlesTamedya (benzer kısa proje örnekleri).
- Frontend Becerilerinizi Geliştirecek 5 Proje Örneği — Patika.dev (uygulamalı öğrenme fikirleri).
- Daha fazla örnek ve genişletme fikirleri için internette “mini JS proje fikirleri” araması yapabilirsiniz.
Not: 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.
Yorumlar