Gereksinimler ve Ön Hazırlık

Bu projeyi gerçekleştirmek için herhangi bir özel derleyiciye veya karmaşık bir geliştirme ortamına ihtiyacınız yoktur. Modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve bir kod editörü (VS Code önerilir) yeterlidir. Projemiz, tarayıcıların yerel JavaScript motorunu kullanarak çalışacaktır.

• HTML5: Yapısal iskeletin oluşturulması için.
• CSS3: Esnek kutu modeli (Flexbox) ve görsel özelleştirmeler için.
• JavaScript (ES6+): Zamanlayıcı mantığı ve DOM güncellemeleri için.

Çalışma alanınızı oluşturmak için bir klasör açın ve içine index.html, style.css ve script.js dosyalarınızı oluşturun. Dosyalar arasındaki bağlantıların doğru kurulduğundan emin olun.

Adım 1: HTML Yapısını Oluşturma

Zamanlayıcımızın iskeleti, kullanıcının süreyi girebileceği bir giriş alanı, başlatma butonu ve sürenin görüntüleneceği bir ekran alanından oluşmalıdır. Anlamsal (semantic) HTML etiketleri kullanmak, SEO ve erişilebilirlik açısından kritiktir.

  
Dinamik Zamanlayıcı
  
  Başlat
  
00:00

Bu kod bloğunda, input etiketi ile kullanıcıdan veri alıyoruz. id seçicileri, JavaScript tarafında bu elemanlara erişmemizi sağlayacak anahtarlardır. div etiketi ise geri sayımın anlık olarak güncelleneceği alandır.

Adım 2: CSS ile Modern Arayüz Tasarımı

Zamanlayıcımızın profesyonel görünmesi için CSS3 Flexbox modelini kullanacağız. Bu, elemanların farklı ekran boyutlarında düzgün hizalanmasını sağlar. Aşağıdaki kodlar, zamanlayıcınıza modern bir görünüm kazandıracaktır.

.timer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', sans-serif;
  gap: 20px;
  padding: 40px;
  background: #f4f4f9;
  border-radius: 15px;
}

#display {
  font-size: 3rem;
  font-weight: bold;
  color: #333;
}

Burada kullanılan gap özelliği, elemanlar arasındaki boşluğu yönetmemizi sağlar. font-size ve color tanımlamaları ise okunabilirliği artırmak için seçilmiştir.

Adım 3: JavaScript ile Zamanlayıcı Mantığını Kurma

Zamanlayıcıyı çalıştırmak için setInterval fonksiyonunu kullanacağız. Bu fonksiyon, belirli bir zaman aralığında bir kod bloğunu sürekli çalıştırır. Güvenlik ve performans açısından, zamanlayıcıyı her tetiklendiğinde önceki oturumu temizlemek (clearInterval) önemlidir.

let timerInterval;

function startTimer(duration) {
  let remaining = duration;
  const display = document.getElementById('display');
  
  clearInterval(timerInterval);
  
  timerInterval = setInterval(() => {
    let minutes = Math.floor(remaining / 60);
    let seconds = remaining % 60;
    display.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    
    if (--remaining < 0) {
      clearInterval(timerInterval);
      alert("Süre doldu!");
    }
  }, 1000);
}

Yukarıdaki kod, girilen süreyi dakika ve saniye formatına dönüştürür. remaining < 0 kontrolü, zamanlayıcının sonsuza kadar çalışmasını engeller ve işlemi durdurur.

Adım 4: Etkileşim ve Olay Dinleyicileri (Event Listeners)

Kullanıcı "Başlat" butonuna tıkladığında zamanlayıcının başlaması gerekir. Bunun için addEventListener yöntemini kullanıyoruz. Kullanıcı girişinin geçerli bir sayı olup olmadığını kontrol etmek, uygulamanın hata vermemesi için gereklidir.

document.getElementById('startBtn').addEventListener('click', () => {
  const input = document.getElementById('timeInput').value;
  if (input > 0) {
    startTimer(parseInt(input));
  } else {
    alert("Lütfen geçerli bir saniye girin.");
  }
});

Bu kod bloğu, kullanıcının girdiği veriyi doğrular (validation). Negatif veya boş değer girişi durumunda kullanıcıyı uyararak uygulamanın çökmesini engelleriz.

Adım 5: Özelleştirilebilir Özellikler Ekleme

Zamanlayıcınızı daha dinamik hale getirmek için CSS değişkenlerini (CSS Variables) kullanabilirsiniz. Kullanıcıya renk seçimi veya yazı tipi boyutu değiştirme imkanı sunmak, uygulamanın "özelleştirilebilir" olma hedefini pekiştirir.

:root {
  --main-color: #007bff;
}

