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.

  1. Yeni bir klasör açın, index.html ve app.js dosyalarını oluşturun.
  2. 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.

  1. index.html dosyanıza bir buton ekleyin.
  2. 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.

  1. Sayfa tamamına uygulanan bir arka plan animasyonu oluşturun.
  2. 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

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.