# Chuẩn bị giao diện

<figure><img src="https://2086325979-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOfwU52oyTCInVkN26DVZ%2Fuploads%2F9xWohkfglXKYM2Su7gaf%2Fimage.png?alt=media&#x26;token=44bdec39-d352-4f59-adda-a1b42ccbfc2e" alt=""><figcaption></figcaption></figure>

C:\Users\Administrator\Desktop\typescript-master\index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
  <header>
    <div class="container-fluid">
      <div class="row">
        <img src="./images/header.png" alt="Header">
      </div>
    </div>
  </header>
  <main class="py-3">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="alert alert-primary" role="alert">Đã được thêm ...</div>
        </div>
        <div class="col-md-12">
          <div class="jumbotron-fluid bg-light">
            <div class="container">
              <p class="lead py-2">Items <span id="countcart" class="text-success">( 2 items)</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="container">
          <div class="row">
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" id="productspurchased">
              <div class="row">
                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                  <div class="row">
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                      <img style=" max-width: 150px; object-fit: cover; " src="./images/1.jpg" alt="1.jpg">
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                      <a class="d-inline-block mb-2 text-success">Docter 1</a>
                      <p>Description Docter 1</p>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 mt-2">
                      <p class="text-success">1000 đ</p>
                      <input type="number" class="form-control countproduct" data-idproduct="1" min="1" value="1">
                    </div>
                  </div>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 mt-5">
                  <button type="button" class="btn btn-success deleteproduct" data-idproduct="1">DELETE</button>
                </div>
              </div>
              <div class="row">
                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                  <div class="row">
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                      <img style=" max-width: 150px; object-fit: cover; " src="./images/2.jpg" alt="2.jpg">
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                      <a class="d-inline-block mb-2 text-success">Docter 2</a>
                      <p>Description Docter 2</p>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 mt-2">
                      <p class="text-success">2000 đ</p>
                      <input type="number" class="form-control countproduct" data-idproduct="2" min="1" value="1">
                    </div>
                  </div>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 mt-5">
                  <button type="button" class="btn btn-success deleteproduct" data-idproduct="2">DELETE</button>
                </div>
              </div>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
              <ul class="list-group list-group-flush border">
                <li class="list-group-item"><span>Tạm tính:</span><span id="provisionalprice">3000 đ</span></li>
                <li class="list-group-item"><span>Tổng giá:</span><span id="intomoney">3000 đ</span>
                  <p class="text-warning mb-0">(Đã bao gồm VAT)</p>
                </li>
              </ul><button type="button" class="btn btn-success btn-lg btn-block mt-4">Xem thêm</button>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="jumbotron-fluid bg-light">
            <div class="container">
              <p class="lead py-2">Bài viết tương tự</p>
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <div class="row" id="relatedproducts">
            <div class="col-md-3">
              <div class="card mb-4 shadow-sm">
                <img src="./images/1.jpg" alt="1.jpg">
                <div class="card-body">
                  <p class="text-success text-center">1000</p>
                  <p class="text-success text-center">Docter 1</p>
                  <p class="card-text">Description Docter 1</p>
                  <div class="d-flex justify-content-center align-items-center">
                    <button type="button" class=" btn btn-primary btn-sm buynow" data-idsp="1">Xem thêm</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="card mb-4 shadow-sm">
                <img src="./images/2.jpg" alt="2.jpg">
                <div class="card-body">
                  <p class="text-success text-center">2000</p>
                  <p class="text-success text-center">Docter 2</p>
                  <p class="card-text">Description Docter 2</p>
                  <div class="d-flex justify-content-center align-items-center">
                    <button type="button" class=" btn btn-primary btn-sm buynow" data-idsp="2">Xem thêm</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="card mb-4 shadow-sm">
                <img src="./images/3.jpg" alt="3.jpg">
                <div class="card-body">
                  <p class="text-success text-center">3000</p>
                  <p class="text-success text-center">Docter 3</p>
                  <p class="card-text">Description Docter 3</p>
                  <div class="d-flex justify-content-center align-items-center">
                    <button type="button" class=" btn btn-primary btn-sm buynow" data-idsp="3">Xem thêm</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="card mb-4 shadow-sm">
                <img src="./images/2.jpg" alt="2.jpg">
                <div class="card-body">
                  <p class="text-success text-center">4000</p>
                  <p class="text-success text-center">Docter 4</p>
                  <p class="card-text">Description Docter 4</p>
                  <div class="d-flex justify-content-center align-items-center">
                    <button type="button" class=" btn btn-primary btn-sm buynow" data-idsp="4">Xem thêm</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer class="border-top">
    <div class="container-fluid">
      <div class="row">
        <img src="./images/footer.png" alt="Footer">
      </div>
    </div>
  </footer>
</body>
</html>
```

{% file src="<https://2086325979-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOfwU52oyTCInVkN26DVZ%2Fuploads%2FtmBr827AWbetsx7401oS%2Ftypescript-shop-1.zip?alt=media&token=0aede897-9547-4620-a372-07a92ceb4530>" %}
