Araç bulma ve kategori filtreleri
Ana ekrandaki araç kartları, arama alanına yazılan sözcüklere ve seçilen kategorilere göre süzülüyor. Arama yalnızca araç adına bakmıyor; kategori, açıklama ve araçla ilişkili arama metni de eşleşmeye katılıyor. Birden fazla kategori seçilebiliyor. Sonuç sayısı arayüzde güncellenirken eşleşmeyen kartlar ve boş kalan kategori bölümleri gizleniyor.
Bir araç açıldığında ilgili panel etkinleşiyor ve tarayıcı geçmişi güncelleniyor. Bu yapı, araç listesinden çalışma ekranına geçişi aynı arayüz içinde tutuyor. Araç etkinleştirme, kartları oluşturma ve filtreleme davranışları ana JavaScript dosyasında ayrı işlevlerle tanımlanıyor.
JSON biçimlendirme: girdiden kopyalanabilir çıktıya
JSON aracında kullanıcı metnini yapıştırıp okunabilir biçime dönüştürebiliyor veya tek satıra sıkıştırabiliyor. İşlem, JavaScript'in JSON ayrıştırma ve serileştirme işlevleriyle yapılıyor. Başarılı sonuçta anahtarlar, metinler, sayılar ve diğer JSON öğeleri farklı görsel sınıflarla gösteriliyor; çıktı panoya kopyalanabiliyor.
Boş giriş ve geçersiz sözdizimi için ayrı hata durumları bulunuyor. Tarayıcının hata bilgisi uygun olduğunda satır ve sütun konumu da gösteriliyor. Kullanıcı girdiyi değiştirdiğinde önceki sonuç temizleniyor; böylece eski çıktı, yeni metnin işlenmiş sonucu gibi sunulmuyor.
Projeyi incelemek için
Bu örnek, ortak bir araç kataloğu ile her aracın kendi giriş, sonuç ve hata durumlarını birlikte ele alıyor. GitHub deposunda görsel sıkıştırma, QR işlemleri ve diğer araçların dosyaları da bulunuyor. Kaynak üzerinden uygulama davranışlarını ve araçların nasıl ayrıldığını inceleyebilirsiniz.