CSS3 ve jQuery ile Ödeme Formu Oluşturma

CSS3 ve jQuery ile Ödeme Formu Oluşturma


HTML, CSS3 ve biraz jQuery kullanarak bir Alışveriş Ödeme Formu oluşturacağız. Bu yazı için, özellikle de Montserrat için Google Yazı Tiplerini kullanacağız.
 
 
HTML
 
 
Yapmamız gereken ilk şey, HTML yapımızı oluşturmaktır. Herşeyi sarmak için bir konteynere ihtiyacımız var, biz buna “kontrol paneli” adını vereceğiz. İçeride iki ana bölüm, bir gövde ve bir altbilgi olacak.
 
 
  • Adım ilerleme çubuğu
  • Iki ödeme yöntemleri
  • Bazı giriş alanları
  • Alt Bilgi
 
 
Bu, ödeme paneli için kod:
 
 
 
CSS
 
 
Artık HTML ile işimiz bittiğinde, kontrol panelimizin harika görünmesini sağlayalım. Sayfamıza biraz temel stil ve panelimizi vereceğiz.
 
kodlar:
 
 
Şimdi, .checkout panelimizi şekillendirelim ve 940 × 766 piksel yapalım.
 
 
İlk olarak, gövdeye dolgu ekleyin ve başlığı stilleyin:
 
 
 
Bir sonraki eleman .progress-bar'dır. Pseudo öğelerini kullanacağız önce ilerletme çubuğunu biçimlendirelim.
 
 
 
Sözde elemanların gücüne ve bunu ilerleme çubuğunu yapmak için nasıl kullandığımıza dikkat edin.
 
Bir sonraki öğe .payment-method'dur. İki ödeme yöntemimiz var. Biri kredi kartı ve biri PayPal için. Alanı iki sütuna ayırın ve flexbox kullanarak hizalayın.
 
 
Şimdi kartlar hakkında bilgi içeren çoklu giriş alanlarına sahip bir bölümümüz var. Kenarlığın rengini değiştirebiliriz. Odak ve her giriş etiketi için bir simge ekleyin.
 
 
Neredeyse tamamız. Stile ihtiyacımız olan son şey .panel-footer. Burada iki düğme var, bir .back-btn ve diğer, .next-btn; Flexbox kullanarak bunları uygun şekilde hizalayın.
 
 

Onlara farklı renkler verin ve onları biraz hareketlendirin, bu yüzden dönüşüm ve geçişi kullanarak biraz ölçekleyen bir gezinti eylemi var.

 

 

Ödeme yöntemini tıkladığınızda sadece düğmesini kontrol ettiğine dikkat edin. Daha fazla incelik için, kontrol edildiğinde kutunun kenarlık rengini değiştirin. JQuery'yi kullanarak bunu yapın.
 
Öncelikle jQuery'yi dahil ettiğinizden emin olun ve ardından mavi kenarlıklı bir sınıf ekleyin.
 
 
JavaScript dosyasında, aşağıdaki kod satırlarını ekleyin:
 
 
Ayrıca giriş alanlarını da doğrulayalım. Bir sonraki düğmeye tıklarsanız ve girişlerden biri boşsa, kenarlık kırmızı olmalıdır, bu yüzden sınıfla birlikte bir css dosyası ekleyin.
 
 
Ve JS dosyamızdaki JS doğrulaması:
 
 

 

 YUKARI