button {
  background-color: var(--main-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

CSS değişkenleri, projenin genelinde tek bir noktadan stil yönetimi yapmanıza olanak tanır. var(--main-color) kullanımı, ileride renk paletini değiştirmek istediğinizde sadece tek bir satırı güncellemenizi sağlar.

Karşılaştırma: Zamanlayıcı Yöntemleri

Güvenlik Uyarısı: Kullanıcıdan alınan verileri doğrudan DOM'a yazarken innerHTML yerine textContent kullanmaya özen gösterin. Bu, XSS (Cross-Site Scripting) saldırılarını önlemek için temel bir güvenlik önlemidir.

Sıkça Sorulan Sorular

Zamanlayıcı neden bazen sapma yapıyor?

JavaScript tek iş parçacıklı (single-threaded) bir dildir. setInterval, sistemin o anki yoğunluğuna göre milisaniyelik sapmalar yaşayabilir. Kritik hassasiyet gerekiyorsa Date.now() kullanarak zaman farkını hesaplamak daha doğrudur.

Mobil cihazlarda çalışır mı?

Evet, kullandığımız Flexbox yapısı sayesinde zamanlayıcınız tüm mobil cihazlarda duyarlı (responsive) olarak çalışacaktır.

Daha fazla özellik nasıl eklerim?

Zamanlayıcıya "Duraklat" ve "Sıfırla" butonları ekleyerek bir state nesnesi üzerinden yönetimi genişletebilirsiniz.

CSS değişkenlerini JavaScript ile değiştirebilir miyim?

Evet, document.documentElement.style.setProperty('--main-color', 'red'); komutu ile çalışma anında temayı değiştirebilirsiniz.

Tarayıcı kapandığında zamanlayıcı devam eder mi?

Hayır, JavaScript istemci tarafında çalıştığı için tarayıcı kapandığında süreç sonlanır. Kalıcılık istiyorsanız localStorage kullanarak kalan süreyi kaydedebilirsiniz.

Zamanlayıcı Uygulamanız İçin İleri Düzey Optimizasyon İpuçları

Zamanlayıcı uygulamanızın daha profesyonel ve performanslı çalışmasını sağlamak için kodunuzu optimize etmeniz gerekir. Özellikle tarayıcı kaynaklarını verimli kullanmak, uzun süreli çalışan zamanlayıcılarda pil ömrü ve bellek yönetimi açısından kritiktir.

RequestAnimationFrame Kullanımı

setInterval yerine requestAnimationFrame kullanmak, tarayıcının ekran yenileme hızına (genellikle 60fps) uyum sağlar. Bu, animasyonlarınızın daha akıcı görünmesini ve işlemci yükünün azalmasını sağlar. İşte basit bir döngü örneği:

let start = null;
function step(timestamp) {
  if (!start) start = timestamp;
  let progress = timestamp - start;
  
  // Zamanlayıcı mantığınızı buraya ekleyin
  if (progress < 60000) {
    window.requestAnimationFrame(step);
  }
}
window.requestAnimationFrame(step);

Bellek Sızıntılarını Önleme

Zamanlayıcıyı durdurduğunuzda, clearInterval veya cancelAnimationFrame fonksiyonlarını mutlaka çağırın. Aksi takdirde, arka planda çalışan "hayalet" süreçler tarayıcının yavaşlamasına neden olabilir. Uygulamanızda bir "Reset" butonu varsa, bu fonksiyonları çağırmayı unutmayın.

Uygulamanın Yayına Alınması (Deployment) ve Test Süreçleri

Geliştirdiğiniz zamanlayıcıyı dünyaya açmadan önce belirli testlerden geçirmek, kullanıcı deneyimini doğrudan etkiler. Özellikle farklı ekran boyutlarında ve tarayıcılarda tutarlı bir performans sergilemesi beklenir.

Tarayıcı Uyumluluk Testi

Modern CSS değişkenleri ve JavaScript ES6+ sözdizimi çoğu tarayıcıda desteklense de, eski tarayıcılar için bir "transpiler" (Babel gibi) kullanmak gerekebilir. Uygulamanızı yayına almadan önce şu kontrolleri yapın:

• Responsive Testi: Chrome DevTools üzerinden farklı mobil cihaz simülasyonlarını deneyin.
• Hız Testi: Lighthouse raporu ile uygulamanın ilk yüklenme süresini ve etkileşim hızını ölçün.
• Erişilebilirlik (A11y): Zamanlayıcı bittiğinde ekran okuyucuların uyarı vermesi için aria-live="polite" etiketini kullanın.

Kullanıcı Deneyimini İyileştiren İpucu

Zamanlayıcı bittiğinde kullanıcıya sadece görsel bir uyarı değil, işitsel bir geri bildirim de sunabilirsiniz. Web Audio API kullanarak basit bir "bip" sesi eklemek, uygulamanızın profesyonellik seviyesini artıracaktır.

function playAlertSound() {
  const context = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = context.createOscillator();
  oscillator.type = 'sine';
  oscillator.frequency.setValueAtTime(440, context.currentTime);
  oscillator.connect(context.destination);
  oscillator.start();
  oscillator.stop(context.currentTime + 0.5);
}

Bu eklemelerle birlikte, basit bir zamanlayıcıdan, kullanıcı dostu ve teknik açıdan optimize edilmiş bir web aracına geçiş yapmış olursunuz. Kodunuzu modüler tutmak ve her fonksiyonu tek bir işi yapacak şekilde tasarlamak, gelecekte yeni özellikler eklemenizi çok daha kolaylaştıracaktır.

Sonuç

HTML & CSS ile özelleştirilebilir bir dinamik zamanlayıcı yapmak, web geliştirme temellerinizi güçlendiren harika bir pratik projesidir. Bu rehberde, bir zamanlayıcının mantıksal kurulumundan görsel özelleştirmelerine kadar tüm adımları tamamladık. Bir sonraki adım olarak, localStorage kullanarak sayfayı yenileseniz bile zamanlayıcının kaldığı yerden devam etmesini sağlayan bir "kalıcılık" özelliği eklemeyi deneyebilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kodlar eğitim amaçlıdır. Üretim ortamında (production) kullanırken, kullanıcı girdilerini sunucu tarafında da doğrulamayı ve modern güvenlik kütüphanelerini göz önünde bulundurmayı unutmayın.