nL +D 550 H ? M x ,D"v ] q v ;6 * Z qn )ZP 0 !1 A "#a$2Qr
<!DOCTYPE html>
<html lang="en-US">
<!-- Mirrored from html.ditsolution.net/mediful/cart.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 21 Feb 2025 05:15:58 GMT -->
<head>
<meta charset="UTF-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Mediful Psychology & Counseling HTML Template</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Favicon -->
<link
rel="icon"
type="image/png"
sizes="56x56"
href="assets/images/fav-icon/icon.png"
/>
<!-- bootstrap CSS -->
<link
rel="stylesheet"
href="assets/css/bootstrap.min.css"
type="text/css"
media="all"
/>
<!-- animate CSS -->
<link
rel="stylesheet"
href="assets/css/animate.css"
type="text/css"
media="all"
/>
<!-- font-awesome CSS -->
<link
rel="stylesheet"
href="assets/css/all.min.css"
type="text/css"
media="all"
/>
<!-- font-flaticon CSS -->
<link
rel="stylesheet"
href="assets/css/flaticon.css"
type="text/css"
media="all"
/>
<!-- theme-default CSS -->
<link
rel="stylesheet"
href="assets/css/theme-default.css"
type="text/css"
media="all"
/>
<!-- meanmenu CSS -->
<link
rel="stylesheet"
href="assets/css/meanmenu.min.css"
type="text/css"
media="all"
/>
<!-- venobox CSS -->
<link
rel="stylesheet"
href="venobox/venobox.css"
type="text/css"
media="all"
/>
<!-- bootstrap icons -->
<link
rel="stylesheet"
href="assets/css/bootstrap-icons.css"
type="text/css"
media="all"
/>
<!-- magnific popup css -->
<link
rel="stylesheet"
href="assets/css/magnific-popup.css"
type="text/css"
media="all"
/>
<!-- carousel css -->
<link
rel="stylesheet"
href="assets/css/owl.carousel.min.css"
type="text/css"
media="all"
/>
<!-- Main Style CSS -->
<link
rel="stylesheet"
href="assets/css/style.css"
type="text/css"
media="all"
/>
<link rel="stylesheet" href="assets/css/odometer-theme-default.css" />
<!-- responsive CSS -->
<link rel="stylesheet" href="assets/css/aos.css" />
<link
rel="stylesheet"
href="assets/css/responsive.css"
type="text/css"
media="all"
/>
<link rel="stylesheet" href="assets/css/swiper-bundle.css" />
<!-- modernizr js -->
<script src="assets/js/vendor/modernizr-3.5.0.min.js"></script>
</head>
<body>
<!-- loder -->
<div class="loader-wrapper">
<div class="loader"></div>
<div class="loder-section left-section"></div>
<div class="loder-section right-section"></div>
</div>
<!-- Curser Pointer -->
<div class="cursor"></div>
<div class="cursor2"></div>
<!--==================================================-->
<!-- Start mediful Header top area -->
<!--==================================================-->
<div class="header-top-area">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="header-top-info">
<ul>
<li><i class="fa-solid fa-phone-volume"></i><span>(+1) 4444 444 444</span></li>
<li><i class="fa-solid fa-envelope"></i><span>Example@gmail.com</span></li>
<li><i class="fa-solid fa-location-dot"></i><span>103 Mallin Street, NY 10025</span></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="header-top-social-right">
<div class="header-top-social">
<div class="header-social-title">
<h5>Our Social:</h5>
</div>
<ul class="top-social-icon">
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
<div class="header-time-line">
<p><i class="fa-solid fa-clock"></i><span>Mon-Fri: 10am-18pm</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--==================================================-->
<!-- End mediful Header top area -->
<!--==================================================-->
<!--==================================================-->
<!-- Start mediful Main Menu Area -->
<!--==================================================-->
<div id="sticky-header" class="mediful_nav_manu styl-one">
<div class="container-fluid">
<div class="row menu-bg d-flex align-items-center">
<div class="col-xl-2 col-lg-2">
<div class="logo">
<a class="logo_img" href="index.html" title="mediful">
<img src="assets/images/logo.png" alt="logo">
</a>
<a class="main_sticky" href="index.html" title="mediful">
<img src="assets/images/logo-w.png" alt="astute">
</a>
</div>
</div>
<div class="col-xl-8 col-lg-7">
<nav class="mediful_menu">
<ul class="nav_scroll">
<li><a href="#">Home<i class="fa-solid fa-plus"></i></a>
<ul class="sub-menu">
<li><a href="index.html">Home Version 01</a></li>
<li><a href="index-2.html">Home Version 02</a></li>
<li><a href="index-3.html">Home Version 03</a></li>
</ul>
</li>
<li><a href="#">Pages<i class="fa-solid fa-plus"></i></a>
<ul class="sub-menu">
<li><a href="about.html">About</a></li>
<li><a href="case-study.html">Case Studies</a></li>
<li><a href="case-details.html">Case Studies details</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="team-details.html">Team Details</a></li>
<li><a href="testimonial.html">Testimonials</a></li>
<li><a href="appointment.html">Appointment</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="choose.html">Why Choose</a></li>
<li><a href="faq.html">Faq</a></li>
<li><a href="registration.html">Registration</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
<li><a href="#">Services<i class="fa-solid fa-plus"></i></a>
<ul class="sub-menu">
<li><a href="service.html">Services</a></li>
<li><a href="service-details.html">Services Details</a></li>
</ul>
</li>
<li><a href="#">Shop<i class="fa-solid fa-plus"></i></a>
<ul class="sub-menu">
<li><a href="shop.html">Shop</a></li>
<li><a href="shop-details.html">Shop Details</a></li>
<li><a href="cart.html">Shopping Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</li>
<li><a href="#">Blog<i class="fa-solid fa-plus"></i></a>
<ul class="sub-menu">
<li><a href="blog-grid.html">Blog Grid</a></li>
<li><a href="blog-list.html">Blog List</a></li>
<li><a href="blog-2column.html">Blog 2Column</a></li>
<li><a href="blog-details.html">Blog Details</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="header-sidebar">
<button class="cart_btn headers-button" type="button">
<i class="fa-solid fa-cart-shopping"></i>
<small class="cart_counter">0</small>
</button>
<div class="header-src-btn">
<div class="search-box-btn search-box-outer"><i class="fa-solid fa-magnifying-glass"></i></div>
</div>
</div>
</nav>
</div>
<div class="col-xl-2 col-lg-3">
<div class="header-btn">
<a href="contact.html">MAKE AN APPOINTMENT</a>
</div>
</div>
</div>
</div>
</div>
<!-- mediful Mobile Menu Area -->
<div class="mobile-menu-area sticky d-sm-block d-md-block d-lg-none ">
<div class="mobile-menu">
<nav class="mediful_menu">
<div class="mobile-logo">
<a class="logo_img" href="index.html" title="mediful">
<img src="assets/images/logo-w.png" alt="logo" />
</a>
</div>
<ul class="nav_scroll">
<li><a href="#">Home<i class="fa-solid fa-plus"></i></a>
<ul class="sub-menu">
<li><a href="index.html">Home Version 01</a></li>
<li><a href="index-2.html">Home Version 02</a></li>
<li><a href="index-3.html">Home Version 03</a></li>
</ul>
</li>
<li><a href="#">Pages<i class="fa-solid fa-plus"></i></a>
<ul class="sub-menu">
<li><a href="about.html">About</a></li>
<li><a href="case-study.html">Case Studies</a></li>
<li><a href="case-details.html">Case Studies details</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="team-details.html">Team Details</a></li>
<li><a href="testimonial.html">Testimonials</a></li>
<li><a href="appointment.html">Appointment</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="choose.html">Why Choose</a></li>
<li><a href="faq.html">Faq</a></li>
<li><a href="registration.html">Registration</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
<li><a href="#">Services<i class="fa-solid fa-plus"></i></a>
<ul class="sub-menu">
<li><a href="service.html">Services</a></li>
<li><a href="service-details.html">Services Details</a></li>
</ul>
</li>
<li><a href="#">Shop<i class="fa-solid fa-plus"></i></a>
<ul class="sub-menu">
<li><a href="shop.html">Shop</a></li>
<li><a href="shop-details.html">Shop Details</a></li>
<li><a href="cart.html">Shopping Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</li>
<li><a href="#">Blog<i class="fa-solid fa-plus"></i></a>
<ul class="sub-menu">
<li><a href="blog-grid.html">Blog Grid</a></li>
<li><a href="blog-list.html">Blog List</a></li>
<li><a href="blog-2column.html">Blog 2Column</a></li>
<li><a href="blog-details.html">Blog Details</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
<!--==================================================-->
<!-- End mediful Main Menu Area -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Search Popup -->
<!--==================================================-->
<div class="search-popup">
<button class="close-search style-two"><i class="fas fa-times"></i></button>
<button class="close-search"><i class="fas fa-arrow-up"></i></button>
<form method="post" action="#">
<div class="form-group">
<input id="search1" type="search" name="search-field" value="" placeholder="Search Here" required="">
<button type="submit"><i class="fas fa-search"></i></button>
</div>
</form>
</div>
<!--==================================================-->
<!-- End Search Popup -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Cart Side Bar -->
<!--==================================================-->
<div class="sidebar-menu-wrapper">
<div class="cart_sidebar">
<button type="button" class="close_btn"><i class="fas fa-times"></i></button>
<h2 class="heading_title text-uppercase">Cart Items - <span>4</span></h2>
<div class="cart_items_list">
<div class="cart_item">
<div class="item_image">
<img src="assets/images/inner/recent-post.png" alt="image_not_found">
</div>
<div class="item_content">
<h4 class="item_title">
Rorem ipsum dolor sit amet, sectetur adipisi cingey.
</h4>
<span class="item_price">$21.00</span>
<button type="button" class="remove_btn"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="cart_item">
<div class="item_image">
<img src="assets/images/inner/recent-post1.png" alt="image_not_found">
</div>
<div class="item_content">
<h4 class="item_title">
sectetur adipisi cingey, Rorem ipsum dolor sit amet.
</h4>
<span class="item_price">$23.00</span>
<button type="button" class="remove_btn"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="cart_item">
<div class="item_image">
<img src="assets/images/inner/recent-post2.png" alt="image_not_found">
</div>
<div class="item_content">
<h4 class="item_title">
Rorem ipsum dolor sit amet, sectetur adipisi cingey.
</h4>
<span class="item_price">$25.00</span>
<button type="button" class="remove_btn"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="cart_item">
<div class="item_image">
<img src="assets/images/inner/recent-post3.png" alt="image_not_found">
</div>
<div class="item_content">
<h4 class="item_title">
sectetur adipisi cingey, Rorem ipsum dolor sit amet.
</h4>
<span class="item_price">$19.00</span>
<button type="button" class="remove_btn"><i class="fas fa-times"></i></button>
</div>
</div>
</div>
<div class="total_price text-uppercase">
<span>Sub Total:</span>
<span>$88.00</span>
</div>
<ul class="btns_group ul_li">
<li><a href="cart.html" class="btn btn_primary text-uppercase">View Cart</a></li>
<li><a href="checkout.html" class="btn btn_border border_black text-uppercase">Checkout</a></li>
</ul>
</div>
<div class="cart_sidebar_overlay"></div>
</div>
<!--==================================================-->
<!-- End Cart Side Bar -->
<!--==================================================-->
<!--==================================================-->
<!--start mediful breadcumb Area-->
<!--==================================================-->
<div class="breadcumb-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="breadcumb-content">
<h4>Shopping Cart</h4>
<ul class="breadcumb-list">
<li><a href="index.html">Home</a></li>
<li class="list-arrow">/</li>
<li>Shopping Cart</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--==================================================-->
<!--end mediful breadcumb Area-->
<!--==================================================-->
<!--==================================================-->
<!-- mediful Checkout Alert JS -->
<!--==================================================-->
<div class="alert-js">
<span class="alert-overlay"></span>
<div class="alert-box">
<i class="bi bi-check-circle"></i>
<h2>Checkout</h2>
<h3>You have sucessfully Product Selected.</h3>
<div class="alert-buttons">
<a class="closebtn" title="close">Ok, Close</a>
<a href="checkout.html" title="Proceed">Checkout</a>
</div>
</div>
</div>
<!--==================================================-->
<!-- mediful Checkout Alert JS -->
<!--==================================================-->
<!--==================================================-->
<!--Start mediful Cart Section-->
<!--==================================================-->
<section class="cart-section" data-cues="zoomIn">
<div class="container">
<div class="row mb-n6 mb-lg-n10">
<div class="col-12 mb-6 mb-lg-10">
<!-- Cart Table For Tablet & Up Devices Start -->
<table class="cart-table table table-bordered text-center align-middle mb-6 d-none d-md-table">
<thead>
<tr>
<th class="imag">Image</th>
<th class="titl">Product</th>
<th class="pric">Price</th>
<th class="quantit">Quantity</th>
<th class="tota">Total</th>
<th class="remov">Remove</th>
</tr>
</thead>
<tbody class="border-top-0">
<tr data-id="1">
<th><a href="shop-details.html">
<img src="assets/images/inner/cart-thumb1.png" alt="img">
</a></th>
<td><a href="shop-details.html">Teddy Bear Toy</a></td>
<td class="price">$110.00</td>
<td>
<div class="product-quantity-count">
<input class="quantity" type="number" name="quantity" min="1" value="1">
</div>
</td>
<td class="total">$110.00</td>
<td><button class="remove-btn"><i class="fas fa-times"></i></button></td>
</tr>
<tr>
<th><a href="shop-details.html">
<img src="assets/images/inner/cart-thumb2.png" alt="img">
</a></th>
<td><a href="shop-details.html">Skywinder Toy</a></td>
<td class="price">$19.00</td>
<td>
<div class="product-quantity-count">
<input class="quantity" type="number" name="quantity" min="1" value="1">
</div>
</td>
<td class="total">$19.00</td>
<td><button class="remove-btn"><i class="fas fa-times"></i></button></td>
</tr>
</tbody>
</table>
<!-- Cart Table For Tablet & Up Devices End -->
<!-- Cart Table For Mobile Devices Start -->
<div class="cart-products-mobile d-md-none">
<div class="cart-product-mobile">
<div class="cart-product-mobile-thumb">
<a href="shop-details.html" class="cart-product-mobile-image">
<img src="assets/images/inner/cart-thumb1.png" alt="mediful Original" width="90" height="103">
</a>
<button class="cart-product-mobile-remove"><i class="bi bi-x-circle"></i></button>
</div>
<div class="cart-product-mobile-content">
<h5 class="cart-product-mobile-title">
<a href="shop-details.html">Teddy Bear Toy</a>
</h5>
<span class="cart-product-mobile-quantity">1 x <span class="price2">$110.00</span></span>
<span class="cart-product-mobile-total"><b>Total:</b> <span class="total2">$110.00</span> </span>
<div class="product-quantity-count">
<input class="quantity2" type="number" name="quantity" min="1" value="1">
</div>
</div>
</div>
<div class="cart-product-mobile">
<div class="cart-product-mobile-thumb">
<a href="shop-details.html" class="cart-product-mobile-image">
<img src="assets/images/inner/cart-thumb1.png" alt="" width="90" height="103">
</a>
<button class="cart-product-mobile-remove"><i class="bi bi-x-circle"></i></button>
</div>
<div class="cart-product-mobile-content">
<h5 class="cart-product-mobile-title"><a href="shop-details.html">Skywinder Toy</a></h5>
<span class="cart-product-mobile-quantity">1 x <span class="price2">$18.00</span></span>
<span class="cart-product-mobile-total"><b>Total:</b> <span class="total2">$18.00</span> </span>
<div class="product-quantity-count">
<input class="quantity2" type="number" name="quantity" min="1" value="1">
</div>
</div>
</div>
</div>
<!-- Cart Table For Mobile Devices End -->
<!-- Cart Action Buttons Start -->
<div class="row justify-content-between gap-3">
<div class="col-auto"><button class="btn btn_primary">Continue Shopping</button></div>
<div class="col-auto d-flex flex-wrap gap-3">
<button class="btn btn_primary">Update Cart</button>
<button class="btn btn_border border_black">Clear Cart</button>
</div>
</div>
<!-- Cart Action Buttons End -->
</div>
<!-- Cart Totals Start -->
<div class="col mb-6 d-none d-md-table">
<div class="cart-totals">
<h4 class="title">Cart totals</h4>
<table class="table table-borderless bg-transparent">
<tbody>
<tr class="subtotal">
<th>Subtotal</th>
<td><span id="subtotal">£242.00</span></td>
</tr>
<tr class="shopping-fee">
<th>Shopping Fee</th>
<td><span id="shopping">$5.00</span></td>
</tr>
<tr class="total">
<th>Total</th>
<td><strong><span id="total">£242.00</span></strong></td>
</tr>
</tbody>
</table>
<button class="show-alert btn btn-dark">Proceed to checkout</button>
</div>
</div>
<!-- Cart Totals End -->
<!-- Cart Totals For Mobile Devices Start -->
<div class="col d-md-none">
<div class="cart-totals">
<h4 class="title">Cart totals</h4>
<table class="table table-borderless bg-transparent">
<tbody>
<tr class="subtotal">
<th>Subtotal</th>
<td><span id="subtotal2">£242.00</span></td>
</tr>
<tr class="shopping-fee">
<th>Shopping Fee</th>
<td><span id="shopping2">$5.00</span></td>
</tr>
<tr class="total">
<th>Total</th>
<td><strong><span id="total2">£242.00</span></strong></td>
</tr>
</tbody>
</table>
<button class="show-alert btn">Proceed to checkout</button>
</div>
</div>
<!-- Cart Totals For Mobile Devices End -->
</div>
</div>
</section>
<!--==================================================-->
<!--Start mediful Cart Section-->
<!--==================================================-->
<!--==================================================-->
<!-- Start mediful Footer Area -->
<!--==================================================-->
<div class="footer-area style-one">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="footer-logo">
<a href="index.html"><img src="assets/images/logo-w.png" alt=""></a>
</div>
<div class="footer-widget-desc">
<p>Firm offer any posible carpentry and
carpentry administrations you may
require. adore finding</p>
</div>
<div class="footer-contact-box">
<div class="phone-icon">
<a href="contact.html"><i class="fa-solid fa-phone-volume"></i></a>
</div>
<div class="contact-info">
<div class="contact-title">
<h5>Free Call</h5>
</div>
<div class="contact-addres">
<p>+1 310 500 7834</p>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6">
<div class="footer-widget-content">
<div class="footer-widget-title">
<h4>Quick Links</h4>
</div>
<div class="footer-widget-menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="service.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget-content">
<div class="footer-widget-title">
<h4>Our Services</h4>
</div>
<div class="footer-widget-menu">
<ul>
<li><a href="case-details.html">Dating & Relation</a></li>
<li><a href="team-details.html">Anxiety Disorder</a></li>
<li><a href="shop-details.html">Personal Counseling</a></li>
<li><a href="service-details.html">Family Counseling</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget-content">
<div class="footer-widget-title">
<h4>Newsletter</h4>
</div>
<p class="f-desc-2">Subscribe our weekly newsletter</p>
<form action="https://formspree.io/f/myyleorq" method="POST">
<div class="footer-newslatter-box">
<input type="text" name="Email" placeholder="Email Address" required>
<button type="submit">S U B S C R I B N O W</button>
</div>
</form>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="footer-bottom-area">
<div class="row">
<div class="col-lg-6 col-md-8">
<div class="footer-bottom-content">
<p>© 2024 mediful. Designed By Dream IT Solution</p>
</div>
</div>
<div class="col-lg-6 col-md-4">
<div class="footer-botton-social-icon">
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--==================================================-->
<!-- end mediful Footer Area -->
<!--==================================================-->
<!--==================================================-->
<!-- Start scrollup section Area -->
<!--==================================================-->
<div id="progress" class="progress hide">
<div id="progress-value"></div>
</div>
<!--==================================================-->
<!-- Start scrollup section Area -->
<!--==================================================-->
<script src="assets/js/vendor/jquery-3.6.2.min.js"></script>
<script src="assets/js/odometer.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="venobox/venobox.js"></script>
<script src="venobox/venobox.min.js"></script>
<script src="assets/js/jquery.meanmenu.js"></script>
<script src="assets/js/jquery.scrollUp.js"></script>
<script src="assets/js/appear.js"></script>
<script src="assets/js/magnific-popup-js.html"></script>
<script src="assets/js/jquery.barfiller.js"></script>
<script src="assets/js/swiper-bundle.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/theme.js"></script>
<script src="assets/js/my.js"></script>
<!-- Cart Add -->
<script>
document.addEventListener("DOMContentLoaded", function () {
// First set of inputs
const set1 = setupInputs(".quantity", ".price", ".total", "subtotal", "shopping", "total");
// Second set of inputs
const set2 = setupInputs(".quantity2", ".price2", ".total2", "subtotal2", "shopping2", "total2");
// Initial calculations for both sets
set1.updateTotals();
set2.updateTotals();
function setupInputs(quantitySelector, priceSelector, totalSelector, subtotalId, shoppingId, totalId) {
const quantityInputs = document.querySelectorAll(quantitySelector);
const priceElements = document.querySelectorAll(priceSelector);
const totalElements = document.querySelectorAll(totalSelector);
const subtotalElement = document.getElementById(subtotalId);
const shoppingElement = document.getElementById(shoppingId);
const totalCostElement = document.getElementById(totalId);
quantityInputs.forEach((input) => {
input.addEventListener("change", updateTotals);
input.addEventListener("input", function () {
this.classList.add("changed");
});
input.addEventListener("blur", function () {
this.classList.remove("changed");
});
});
function updateTotals() {
let subtotal = 0;
for (let i = 0; i < quantityInputs.length; i++) {
const quantity = parseInt(quantityInputs[i].value);
const price = parseFloat(priceElements[i].textContent.replace("$", ""));
const total = quantity * price;
totalElements[i].textContent = "$" + total.toFixed(2);
subtotal += total;
}
const shopping = 5.00;
const totalCost = subtotal + shopping;
subtotalElement.textContent = "$" + subtotal.toFixed(2);
shoppingElement.textContent = "$" + shopping.toFixed(2);
totalCostElement.textContent = "$" + totalCost.toFixed(2);
}
return {
quantityInputs,
priceElements,
totalElements,
subtotalElement,
shoppingElement,
totalCostElement,
updateTotals
};
}
});
document.addEventListener("DOMContentLoaded", function() {
const alertJs = document.querySelector(".alert-js"),
overlay = document.querySelector(".alert-overlay"),
showalertBtn = document.querySelector(".show-alert"),
closealertBtn = document.querySelector(".closebtn");
showalertBtn.addEventListener("click", () => alertJs.classList.add("active"));
overlay.addEventListener("click", () =>
alertJs.classList.remove("active")
);
closealertBtn.addEventListener("click", () =>
alertJs.classList.remove("active")
);
});
</script>
</body>
<!-- Mirrored from html.ditsolution.net/mediful/cart.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 21 Feb 2025 05:15:59 GMT -->
</html>