Tek Dosyalık Pomodoro Uygulaması Yazalım

Bazen en tatmin edici projeler en küçükleri oluyor. Bu hafta sonu tek dosyalık bir pomodoro sayacı yazdım: HTML + CSS + JS, toplam ~130 satır.

Kalbi: SVG halka animasyonu

Geri sayım halkası tek bir SVG dairesi. Numara, stroke-dasharray'i çemberin çevresine eşitleyip stroke-dashoffset'i kalan süreye göre kaydırmak:

const CEVRE = 2 * Math.PI * 110; // yarıçap 110
halka.style.strokeDasharray = CEVRE;

function ciz() {
  halka.style.strokeDashoffset = CEVRE * (1 - kalan / toplam);
}

CSS tarafında transition: stroke-dashoffset 1s linear vererek her saniye akıcı biçimde ilerlemesini sağlıyoruz. Duraklat/devam ise tek bir setInterval'i kurup bozmaktan ibaret.

Kendiniz deneyin

İndirin, çift tıklayın, çalışsın. Kaynağı açıp kurcalamak serbest - süreleri değiştirin, kendi renklerinizi verin.