Eyüp Ensar Horuz
Kilopat
Daha fazla
- Sistem Özellikleri
- AMD Ryzen 5 3100 / SAPPHIRE NITRO+ RX 5500XT SE 8GB / JAMES DONKEY Sata JD480 / Gigabyte B450M H / Apacer Panther 16 GB 3000 mhz / Power Boost VK-T01B 650W 80+Bronz
- Cinsiyet
- Erkek
- Meslek
- Yazılım Geliştirici, Bilgisayar Teknikeri
Merhaba, okul gereği bir online alışveriş sepeti uygulaması üzerinde çalışıyorum. Bu projede ürünler sepete eklenecek, sepet içerisinde ürünler listenirken alt kısımda toplam fiyat ve ödemeye geç butonu olacak. Bu buton beni payment.html sayfasına yönlendirecek. Henüz temel seviyede olduğum için pek beceremedim. Bu kadar kodu youtubedaki kaynaklardan öğrenmeye çalışarak yazdım. Yardımcı olursanız sevinirim. Kod bloklarını ekte bırakıyorum.
const card = document.getElementsByClassName("card");
const btnAdd = document.getElementsByClassName("btn-secondary");
const btnCart = document.querySelector(".btn-cart");
const cartList = document.querySelector(".shopping-cart-list");
class Shopping {
constructor(title, price, image) {
this.image = image;
this.title = title;
this.price = price;
}
}
class UI {
addToCart(shopping) {
const listItem = document.createElement("div");
listItem.classList = "list-item";
listItem.innerHTML = `
<div class="row align-items-center text-white-50">
<div class="col-md-3">
<img src="${shopping.image}" alt="product" class="img-fluid">
</div>
<div class="col-md-5">
<div class="title">${shopping.title}</div>
</div>
<div class="col-md-2">
<div class="price">${shopping.price}</div>
</div>
<div class="col-md-2">
<button class="btn btn-delete">
<i class="fas fa-trash-alt text-danger"></i>
</button>
</div>
</div>
`;
cartList.appendChild(listItem);
}
removeCart() {
let btnRemove = document.getElementsByClassName("btn-delete");
let self = this;
for (let i = 0; i < btnRemove.length; i++) {
btnRemove.addEventListener("click", function () {
this.parentElement.parentElement.parentElement.remove();
self.cartCount();
});
}
}
cartCount() {
let cartListItem = cartList.getElementsByClassName("list-item");
let itemCount = document.getElementById("item-count");
itemCount.innerHTML = cartListItem.length;
}
cartToggle() {
btnCart.addEventListener("click", function () {
cartList.classList.toggle("d-none");
});
}
}
for (let i = 0; i < card.length; i++) {
btnAdd.addEventListener("click", function (e) {
let title = card.getElementsByClassName("card-title")[0].textContent;
let price = card.getElementsByClassName("price")[0].textContent;
let image = card.getElementsByClassName("card-img-top")[0].src;
btnAdd.classList.add("disabled");
btnAdd.textContent = "In Card";
let shopping = new Shopping(title, price, image);
let ui = new UI();
ui.addToCart(shopping);
ui.removeCart();
ui.cartCount();
e.preventDefault();
});
}
document.addEventListener("DOMContentLoaded", () => {
let ui = new UI();
ui.cartToggle();
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<!-- Font-Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Alışveriş Sepeti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="container">
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container">
<a href="" class="navbar-brand">Ana Sayfa</a>
</div>
<div class="shopping-cart position-relative">
<button
type="button"
class="btn-cart btn btn-dark position-relative"
>
<i class="fas fa-shopping-cart"></i>
<span
id="item-count"
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger mt-2"
>0</span
>
</button>
<div class="shopping-cart-list bg-dark d-none">
<b class="fs-5 text-white my-3">Shopping Cart</b>
</div>
</div>
</div>
</nav>
</header>
<section class="products mt-5">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 mb-3">
<div class="card">
<img
src="images/iphone 11.jpeg"
alt="product"
class="card-img-top img-fluid"
/>
<div class="card-body">
<h5 class="card-title">İphone 11 128 GB </h5>
<p class="cart-text">
Ön ve arka gövdesi cam ile kaplı olan iPhone 11, öncelikle tasarımı ile göz doldurucu bir özelliğe sahip. Arka cam yapısının da parlak olması özellikle bir önceki modele göre ciddi bir tasarım farkı yaratıyor. 6.1 inç Liquid Retina IPS LCD ekrana sahip olan bu cihaz, 828 x 1792 piksel çözünürlüğe sahip. Ekran görünümü ve renk parlaklığı konusunda da oldukça canlı bir yapıda üretilmiş.
</p>
<div class="d-flex justify-content-between">
<a class="btn btn-secondary text-white" href="#">Sepete Ekle</a>
<span
class="price badge rounded-pill bg-warning text-dark d-flex align-items-center"
>20.000₺</span
>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-3">
<div class="card">
<img
src="images/iphone 13.jpeg"
alt="product"
class="card-img-top img-fluid"
/>
<div class="card-body">
<h5 class="card-title">iPhone 13 Pro Max 512 GB</h5>
<p class="cart-text">
eknik detaylar iPhone 13 Pro Max Ekran 6.7 inç ProMotion teknolojisine sahip Super Retina XDR ekran Kapasite 128 GB, 256 GB, 512 GB, 1 TB Çözünürlük 458 ppi yoğunlukta 2778 x 1284 piksel çözünürlük Suya, Sıçramalara ve Toza Dayanıklılık 60529 sayılı IEC standardı kapsamında IP68 derecesi (30 dakikaya kadar maksimum 6 metre derinlik) Çip A15 Bionic çip.
</p>
<div class="d-flex justify-content-between">
<a class="btn btn-secondary text-white" href="#">Sepete Ekle</a>
<span
class="price badge rounded-pill bg-warning text-dark d-flex align-items-center"
>35.000₺</span
>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-3">
<div class="card">
<img
src="images/iphone 14.jpeg"
alt="product"
class="card-img-top img-fluid"
/>
<div class="card-body">
<h5 class="card-title">İphone 14 Pro Max 1TB </h5>
<p class="cart-text">
Hep Açık özelliğine ve ProMotion teknolojisine sahip 6.7 inç Super Retina XDR ekran
iPhone’unuzu deneyimlemenin sihirli bir yolunu sunan Dynamic Island
4 kata kadar daha fazla çözünürlük sunan 48 MP Ana kamera
Saniyede 30 kareye kadar 4K Dolby Vision çekim yapan Sinematik mod
Sorunsuz, titremeyen videolar çekmek için Hareket modu
Tüm gün süren pil ömrü ve 29 saate kadar video oynatma.
</p>
<div class="d-flex justify-content-between">
<a class="btn btn-secondary text-white" href="#">Add to Cart</a>
<span
class="price badge rounded-pill bg-warning text-dark d-flex align-items-center"
>55.000₺</span
>
</div>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Düzeltme, kod düzenlemesi çalışmadığı için direk göndermek zorunda kaldım. Moderatör arkadaşlardan özür dilerim şimdiden, ceza yemek istemiyorum.
const card = document.getElementsByClassName("card");
const btnAdd = document.getElementsByClassName("btn-secondary");
const btnCart = document.querySelector(".btn-cart");
const cartList = document.querySelector(".shopping-cart-list");
class Shopping {
constructor(title, price, image) {
this.image = image;
this.title = title;
this.price = price;
}
}
class UI {
addToCart(shopping) {
const listItem = document.createElement("div");
listItem.classList = "list-item";
listItem.innerHTML = `
<div class="row align-items-center text-white-50">
<div class="col-md-3">
<img src="${shopping.image}" alt="product" class="img-fluid">
</div>
<div class="col-md-5">
<div class="title">${shopping.title}</div>
</div>
<div class="col-md-2">
<div class="price">${shopping.price}</div>
</div>
<div class="col-md-2">
<button class="btn btn-delete">
<i class="fas fa-trash-alt text-danger"></i>
</button>
</div>
</div>
`;
cartList.appendChild(listItem);
}
removeCart() {
let btnRemove = document.getElementsByClassName("btn-delete");
let self = this;
for (let i = 0; i < btnRemove.length; i++) {
btnRemove.addEventListener("click", function () {
this.parentElement.parentElement.parentElement.remove();
self.cartCount();
});
}
}
cartCount() {
let cartListItem = cartList.getElementsByClassName("list-item");
let itemCount = document.getElementById("item-count");
itemCount.innerHTML = cartListItem.length;
}
cartToggle() {
btnCart.addEventListener("click", function () {
cartList.classList.toggle("d-none");
});
}
}
for (let i = 0; i < card.length; i++) {
btnAdd.addEventListener("click", function (e) {
let title = card.getElementsByClassName("card-title")[0].textContent;
let price = card.getElementsByClassName("price")[0].textContent;
let image = card.getElementsByClassName("card-img-top")[0].src;
btnAdd.classList.add("disabled");
btnAdd.textContent = "In Card";
let shopping = new Shopping(title, price, image);
let ui = new UI();
ui.addToCart(shopping);
ui.removeCart();
ui.cartCount();
e.preventDefault();
});
}
document.addEventListener("DOMContentLoaded", () => {
let ui = new UI();
ui.cartToggle();
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<!-- Font-Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Alışveriş Sepeti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="container">
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container">
<a href="" class="navbar-brand">Ana Sayfa</a>
</div>
<div class="shopping-cart position-relative">
<button
type="button"
class="btn-cart btn btn-dark position-relative"
>
<i class="fas fa-shopping-cart"></i>
<span
id="item-count"
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger mt-2"
>0</span
>
</button>
<div class="shopping-cart-list bg-dark d-none">
<b class="fs-5 text-white my-3">Shopping Cart</b>
</div>
</div>
</div>
</nav>
</header>
<section class="products mt-5">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 mb-3">
<div class="card">
<img
src="images/iphone 11.jpeg"
alt="product"
class="card-img-top img-fluid"
/>
<div class="card-body">
<h5 class="card-title">İphone 11 128 GB </h5>
<p class="cart-text">
Ön ve arka gövdesi cam ile kaplı olan iPhone 11, öncelikle tasarımı ile göz doldurucu bir özelliğe sahip. Arka cam yapısının da parlak olması özellikle bir önceki modele göre ciddi bir tasarım farkı yaratıyor. 6.1 inç Liquid Retina IPS LCD ekrana sahip olan bu cihaz, 828 x 1792 piksel çözünürlüğe sahip. Ekran görünümü ve renk parlaklığı konusunda da oldukça canlı bir yapıda üretilmiş.
</p>
<div class="d-flex justify-content-between">
<a class="btn btn-secondary text-white" href="#">Sepete Ekle</a>
<span
class="price badge rounded-pill bg-warning text-dark d-flex align-items-center"
>20.000₺</span
>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-3">
<div class="card">
<img
src="images/iphone 13.jpeg"
alt="product"
class="card-img-top img-fluid"
/>
<div class="card-body">
<h5 class="card-title">iPhone 13 Pro Max 512 GB</h5>
<p class="cart-text">
eknik detaylar iPhone 13 Pro Max Ekran 6.7 inç ProMotion teknolojisine sahip Super Retina XDR ekran Kapasite 128 GB, 256 GB, 512 GB, 1 TB Çözünürlük 458 ppi yoğunlukta 2778 x 1284 piksel çözünürlük Suya, Sıçramalara ve Toza Dayanıklılık 60529 sayılı IEC standardı kapsamında IP68 derecesi (30 dakikaya kadar maksimum 6 metre derinlik) Çip A15 Bionic çip.
</p>
<div class="d-flex justify-content-between">
<a class="btn btn-secondary text-white" href="#">Sepete Ekle</a>
<span
class="price badge rounded-pill bg-warning text-dark d-flex align-items-center"
>35.000₺</span
>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-3">
<div class="card">
<img
src="images/iphone 14.jpeg"
alt="product"
class="card-img-top img-fluid"
/>
<div class="card-body">
<h5 class="card-title">İphone 14 Pro Max 1TB </h5>
<p class="cart-text">
Hep Açık özelliğine ve ProMotion teknolojisine sahip 6.7 inç Super Retina XDR ekran
iPhone’unuzu deneyimlemenin sihirli bir yolunu sunan Dynamic Island
4 kata kadar daha fazla çözünürlük sunan 48 MP Ana kamera
Saniyede 30 kareye kadar 4K Dolby Vision çekim yapan Sinematik mod
Sorunsuz, titremeyen videolar çekmek için Hareket modu
Tüm gün süren pil ömrü ve 29 saate kadar video oynatma.
</p>
<div class="d-flex justify-content-between">
<a class="btn btn-secondary text-white" href="#">Add to Cart</a>
<span
class="price badge rounded-pill bg-warning text-dark d-flex align-items-center"
>55.000₺</span
>
</div>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Düzeltme, kod düzenlemesi çalışmadığı için direk göndermek zorunda kaldım. Moderatör arkadaşlardan özür dilerim şimdiden, ceza yemek istemiyorum.
