CSS ve JavaScript ile Alışveriş Sepeti Kullanıcı Arayüzü Oluşturma

CSS ve JavaScript ile Alışveriş Sepeti Kullanıcı Arayüzü Oluşturma


Bu yazıda, HTML ve CSS3 kullanarak bir Alışveriş Sepeti oluşturacağız . Bu eğitici yazı için Google Fontları, daha özel olarak "Roboto" kullanacağız.
 
 
 
 
 
HTML
 
 
1. Adım: HTML yapısını oluşturalım.
 
İlk olarak, "Shopping-cart" ı arayacağımız bir kapsayıcı div gerekiyor. 
containerın içinde bir unvana ve aşağıdakileri içeren öğeye sahibiz.
 
  • iki düğme - sil düğmesi ve favori düğmesi
  • ürün resmi
  • ürün adı ve açıklaması
  • ürün miktarını ayarlayacak düğmeler
  • toplam fiyat

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<div class="shopping-cart">
  
  <div class="title">
    Shopping Bag
  div>
 
  
  <div class="item">
    <div class="buttons">
      <span class="delete-btn">span>
      <span class="like-btn">span>
    div>
 
    <div class="image">
      <img src="item-1.png" alt="" />
    div>
 
    <div class="description">
      <span>Common Projectsspan>
      <span>Bball Highspan>
      <span>Whitespan>
    div>
 
    <div class="quantity">
      <button class="plus-btn" type="button" name="button">
        <img src="plus.svg" alt="" />
      button>
      <input type="text" name="name" value="1">
      <button class="minus-btn" type="button" name="button">
        <img src="minus.svg" alt="" />
      button>
    div>
 
    <div class="total-price">$549div>
  div>
 
  
  <div class="item">
    <div class="buttons">
      <span class="delete-btn">span>
      <span class="like-btn">span>
    div>
 
    <div class="image">
      <img src="item-2.png" alt=""/>
    div>
 
    <div class="description">
      <span>Maison Margielaspan>
      <span>Future Sneakersspan>
      <span>Whitespan>
    div>
 
    <div class="quantity">
      <button class="plus-btn" type="button" name="button">
        <img src="plus.svg" alt="" />
      button>
      <input type="text" name="name" value="1">
      <button class="minus-btn" type="button" name="button">
        <img src="minus.svg" alt="" />
      button>
    div>
 
    <div class="total-price">$870div>
  div>