Parçacıklar alanı için "tamamlandı" tasarımıyla - şimdi biraz etkileşime geçebiliriz (okuyun: JavaScript).
Sol taraftaki bağlantılar için süper topal bir rollover ekliyoruz, böylece bir şeyimiz var, ancak bunu daha sonra değiştireceğimizi biliyoruz. Sonra aslında biraz JavaScript yazmaya başladık. Sayfayı ilk kez ziyaret ettiğinizde ilk kategori (HTML) aktif olacaktır. Aktif, yani HTML için liste öğesinde "aktif" sınıfı vardır. CSS bu sınıfı etkiler, ona bir z-endeksi değeri verir, bu da bağı gölgenin üzerine görsel olarak yükseltir ve onu iki sütunu ayıran düz renk çizgisine bağlar.
İşin püf noktası, o anda aktif olan kategorideki aktif sınıfı kaldırmak ve yeni tıklanan kategoriye uygulamak için farklı bir kategoriye tıkladığınızda olacaktır. Bu gerçekten çok önemsiz, sadece bu sayfaya yüklediğimiz bir komut dosyasında sadece birkaç satır jQuery. Ayrıca, sağ sütundaki parçacıkların listesinin doğru bağlantı kümesini göstermesi gerekir, bu da yine sadece bazı sınıf değiştirme ve basit göster / gizle manipülasyonudur.
Artık geriye kalan tek şey sayfaların tek tek snippet'ler için biçimlendirilmesidir.