search

fatihmeh / choose-your-operating-system

An interactive web interface to help you choose the most convenient OS
https://fatihmeh.github.io/choose-your-operating-system/
MIT License
9 stars 1 forks source link

Altyapı #2

Closed fatihmeh closed 5 years ago

fatihmeh commented 5 years ago

Sitenin altyapısı Github Pages ile yapılacağını düşünerek html ve js kullanmak durumundayız. Detayları burada tartışabiliriz.

obdegirmenci commented 5 years ago

Tüm seçenekleri baştan sona JS ile oluşturup kontrollerini basit bir "if" düzeniyle mi sağlayalım yoksa soru ve ve olası cevapları HTML içerisinde, liste gibi yapılara mantıksal biçimde yerleştirip JS'yi bunların gösteriminde mi kullanalım? İkinci yöntem ile ayrılan yollar ve cevaplar listeler üzerinden belirlenirken birinci yöntemde oluşturma ve yönlendirme tamamen JS üzerinden olacak. İkinci yöntemde yapı bir kez kurulduğu zaman ekstra cevaplarla senaryoyu genişletmek ve farklı konulara uyarlamak daha kolay olur. Birincisinde kodu sürekli düzenlemek gerekir.

fatihmeh commented 5 years ago

Js ile seçimler sonrası girdilerden geleni toplayıp sonucu gösterebiliriz. Bir kere kuruncu düzeni sonrasında pek değiştirme isteğinde bulunmayız diye düşünüyorum.

fatihmeh commented 5 years ago

Seçimleri alabileceğimiz başka bir dosya yapma ihtimalimiz var mı? Json dosyasından filan çekme gibi.

obdegirmenci commented 5 years ago

Evet yapabiliriz. Kullanımı sanırım Array gibi olur.

fatihmeh commented 5 years ago

Json dosyası hazırlıyordum fakat bunu okumayı anlatmaya uğraşmak yerine direk koda seçenekleri yazmak daha efektif olabilir.

obdegirmenci commented 5 years ago

Son düzenlemede onun ufak bir örneğini yaptım. Sonuçları bu şekilde geliyor. resim

Direkt func dosyası içinde array olarak da kullanabiliriz ama böyle daha düzenli görünüyor. Hem ayrı dillerdeki versiyonunu hazırlerken kullanıcıya hepsini tek seferde yükletmek zorunda kalmayız.

obdegirmenci commented 5 years ago

Asıl kullanım şekline ait yapıyı oluşturmak için çalışmalara başladım. Tüm soruları, cevapları ve bunlarla ilgili diğer verileri alabiliyoruz. Sıra bu verileri döngü yerine sadece gerektiği zaman gösterebilmekte. Geçici olarak döngüyü iptal ettim ve seçtiğim bir adet sorunun görünmesini sağladım. Elementleri oluştururken etkileşime geçmek için kullanmayı planladığım yeni etiket özelliklerini ekledim.

Attığın Mozilla sayfasını incelerken kullanımını görüp araştırdım. HTML 5'de etiketlere özel özellikler tanımlayabiliyormuşuz. Böylece id veya class kısmını gereksiz yere meşgul etmek zorunda kalmayacağız. Daha anlamlı ve erişmesi kolay isimler kullanabileceğiz.

resim

data-question
data-answer
data-go

Zaten daha önceden cevaplar başka soruya mı yoksa sonuca mı götürüyor ekrana yazdırmıştık. Eklediğim resim de de hâlâ yazıyor. Şimdi onun yerine bu değerleri data-go özelliğinin içine ekledim. Eğer birden fazla sonuç varsa da virgülle ayırmasını sağladım ki daha sonra kullanırken o değerleri ayrıştırıp kullanabilelim. Yoksa hepsini birleşik biçimde tutardı.

Sonrasında ufak bir deneme hazırladım. data-answer özelliğine ait tüm li etiketlerini seçtim. Bunlardan birisine tıklandığı zaman ilgili cevabın data-go değerini konsola yazdırdım. resim

Sonuç: resim Bunu mevcut soruyu silip, sonraki aşamaya geçerken kullanacağız.

fatihmeh commented 5 years ago

Geçen gün sorduğum şeyde aynı şekilde kullanım olduğunu gördüm. image

fatihmeh commented 5 years ago

Kod aşamasını buradan devam ettirelim.

https://github.com/fatihmeh/Choose-Your-Operating-System/tree/branch-kod

fatihmeh commented 5 years ago

9 ile beraber issue kapandı.