HTML Durum Değişikliklerini Gerçek Zamanlı olarak CSS ile Sayma

Sayma, web uygulamalarının her yerinde bulunan bir görevdir. Örneğin, okunmamış e-posta, listedeki yapılmamış görevler, alışveriş için işaretlenen ürün sayısı gibi birçok alanda işaretleme ve sayma ihtiyacı hissediyoruz.

Bu yazımızda sizlere onay kutuları ve metin girişleri gibi daha çok kullanıcı denetimlerinin ön planda olduğu öğeleri CSS sayaçlarını kullanarak nasıl hesaplayabileceğinizi anlattık.

1-) Checkboxes

Onay kutuları, işaretlendiğinde “kontrol edilmiş” duruma geçer. :Checked sahte sınıfı ile işaretli durumu gösterebiliriz.

“Root” ögesinde 2 adet sayaç belirledik ve bu 2 durum için sırasıyla artım yaptırdık. Sayaçlardaki değerler daha sonra belirlenen yerde görüntülenir. Onay kutularının işaretlediğinizde veya işareti kaldırdığınızda sayaç değerleri gerçek zamanlı olarak değişir.

Text inputs

Kaç adet metin girdisi doldurduğunuz veya kaç adet boş bıraktığınızı sayabilirsiniz. Buradaki çözüm checkboxes kadar kolay değildir çünkü text inputs’ un işaretleme sınıfı yoktur. Text inputs’ ta işaretleme sınıfı yerine “placeholder” kullanmalıyız.

Metin girdilerinde placeholder kullanırsak, giriş alanının ne zaman boş olduğunu biliriz. Kullanıcı bir şey yazdığında placeholder kaybolur.

Sonuç bir öncekindeki gibi iki sayaç gerçek zamanlı olarak artırılır ve azaltılır.

Details

Bir öğenin alt durumları her zaman sahte sınıflar ile belirtilmek zorunda değildir.

<details> öğesinde olduğu gibi bu işi yapan HTML öğeleri olabilir. <details> öğesi <summary> alt öğesinin içeriğini görüntüler. Kullanıcı tıkladığında <details> öğesinin diğer içerikleri görünün hale gelir. <summary> öğesinin her zaman <details> öğesinden sonra geldiğini unutmayın.

<details> öğesinin 2 durumu vardır. Açık ve kapalı.

Radio buttons

Radio buttons’ ın sayılması diğerlerinden farklıdır. Checkbox’ ta kullanılan “:checked” sahte sınıfını kullanabiliriz. Radio buttons gruplar halinde verilir. Kullanıcı, bu gruptan yalnızca birini seçer veya hiç seçmez. Her grup tek birim olarak hareket eder. Bu grupların sahip olacağı durumlar, düğmelerden birisi seçili veya hiçbiri seçili değil durumudur.
Aynı gruptaki radio buttons’ a aynı adı atamalıyız.

Yukarıdaki kodlarda bütün radio button’ ları saymak yerine her grubun son butonunu hedefledik. Yani bütün düğmeleri saymıyoruz her gruptan sadece 1 tanesini saydırmak istiyoruz. Bu durumda bize her zaman doğru sayıyı vermeyecek çünkü diğer 2 düğmeyi saydırmıyoruz. Diğer 2 buton için unSelectedRadioCount ‘dan sonra -1 değeri ekledik. Bunlardan birisi işaretlendiğinde -1 devreye girer.

Sayaçların Yerleştirilmesi

Sayma bittikten sonra, yani sayılan öğeleri sayfamızda görmek için sayacı görüntüleyeceğimiz öğeyi HTML kaynak kodunda sayılabilecek öğelerden sonra yerleştirmeliyiz.
Sayaçları konumlandırmak için translate, margin veya position gibi öğeler kullanabilirsiniz. Önerimiz CSS Grid’ i kullanmanızdır. Böylece HTML kaynak kodundaki öğelerin sıralamasından bağımsız olarak düzeninizi oluşturabilirsiniz. Örneğin, sayaçlarınızı giriş alanlarının yanına veya üzerine yerleştiren bir tablo oluşturabilirsiniz.

Bu makalemizde sizlere HTML durum değişikliklerinde CSS ile sayaç kullanımından bahsettik. Siz de düşüncelerinizi ve bilgilerinizi yorum yaparak bizlere katkıda bulunabilirsiniz.