🌐 Web Dev Projects

Bu repo, HTML, CSS, JavaScript ve React kullanarak geliştirdiğim mini web projelerini içerir.
Her proje kendi klasörü içinde bulunur ve ayrı çalıştırılabilir.

📌 Projeler

1. Weather App

• Şehir ismine göre hava durumu bilgisini gösterir.
• Kullanılan Teknolojiler: HTML, CSS (Tailwind), JavaScript, WeatherAPI
• 🔗 Canlı Demo: Canlı Demo

2) Hafıza Özellikli Hesap Makinesi

• Dört işlem ve yüzde hesapları yapar; klavye ile kullanım desteklenir.
• Hafıza İşlemleri: MC, MR, M+, M-
• Diğerleri: C, CE, ±, . , son işlemi silme (⌫)
• Kullanılan Teknolojiler: HTML, CSS (Tailwind), JavaScript
• 🔗 Canlı Demo: Canlı Demo

3) Birlikte Çalışalım - Pomodoro Timer

• Otomatik Geçiş Sistemi: Seans bitiminde 5 saniyelik geri sayım ile otomatik geçiş, kesintisiz akış (Çalışma → Mola → Çalışma), görsel geri sayım mesajları, onay istemeden akıcı deneyim.
• Pomodoro Eğitim Bölümü: Francesco Cirillo'nun metodu hakkında bilgi, adım adım süreç anlatımı, faydaları ve mola ipuçları.
• Geliştirilmiş UX: Beklemeden akıcı geçişler, bilgilendirici mesajlar, cam efektli modern tasarım, mobil ve masaüstü uyumu.
• Çalışma Akışı: 25 dk çalışma → 5 sn geri sayım → 5 dk mola → 5 sn geri sayım → yeni çalışma. Döngü otomatik devam eder.
• Kullanılan Teknolojiler: HTML, CSS (Tailwind), JavaScript
• 🔗 Canlı Demo: Canlı Demo

4) Döviz Kuru Hesaplayıcı

• Gerçek zamanlı döviz kuru hesaplama.
• Seçilen iki para birimi arasında dönüşüm yapar.
• Kullanılan Teknolojiler: HTML, CSS (Tailwind), JavaScript, ExchangeRate API
• 🔗 Canlı Demo: Canlı Demo

5) QR Code Generator & Reader

• Metin veya bağlantıyı QR koda dönüştürür.
• PNG formatında QR kodu indirme desteği.
• Kamera ile gerçek zamanlı QR kod okuma.
• Görsel yükleyerek QR kod çözme.
• Okunan veriyi kopyalama ve temizleme özellikleri.
• Kullanılan Teknolojiler: HTML, CSS (Tailwind), JavaScript, qrcodejs, jsQR
• 🔗 Canlı Demo: Canlı Demo

6) 2048 – Tile Merge Puzzle

• 4×4 ızgarada aynı sayıları birleştirerek 2048’e ulaş.
• Klavye desteği: Ok tuşları / WASD; mobilde kaydırma (touch) ile oynanır.
• Skor ve En İyi Skor (localStorage) takibi; Yeni Oyun butonu.
• Kaydırma/çarpışma animasyonları; kazandın/kaybettin durum mesajları.
• Kullanılan Teknolojiler: HTML, CSS (Tailwind), JavaScript
• 🔗 Canlı Demo: Canlı Demo

7) Catering Landing Page

• Modern, responsive ve animasyonlu tanıtım sayfası.

• Özellikler: Mobil uyumlu menü, promosyon slider, paket fiyat listesi, iletişim formu, sık sorulan sorular bölümü, hover/scroll animasyonları.

• Kullanılan Teknolojiler: HTML, CSS (Tailwind), JavaScript

• 🔗 Canlı Demo: Canlı Demo

• 8) To-Do-App

• Görev ekleme

• Tamamlama / Silme butonları, geciken görevler için ⚠️ uyarısı ve kırmızı kart

• Filtreler: Tümü • Bekleyen • Tamamlanan • Geciken

• İstatistik paneli: Toplam, Tamamlanan, Bekleyen, Geciken ve Başarı Oranı

  • Başarı oranı mantığı: zamanında tamamlanan = %100, geç tamamlanan = %70, tamamlanmayan = %0

• Haftalık takvim görünümü: Gün bazında görev rozetleri, “Bu hafta / Gelecek hafta” etiketi, haftalar arası gezinme

• Tarih/Saat özellikleri: Bugünün tarihi başlıkta gösterilir, bitiş tarihi için minimum değer otomatik “şimdi”

• Gerçek zamanlı tazeleme: Her dakikada bir istatistikler ve takvim otomatik güncellenir

• Kullanılan Teknolojiler: HTML, CSS (Tailwind), JavaScript (vanilla)

• 🔗 Canlı Demo: Canlı Demo