Skip to content

Commit

Permalink
the end
Browse files Browse the repository at this point in the history
  • Loading branch information
@kaplanh
kaplanh committed Jan 29, 2024
1 parent e97abee commit 624150c
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 100 deletions.
217 changes: 118 additions & 99 deletions checkout.html
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,129 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/universal.css" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<script
src="https://kit.fontawesome.com/5c7edfd842.js"
crossorigin="anonymous"
></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Checkout</title>
</head>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/universal.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/5c7edfd842.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Checkout</title>
</head>

<body>
<h1 id="checkout-title">Checkout</h1>
<main>
<div id="products-preview">
<div id="product-painel">
<div class="products">
<div class="product">
<img src="img/photo1.png" alt="">
<div class="product-info">
<h2>Vintage Backbag</h2>
<div class="product-price">
<p><strong>25.98</strong> <span class="line-through">34.99</span></p>
</div>
<div class="quantity-controller">
<span class="minus">-</span>
<p id="product-quantity">1</p>
<span class="plus">+</span>
</div>
<div class="product-removal">
<button class="remove-product">
Remove
</button>
<body>
<h1 id="checkout-title">Checkout</h1>
<main>
<section><form action=""></form></section>
<section>
<div id="products-preview">
<div id="product-painel">
<div class="products">
<div class="product">
<img src="img/photo1.png" alt="" />
<div class="product-info">
<h2>Vintage Backbag</h2>
<div class="product-price">
<p>
<strong>25.98</strong>
<span class="line-through"
>34.99</span
>
</p>
</div>
<div class="quantity-controller">
<span class="minus">-</span>
<p id="product-quantity">1</p>
<span class="plus">+</span>
</div>
<div class="product-removal">
<button class="remove-product">
Remove
</button>
</div>
<div class="product-line-price">25.98</div>
</div>
</div>
<div class="product-line-price">25.98</div>

</div>
</div>

<div class="product">
<img src="img/photo2.png" alt="">
<div class="product-info">
<h2>Levi Shoes</h2>
<div class="product-price">
<p><strong>45.99</strong> <span class="line-through">54.99</span></p>
<div class="product">
<img src="img/photo2.png" alt="" />
<div class="product-info">
<h2>Levi Shoes</h2>
<div class="product-price">
<p>
<strong>45.99</strong>
<span class="line-through"
>54.99</span
>
</p>
</div>
<div class="quantity-controller">
<span class="minus">-</span>
<p id="product-quantity">1</p>
<span class="plus">+</span>
</div>
<div class="product-removal">
<button class="remove-product">
Remove
</button>
</div>
<div class="product-line-price">45.99</div>
</div>
</div>
<div class="quantity-controller">
<span class="minus">-</span>
<p id="product-quantity">1</p>
<span class="plus">+</span>
</div>
<div class="product-removal">
<button class="remove-product">
Remove
</button>
</div>
<div class="product-line-price">45.99</div>

</div>
</div>

<div class="product">
<img src="img/photo3.jpg" alt="">
<div class="product-info">
<h2>Antique Clock</h2>
<div class="product-price">
<p><strong>74.99</strong> <span class="line-through">94.99</span></p>
</div>
<div class="quantity-controller">
<span class="minus">-</span>
<p id="product-quantity">1</p>
<span class="plus">+</span>
<div class="product">
<img src="img/photo3.jpg" alt="" />
<div class="product-info">
<h2>Antique Clock</h2>
<div class="product-price">
<p>
<strong>74.99</strong>
<span class="line-through"
>94.99</span
>
</p>
</div>
<div class="quantity-controller">
<span class="minus">-</span>
<p id="product-quantity">1</p>
<span class="plus">+</span>
</div>
<div class="product-removal">
<button class="remove-product">
Remove
</button>
</div>
<div class="product-line-price">74.99</div>
</div>
</div>
<div class="product-removal">
<button class="remove-product">
Remove
</button>
</div>
<div class="product-line-price">74.99</div>
</div>
<div class="buy-detail" id="cart-subtotal">
<p>Subtotal</p>
<p>0</p>
</div>
<div class="buy-detail" id="cart-tax">
<p>Tax(%18)</p>
<p>0</p>
</div>
<div class="buy-detail" id="cart-shipping">
<p>Shipping</p>
<p>0</p>
</div>
<div class="buy-detail" id="cart-total">
<p>Total</p>
<p>0</p>
</div>
</div>
</div>
<div class="buy-detail" id="cart-subtotal">
<p>Subtotal</p>
<p>0</p>
</div>
<div class="buy-detail" id="cart-tax">
<p>Tax(%18)</p>
<p>0</p>
</div>
<div class="buy-detail" id="cart-shipping">
<p>Shipping</p>
<p>0</p>
</div>
<div class="buy-detail" id="cart-total">
<p>Total</p>
<p>0</p>
</div>
</div>

</div>
</main>
<script src="checkout.js"></script>
</body>

</html>
</section>
</main>
<script src="checkout.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion checkout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ window.addEventListener("load", () => {

//*-----capturing vs. bubbling------
//! tüm elementlere ulasabilecegim en yakin parenti secmeliyiz fazladan kaynak tüketmemek icin
// !en huzlisi getElementById ikinci hizli querySelector dür
// !en hizlisi getElementById ikinci hizli querySelector dür
let productsDiv = document.querySelector(".products");//console.log() icine yazmadan da document.querySelector('.products') bu ifadeyi console tasiyip yakalayip yakalayamadigimizi kontrol edebiliriz
productsDiv.addEventListener("click", (e) => {
//!console.log(event.target); event.target evente maruz kalan elementi temsil eder
Expand Down

0 comments on commit 624150c

Please sign in to comment.