My Slide Out Shopping Cart Wont Scroll With Page

My Slide Out Shopping Cart Wont Scroll With Page - javascript

https://github.com/koukalcreativeco/Web-Store.git
Github code is above, I have a slide out shopping cart on this page. When I add too many items to the cart they start to go off the screen. I want to be able to scroll down on the cart. How would I go about doing that?

This one can be implemented quite easily by making use of the overflow attribute of your .shoppingcart class in CSS.
Simply add overflow: auto to the shopping cart class as shown below.
/* adding functions to buttons */
const ready = () => {
var removeCartItemButtons = document.getElementsByClassName('bt-remove');
for (let i = 0; i < removeCartItemButtons.length; i++){
var button = removeCartItemButtons[i];
button.addEventListener('click', removeCartItem);
}
var quantityInputs = document.getElementsByClassName('cart-quantity-input');
for (let i = 0; i < quantityInputs.length; i++){
var input = quantityInputs[i];
input.addEventListener('click', quantityChanged);
}
var addToCartButtons = document.getElementsByClassName('add-item-button');
for(let i = 0; i < addToCartButtons.length; i++){
var button = addToCartButtons[i];
button.addEventListener('click', addToCartClicked);
}
document.getElementsByClassName('bt-purchase')[0].addEventListener('click', purchaseClicked);
}
/* In cart buttons and quantity */
function purchaseClicked() {
alert('Thank you for your purchase')
var cartItems = document.getElementsByClassName('cart-items')[0]
while (cartItems.hasChildNodes()) {
cartItems.removeChild(cartItems.firstChild)
}
updateCartTotal()
}
function removeCartItem(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged(event) {
var input = event.target
if (isNaN(input.value) || input.value <= 0) {
input.value = 1
}
updateCartTotal()
}
/* Adding Items to the Cart */
const addToCartClicked = (event) => {
var button = event.target;
var shopItem = button.parentElement.parentElement;
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText;
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText;
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src;
addItemToCart(title, price, imageSrc);
updateCartTotal();
}
const addItemToCart = (title, price, imageSrc) => {
var cartRow = document.createElement('div');
cartRow.classList.add('cart-row');
var cartItems = document.getElementsByClassName('cart-items')[0];
var cartItemNames = cartItems.getElementsByClassName('cart-item-title');
for(let i = 0; i < cartItemNames.length; i++){
if (cartItemNames[i].innerText == title){
alert('This item is already added to the cart')
return
}
}
var cartRowContents = `
<div class="cart-item cart-column">
<img class="cart-item-image" src="${imageSrc}" width="50" height="50">
<span class="cart-item-title">${title}</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="bt bt-remove" type="button">REMOVE</button>
</div>`
cartRow.innerHTML = cartRowContents;
cartItems.append(cartRow);
cartRow.getElementsByClassName('bt-remove')[0].addEventListener('click', removeCartItem);
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged);
}
/* Updating Total */
const updateCartTotal = () => {
var cartItemContainer = document.getElementsByClassName('cart-items')[0];
var cartRows = cartItemContainer.getElementsByClassName('cart-row');
var total = 0;
for (let i = 0; i < cartRows.length; i++){
var cartRow = cartRows[i];
var priceElement = cartRow.getElementsByClassName('cart-price')[0];
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0];
var price = parseFloat(priceElement.innerText.replace('$', ''));
var quantity = quantityElement.value;
total = total + (price * quantity);
}
total = Math.round(total * 100) / 100;
document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total;
}
/* Shopping Cart Animation */
const navSlide = () => {
const cart = document.querySelector('#cart');
const nav = document.querySelector('.shopping-cart');
cart.addEventListener('click', () =>{
nav.classList.toggle('nav-active')
});
}
/* Calling All Functions */
navSlide();
ready();
* {
color: #FF875B;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
overflow-x: hidden;
font-family: 'Roboto Flex', sans-serif;
}
.flex-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
/* Header section*/
header {
display: flex;
width: 100%;
position: fixed;
z-index: 20;
height: 75px;
background-color: #FED9CB;
align-items: center;
}
.nav {
display:flex;
justify-content: flex-end;
padding-right: 10px;
flex: 4 1 0%;
}
#cart{
cursor: pointer;
}
a {
margin-left: 25px;
margin-right: 5px;
}
#logo {
height: 75px;
width: 75px;
}
.material-icons {
font-size: 75px;
color: white;
}
/* Home Page Section*/
#feature {
height: 700px;
width: 100%;
background-image: url("./photos/feature.JPG");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-top: 70px;
display:flex;
margin: 0 auto;
justify-content: center;
}
#feature .content {
margin: auto;
background-color: #FFF4F0;
height: 100px;
width: 100%;
opacity: 0.8;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
letter-spacing: 5px;
}
/* Store Section */
#store {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Luxurious Roman', cursive;
font-weight: bold;
}
#store h3 {
letter-spacing: 3px;
font-family: 'Montserrat', sans-serif;
}
#items {
display: flex;
justify-content: space-around;
align-items: center;
font-family: 'Abel', sans-serif;
}
#store img {
height: 240px;
width: 240px;
border-radius: 25px;
border-color: #FED9CB;
border: 3px;
}
.store-info {
display: flex;
justify-content:center;
flex-flow:column wrap;
flex-wrap: wrap;
margin-bottom: 20px;
}
.bt {
border-radius: 15px;
background-color:#FF875B;
border-color: #FFF4F0;
color:#FFF4F0;
padding: 5px 10px;
}
.bt:hover {
background-color: #FFF4F0;
color: #FF875B;
cursor: pointer;
}
/* Footer Section */
footer {
background-color: #FED9CB;
width: 100%;
height: 100px;
bottom: 0px;
}
#footer {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* Shopping Cart Section */
.cart-row {
display: flex;
justify-content: space-between;
align-items:flex-start;
flex-direction: column;
width: 75%;
margin: 20px;
}
.cart-item {
display: flex;
justify-content: center;
flex-direction: column;
}
.cart-quantity input {
border: none;
appearance: none;
background: #FFF4F0;
padding: 12px;
border-radius: 10px;
width: 100px;
}
.container {
position: relative;
width: 80px;
height: 50px;
border-radius: 40px;
border: 2px solid;
transition: 0.5s;
}
.container .next{
position: absolute;
top: 50%;
right: 10px;
display: block;
width: 12px;
height: 12px;
border-top: 2px solid #FFF4F0;
border-left: 2px solid #FFF4F0;
z-index: 1;
transform: translateY(-50%) rotate(135deg);
cursor: pointer;
}
.container .prev{
position: absolute;
top: 50%;
left: 10px;
display: block;
width: 12px;
height: 12px;
border-top: 2px solid #FFF4F0;
border-left: 2px solid #FFF4F0;
z-index: 1;
transform: translateY(-50%) rotate(315deg);
cursor: pointer;
}
#box span{
position: absolute;
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 46px;
color:#FFF4F0;
font-size: 24px;
font-weight: 700;
user-select: none;
}
.cart-item-image {
border-radius: 20px;
}
.shopping-cart h5{
letter-spacing: 5px;
}
.shopping-cart {
position:absolute;
right: 0px;
height: 93vh;
top:7vh;
background-color: #FED9CB;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
overflow: auto;
}
.nav-active {
transform: translateX(0%);
}
/*Phone Screen */
#media only screen and (max-width: 780px) {
.shopping-cart {
width: 50%;
}
}
<!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="./style.css" />
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Luxurious+Roman&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght#8..144,200&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abel&family=Montserrat:wght#200&family=Roboto+Flex:opsz,wght#8..144,200&display=swap" rel="stylesheet">
<title>Store</title>
</head>
<body>
<script type="text/babel" src="./index.js" async></script>
<header class="flex-container">
<img src="./photos/logo.png" id="logo"/>
<div class="nav">
<i class="material-icons">home</i>
<a id="cart-btn"><i id="cart" class="material-icons">shopping_cart</i></a>
</div>
<div class="shopping-cart">
<h5>Cart</h5>
<div class="cart-items">
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$0</span>
</div>
<button class="bt bt-purchase" type="button">PURCHASE</button>
</div>
</header>
<main>
<div id="feature" class="flex-container">
<div class="content">
<h3>EVERMAY</h3>
</div>
</div>
<div id="store" class="flex-container">
<h3>ITEMS</h3>
<div class="flex-container" id="items">
<div class="item">
<img class="shop-item-image" src="./photos/IMG1.JPG" />
<div class="store-info">
<span class="shop-item-title">DAILY REMINDER</span>
<p class="shop-item-price">$9.99</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG2.JPG" />
<div class="store-info">
<span class="shop-item-title">CHECKERED</span>
<p class="shop-item-price">$4.99</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG3.JPG" />
<div class="store-info">
<span class="shop-item-title">LA LUNE</span>
<p class="shop-item-price">$12.99</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG4.JPG" />
<div class="store-info">
<span class="shop-item-title">LE SOLEIL</span>
<p class="shop-item-price">$5.95</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG5.JPG" />
<div class="store-info">
<span class="shop-item-title">ABSTRACT OCEAN</span>
<p class="shop-item-price">$7.50</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG6.JPG" />
<div class="store-info">
<span class="shop-item-title">GARDEN</span>
<p class="shop-item-price">$10.25</p>
<button class="bt add-item-button">+</button>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="flex-container" id="footer">
<h5>CONTACT</h5>
<P>Evermay#gmail.com</P>
<p>(111) 111-1111</p>
</footer>
</body>
</html>

Related

automatically resizing the menu bar by javascript

I want to resize my navigation bar items, so there will be enough distance between them and the sticky logo. How can I achieve that? I tried to edit the container, but it didn't resize and instead overlapping appeared. I mean, it should be put to the right side and leave enough distance between the logo and the menu bar.
body {
font-family: Arial, sans-serif;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.testmonial {
background-image: url(images/testimonial-bg.jpg);
position: relative;
background-repeat: no-repeat;
}
.testmonial:after {
content: "";
background: #1baaba;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .6;
z-index: 1;
}
.owl-wrapper {
padding: 80px 20px;
z-index: 999;
position: relative;
}
.owl-testmonial {
background: #FFF;
/* max-width: 400px; */
margin: 0 auto;
padding: 40px 25px;
position: unset;
}
.owl-testmonial:before {
content: "\f10d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
text-align: center;
display: block;
font-size: 92px;
color: #e7e7e7;
margin-top: -106px;
}
.owl-testmonial .owl-prev {
position: absolute;
left: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
line-height: 17px !important;
color: #FFF;
}
.owl-testmonial .owl-next {
position: absolute;
right: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
color: #FFF;
line-height: 17px !important;
}
nav {
overflow: hidden;
background-color: #333;
}
nav.sticky {
position: fixed;
top: 0;
width: 100%;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
}
nav li {
margin: 0 30px;
}
nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ffeb3b;
color: black;
}
a.active {
background-color: #2196f3;
color: white;
}
.content {
padding: 20px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
.sticky ul {
height: 50px;
/* or any other desired height */
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sticky a {
height: 100%;
/* or any other desired height */
line-height: 50px;
padding: 0 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
background-color: #fff;
width: 30%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
float: left;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 10px;
border: 1px solid #ccc;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #ffeb3b;
color: #2196f3;
border-radius: 10px;
border: 1px solid #2196f3;
margin-top: 20px;
cursor: pointer;
}
.office-map {
margin-top: 50px;
}
/* Responsive styles */
#media screen and (max-width: 992px) {
nav li {
margin: 0 10px;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 80%;
}
}
#media screen and (max-width: 768px) {
header {
height: 60vh;
}
nav {
top: 60vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 90%;
}
}
#media screen and (max-width: 576px) {
header {
height: 40vh;
}
nav {
top: 40vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 95%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add JS for owl carousel -->
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.theme.default.min.css">
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>My Homepage</title>
</head>
<body>
<div class="testmonial">
<div class="container">
<div class="owl-wrapper">
<div class="owl-carousel owl-testmonial">
<div class="slide-item">
<img src="testimony/slider1585663811.png" alt="Slide 1">
</div>
<div class="slide-item">
<img src="testimony/slider1589942091.png" alt="Slide 2">
</div>
<div class="slide-item">
<img src="testimony/slider1590030001.png" alt="Slide 3">
</div>
</div>
</div>
</div>
</div>
<!-- 7 items sticky menu bar -->
<nav id="navbar">
<ul id="nav-ul">
<li><a class="active" href="#home">Home</a></li>
<li>About Us</li>
<li>Tabungan</li>
<li>Kredit</li>
<li>Deposito</li>
<li>Berita</li>
<li>Pengajuan Kredit</li>
</ul>
</nav>
<main class="content">
<!-- 3 static benefits -->
<section class="benefits">
<div class="card">
<h3>Benefit 1</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 2</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 3</h3>
<p>Description</p>
</div>
</section>
<!-- 3 types of product -->
<section class="products">
<h2>Products</h2>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</section>
<!-- ID tracking -->
<section class="id-tracking">
<h2>ID Tracking</h2>
<p>Description</p>
</section>
<!-- 3 dynamic testimonies -->
<section class="testimonies">
<h2>Testimonies</h2>
<div class="owl-carousel owl-theme">
<div class="testimony-1">Testimony 1</div>
<div class="testimony-2">Testimony 2</div>
<div class="testimony-3">Testimony 3</div>
</div>
</section>
<!-- 4 dynamic slider of news -->
<section class="news">
<h2>News</h2>
<div class="owl-carousel owl-theme">
<div class="news-1">News 1</div>
<div class="news-2">News 2</div>
<div class="news-3">News 3</div>
<div class="news-4">News 4</div>
</div>
</section>
<!-- suggestion box -->
<section class="suggestion-box">
<h2>Suggestion Box</h2>
<form action="#">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phone-number">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<button type="submit">Submit</button>
</form>
</section>
<!-- static map to the office -->
<section class="map">
<h2>Map to the Office</h2>
<img src="map.jpg" alt="Map to the Office">
</section>
</main>
<script src="owlcarousel/jquery.min.js"></script>
<script src="owlcarousel/dist/owl.carousel.min.js"></script>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var logo = document.createElement("img");
logo.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
logo.style.height = "50px";
logo.style.marginLeft = "40px";
logo.style.float = "left";
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
if (!navbar.classList.contains("logo")) {
navbar.classList.add("logo");
navbar.insertBefore(logo, navbar.firstChild);
navbar.style.height = "50px";
}
} else {
navbar.classList.remove("sticky");
navbar.classList.remove("logo");
navbar.removeChild(logo);
navbar.style.height = "auto";
}
}
window.onscroll = function() {
myFunction();
};
</script>
</body>
</html>

Flickity carousel is overlapping dropdown menu. How can I fix this?

I'm building a website with Flickity image carousels on the homepage. It's more customized than a regular nav menu, and now I'm starting to question my choices in life.
The dropdown menus I crafted are appearing behind the Flickity scrollers, even when I set the z-index to z-index: 1000 !important or try to force it with inline styling. I've seen other people ask about this same issue, but the solutions I found work when the nav bar is a element, which mine is not.
Here's a video showing the problem: https://imgur.com/a/qosY8JI
What can I do to make the dropdown menus appear above the carousel?
// ---------------------------------------- GLOBAL VARIABLES
const mobileNavbar = document.querySelector(".mobile-navbar");
const desktopNavbar = document.querySelector(".desktop-navbar");
const stickyDesktop = desktopNavbar.offsetTop;
const stickyMobile = mobileNavbar.offsetTop;
window.onscroll = function () {
stickyNav()
};
function stickyNav() {
if (window.pageYOffset >= stickyDesktop || window.pageYOffset >= stickyMobile) {
desktopNavbar.classList.add("sticky");
mobileNavbar.classList.add("sticky");
}
else {
desktopNavbar.classList.remove("sticky");
mobileNavbar.classList.remove("sticky");
}
}
// ---------------------------------------- DESKTOP NAVBAR
document.addEventListener('click', e => {
const isDropdownButton = e.target.matches("[data-dropdown-button]")
if (!isDropdownButton && e.target.closest('[data-dropdown]') != null) return
let currentDropdown;
if (isDropdownButton) {
currentDropdown = e.target.closest('[data-dropdown]')
currentDropdown.classList.toggle('active')
}
document.querySelectorAll('[data-dropdown].active').forEach(dropdown => {
if (dropdown === currentDropdown) return
dropdown.classList.remove('active')
})
})
// ---------------------------------------- MOBILE NAVBAR
const toggleButton = document.getElementsByClassName('fa-bars')[0]
const mobileNavBar = document.getElementsByClassName('mobile-navbar-links')[0]
toggleButton.addEventListener('click', () => {
mobileNavBar.classList.toggle('active')
})
// ---------------------------------------- FLICKITY ---------------------------------------- //
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity(elem, {
// options
cellAlign: 'left',
contain: true
});
// element argument can be a selector string
// for an individual element
var flkty = new Flickity('.main-carousel', {
// options
});
/* ---------------------------------------- UNIVERSAL STYLES ---------------------------------------- */
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
body {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + body {
padding-top: 60px;
}
.scrollDown {
position: absolute;
top: 93%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.scrollDown a {
text-decoration: none;
}
.scrollDown p {
margin: 0;
font-family: 'Nunito', sans-serif;
font-size: 20px;
color: #fff;
}
.fa-chevron-down,
.fa-chevron-up {
width: 50px;
height: 50px;
font-size: 32px;
color: #fff;
;
}
.scrollDown:hover {
transition: .2s ease;
}
#website-name {
margin-right: 1.5em;
}
/* ---------------------------------------- ANIMATIONS ---------------------------------------- */
#keyframes bounce {
0% {
transform: translateY(0);
}
5% {
transform: translateY(0);
}
10% {
transform: translateY(-25%);
}
15% {
transform: translateY(0);
}
20% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
.fa-chevron-down,
.fa-chevron-up {
animation: bounce 10s infinite;
}
/* ---------------------------------------- FLICKITY ---------------------------------------- */
.carousel-cell {
width: 100%;
height: 100vh;
margin-right: 10px;
}
.homeSection1 .carousel-cell {
background-color: #02cd82;
}
.homeSection2 .carousel-cell {
background-color: #cd4902;
}
.homeSection3 .carousel-cell {
background-color: #0249cd;
}
#media screen and (max-width: 600px) {
/* ------------------------------- MOBILE NAVBAR */
.desktop-navbar {
display: none;
}
.mobile-navbar {
display: flex;
overflow: hidden;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
z-index: 1000;
}
.mobile-brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.mobile-navbar-links ul {
margin: 0;
padding: 0;
display: flex;
}
.mobile-navbar-links li {
list-style: none;
}
.mobile-navbar-links li a {
color: #fff;
padding: 1rem;
display: block;
}
.mobile-navbar-links li:hover {
background-color: #555;
}
.mobile-navbar .fa-bars {
position: absolute;
display: none;
flex-direction: column;
justify-content: space-between;
top: .75rem;
right: 1rem;
color: #fff;
width: 1rem;
height: 1rem;
cursor: pointer;
}
.mobile-navbar .fa-bars {
display: flex;
}
.mobile-navbar-links {
display: none;
width: 100%;
}
.mobile-navbar {
flex-direction: column;
align-items: flex-start;
}
.mobile-navbar-links ul {
width: 100%;
flex-direction: column;
}
.mobile-navbar-links li {
text-align: center;
}
.mobile-navbar-links.active {
display: flex;
}
}
#media screen and (min-width: 601px) {
/* ------------------------------- DESKTOP NAVBAR */
.mobile-navbar {
display: none;
}
.desktop-navbar {
background-color: #f3f3f3;
overflow: hidden;
display: flex;
align-items: baseline;
padding: .5rem;
gap: 1rem;
z-index: 1000;
}
.link {
background: none;
border: none;
text-decoration: none;
color: #777;
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 0;
}
.dropdown.active+.link,
.link:hover {
color: #000;
}
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
left: 0;
top: calc(100% + .25rem);
background-color: #fff;
padding: .75rem;
border-radius: .25rem;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
transition: opacity 150ms ease, transform 150ms ease;
transform: translateY(-10px);
}
.dropdown.active>.link+.dropdown-menu {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}
.information-grid {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 2rem;
}
.dropdown-links {
display: flex;
flex-direction: column;
gap: .25rem;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Fox Bank</title>
<!-- Meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Links/Styles -->
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/responsive.css">
<link rel="stylesheet" href="styles/flickity.min.css" media="screen">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<!-- Javascript -->
<script src="https://kit.fontawesome.com/8821130486.js" crossorigin="anonymous"></script>
<script src="js/jquery.js" defer></script>
<script src="js/app.js" async defer></script>
<script src="js/flickity.min.js" defer></script>
</head>
<body>
<!--------------------- DESKTOP NAVBAR -->
<!--------------------------------------->
<div class="desktop-navbar">
<div>
<a href="#">
<h1 id="website-name">Big Bank</h1>
</a>
</div>
<div class="dropdown" data-dropdown>
<button class="link" data-dropdown-button>About</button>
<div class="dropdown-menu information-grid">
<div>
<div class="dropdown-heading">Meet Our Team</div>
<div class="dropdown-links">
Staff
Board of Directors
</div>
</div>
<div>
<div class="dropdown-heading">Our History</div>
<div class="dropdown-links">
Overview
Future
</div>
</div>
<div>
<div class="dropdown-heading">Blog</div>
<div class="dropdown-links">
Latest Posts
In The Community
Security & Fraud Prevention
National & International Money
</div>
</div>
<div>
<div class="dropdown-heading">Contact Us</div>
<div class="dropdown-links">
Support Center
Phone & Mailing Information
Social Media
</div>
</div>
</div>
</div>
<div class="dropdown" data-dropdown>
<button class="link" data-dropdown-button>Products</button>
<div class="dropdown-menu information-grid">
<div>
<div class="dropdown-heading">Checking</div>
<div class="dropdown-links">
Basic Checking
Teens Checking
Prime Checking
Elite Checking
</div>
</div>
<div>
<div class="dropdown-heading">Savings</div>
<div class="dropdown-links">
Basic Savings
Teens Savings
Prime Savings
Elite Savings
</div>
</div>
<div>
<div class="dropdown-heading">Borrow</div>
<div class="dropdown-links">
Personal Loans
Auto Loans
Credit Cards
Mortgage
Shark Loans
</div>
</div>
<div>
<div class="dropdown-heading">Retirement</div>
<div class="dropdown-links">
Traditional IRA
Roth IRA
Self Employment IRA
</div>
</div>
</div>
</div>
<button>Login</button>
</div>
<!---------------------- MOBILE NAVBAR -->
<!--------------------------------------->
<nav class="mobile-navbar">
<div class="mobile-brand-title">Fox Bank</div>
<i class="fa-solid fa-bars"></i>
<div class="mobile-navbar-links">
<ul>
<li>About</li>
<li>Products</li>
<li>Login</li>
</ul>
</div>
</nav>
<!------------------ FLICKITY CAROUSEL -->
<!--------------------------------------->
<div id="homeSection1">
<div class="main-carousel homeSection1" data-flickity='{ "autoPlay": 6000 }'>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>
<div class="scrollDown">
<a class="nextSection" href="#homeSection2">
<i id="scrollDownArrow" class="fas fa-chevron-down"></i>
<p>Scroll</p>
</a>
</div>
</div>
<div id="homeSection2" style="position: relative;">
<div class="main-carousel homeSection2" data-flickity='{ "autoPlay": 6000 }'>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>
<div class="scrollDown">
<a class="nextSection" href="#homeSection3">
<i id="scrollDownArrow" class="fas fa-chevron-down"></i>
<p>Scroll</p>
</a>
</div>
</div>
<div id="homeSection3" style="position: relative;">
<div class="main-carousel homeSection3" data-flickity='{ "autoPlay": 6000 }'>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>
<div class="scrollDown">
<a class="nextSection" href="#">
<i id="scrollDownArrow" class="fas fa-chevron-up"></i>
<p>Back to Top</p>
</a>
</div>
</div>
</body>
</html>

Remove overflow: hidden; from your .desktop-navbar
The height of the menu is more than the height of the nav bar so if you have overflow: hidden it hides what goes beyond the dimensions of the parent container.
MDN hidden - Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container.
// ---------------------------------------- GLOBAL VARIABLES
const mobileNavbar = document.querySelector(".mobile-navbar");
const desktopNavbar = document.querySelector(".desktop-navbar");
const stickyDesktop = desktopNavbar.offsetTop;
const stickyMobile = mobileNavbar.offsetTop;
window.onscroll = function () {
stickyNav()
};
function stickyNav() {
if (window.pageYOffset >= stickyDesktop || window.pageYOffset >= stickyMobile) {
desktopNavbar.classList.add("sticky");
mobileNavbar.classList.add("sticky");
}
else {
desktopNavbar.classList.remove("sticky");
mobileNavbar.classList.remove("sticky");
}
}
// ---------------------------------------- DESKTOP NAVBAR
document.addEventListener('click', e => {
const isDropdownButton = e.target.matches("[data-dropdown-button]")
if (!isDropdownButton && e.target.closest('[data-dropdown]') != null) return
let currentDropdown;
if (isDropdownButton) {
currentDropdown = e.target.closest('[data-dropdown]')
currentDropdown.classList.toggle('active')
}
document.querySelectorAll('[data-dropdown].active').forEach(dropdown => {
if (dropdown === currentDropdown) return
dropdown.classList.remove('active')
})
})
// ---------------------------------------- MOBILE NAVBAR
const toggleButton = document.getElementsByClassName('fa-bars')[0]
const mobileNavBar = document.getElementsByClassName('mobile-navbar-links')[0]
toggleButton.addEventListener('click', () => {
mobileNavBar.classList.toggle('active')
})
// ---------------------------------------- FLICKITY ---------------------------------------- //
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity(elem, {
// options
cellAlign: 'left',
contain: true
});
// element argument can be a selector string
// for an individual element
var flkty = new Flickity('.main-carousel', {
// options
});
/* ---------------------------------------- UNIVERSAL STYLES ---------------------------------------- */
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
body {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + body {
padding-top: 60px;
}
.scrollDown {
position: absolute;
top: 93%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.scrollDown a {
text-decoration: none;
}
.scrollDown p {
margin: 0;
font-family: 'Nunito', sans-serif;
font-size: 20px;
color: #fff;
}
.fa-chevron-down,
.fa-chevron-up {
width: 50px;
height: 50px;
font-size: 32px;
color: #fff;
;
}
.scrollDown:hover {
transition: .2s ease;
}
#website-name {
margin-right: 1.5em;
}
/* ---------------------------------------- ANIMATIONS ---------------------------------------- */
#keyframes bounce {
0% {
transform: translateY(0);
}
5% {
transform: translateY(0);
}
10% {
transform: translateY(-25%);
}
15% {
transform: translateY(0);
}
20% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
.fa-chevron-down,
.fa-chevron-up {
animation: bounce 10s infinite;
}
/* ---------------------------------------- FLICKITY ---------------------------------------- */
.carousel-cell {
width: 100%;
height: 100vh;
margin-right: 10px;
}
.homeSection1 .carousel-cell {
background-color: #02cd82;
}
.homeSection2 .carousel-cell {
background-color: #cd4902;
}
.homeSection3 .carousel-cell {
background-color: #0249cd;
}
#media screen and (max-width: 600px) {
/* ------------------------------- MOBILE NAVBAR */
.desktop-navbar {
display: none;
}
.mobile-navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
z-index: 1000;
}
.mobile-brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.mobile-navbar-links ul {
margin: 0;
padding: 0;
display: flex;
}
.mobile-navbar-links li {
list-style: none;
}
.mobile-navbar-links li a {
color: #fff;
padding: 1rem;
display: block;
}
.mobile-navbar-links li:hover {
background-color: #555;
}
.mobile-navbar .fa-bars {
position: absolute;
display: none;
flex-direction: column;
justify-content: space-between;
top: .75rem;
right: 1rem;
color: #fff;
width: 1rem;
height: 1rem;
cursor: pointer;
}
.mobile-navbar .fa-bars {
display: flex;
}
.mobile-navbar-links {
display: none;
width: 100%;
}
.mobile-navbar {
flex-direction: column;
align-items: flex-start;
}
.mobile-navbar-links ul {
width: 100%;
flex-direction: column;
}
.mobile-navbar-links li {
text-align: center;
}
.mobile-navbar-links.active {
display: flex;
}
}
#media screen and (min-width: 601px) {
/* ------------------------------- DESKTOP NAVBAR */
.mobile-navbar {
display: none;
}
.desktop-navbar {
background-color: #f3f3f3;
display: flex;
align-items: baseline;
padding: .5rem;
gap: 1rem;
z-index: 1000;
}
.link {
background: none;
border: none;
text-decoration: none;
color: #777;
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 0;
}
.dropdown.active+.link,
.link:hover {
color: #000;
}
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
left: 0;
top: calc(100% + .25rem);
background-color: #fff;
padding: .75rem;
border-radius: .25rem;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
transition: opacity 150ms ease, transform 150ms ease;
transform: translateY(-10px);
}
.dropdown.active>.link+.dropdown-menu {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}
.information-grid {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 2rem;
}
.dropdown-links {
display: flex;
flex-direction: column;
gap: .25rem;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Fox Bank</title>
<!-- Meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Links/Styles -->
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/responsive.css">
<link rel="stylesheet" href="styles/flickity.min.css" media="screen">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<!-- Javascript -->
<script src="https://kit.fontawesome.com/8821130486.js" crossorigin="anonymous"></script>
<script src="js/jquery.js" defer></script>
<script src="js/app.js" async defer></script>
<script src="js/flickity.min.js" defer></script>
</head>
<body>
<!--------------------- DESKTOP NAVBAR -->
<!--------------------------------------->
<div class="desktop-navbar">
<div>
<a href="#">
<h1 id="website-name">Big Bank</h1>
</a>
</div>
<div class="dropdown" data-dropdown>
<button class="link" data-dropdown-button>About</button>
<div class="dropdown-menu information-grid">
<div>
<div class="dropdown-heading">Meet Our Team</div>
<div class="dropdown-links">
Staff
Board of Directors
</div>
</div>
<div>
<div class="dropdown-heading">Our History</div>
<div class="dropdown-links">
Overview
Future
</div>
</div>
<div>
<div class="dropdown-heading">Blog</div>
<div class="dropdown-links">
Latest Posts
In The Community
Security & Fraud Prevention
National & International Money
</div>
</div>
<div>
<div class="dropdown-heading">Contact Us</div>
<div class="dropdown-links">
Support Center
Phone & Mailing Information
Social Media
</div>
</div>
</div>
</div>
<div class="dropdown" data-dropdown>
<button class="link" data-dropdown-button>Products</button>
<div class="dropdown-menu information-grid">
<div>
<div class="dropdown-heading">Checking</div>
<div class="dropdown-links">
Basic Checking
Teens Checking
Prime Checking
Elite Checking
</div>
</div>
<div>
<div class="dropdown-heading">Savings</div>
<div class="dropdown-links">
Basic Savings
Teens Savings
Prime Savings
Elite Savings
</div>
</div>
<div>
<div class="dropdown-heading">Borrow</div>
<div class="dropdown-links">
Personal Loans
Auto Loans
Credit Cards
Mortgage
Shark Loans
</div>
</div>
<div>
<div class="dropdown-heading">Retirement</div>
<div class="dropdown-links">
Traditional IRA
Roth IRA
Self Employment IRA
</div>
</div>
</div>
</div>
<button>Login</button>
</div>
<!---------------------- MOBILE NAVBAR -->
<!--------------------------------------->
<nav class="mobile-navbar">
<div class="mobile-brand-title">Fox Bank</div>
<i class="fa-solid fa-bars"></i>
<div class="mobile-navbar-links">
<ul>
<li>About</li>
<li>Products</li>
<li>Login</li>
</ul>
</div>
</nav>
<!------------------ FLICKITY CAROUSEL -->
<!--------------------------------------->
<div id="homeSection1">
<div class="main-carousel homeSection1" data-flickity='{ "autoPlay": 6000 }'>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>
<div class="scrollDown">
<a class="nextSection" href="#homeSection2">
<i id="scrollDownArrow" class="fas fa-chevron-down"></i>
<p>Scroll</p>
</a>
</div>
</div>
<div id="homeSection2" style="position: relative;">
<div class="main-carousel homeSection2" data-flickity='{ "autoPlay": 6000 }'>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>
<div class="scrollDown">
<a class="nextSection" href="#homeSection3">
<i id="scrollDownArrow" class="fas fa-chevron-down"></i>
<p>Scroll</p>
</a>
</div>
</div>
<div id="homeSection3" style="position: relative;">
<div class="main-carousel homeSection3" data-flickity='{ "autoPlay": 6000 }'>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>
<div class="scrollDown">
<a class="nextSection" href="#">
<i id="scrollDownArrow" class="fas fa-chevron-up"></i>
<p>Back to Top</p>
</a>
</div>
</div>
</body>
</html>

My "Total Number' Will iterate different number amounts, even though I used --

I have a shopping cart and it displays how many items are in the cart. It will go up by one if you press 'Add to cart' and will go down by one when you press 'remove'. I have a bug that does this.. When I press each 'remove' button it will take away different types of amounts from the 'total number' depending on which 'remove' button I click, and I want each button to only take away one number on each click event
CODE:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Website</title>
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css"><link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="style.css">
<script src="app.js"async></script>
</head>
<body>
<div class="wrapper">
<div class="p1">
<div class="topnavcont">
<ul class="topleftnav">
<li class="topnavlink">Home</li>
<li class="topnavlink">Shop</li>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">0</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg">
<div class="overlay"></div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> -->
</ul>
<div class="carttotal">Total: <span id='actualprice'> $64.66</span></div>
</div>
</div>
<div class="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt1</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt2</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt3</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt4</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt5</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt6</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar{
display: none;
}
.wrapper{
overflow-x: hidden;
}
.topnavcont{
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav{
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li{
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover{
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle{
margin-right: 2.5%;
}
.navcartcontainer{
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber{
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i{
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover{
transform: scale(1.15);
}
.p1{
height: 100vh;
position: relative;
}
.p1 img{
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after{
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody{
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal{
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i{
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover{
transform: scale(1.15);
}
.cartbody input{
width: 2.2rem;
height: auto;
}
.cartbodyactive{
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle{
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem{
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle{
font-size: 1.2rem;
}
.cartitems{
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn{
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2{
height: 160vh;
position: relative;
}
.p2title{
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img{
height: 200px;
width: 300px;
}
.itemcontainer{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item{
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn{
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover{
background-color: black;
color: white;
font-weight: bold;
}
JAVSCRIPT:
let TotalNumber = document.querySelector('.totalnumber');
const Atc = document.getElementsByClassName('atcbtn');
const cartbtn = document.getElementById('cartbtn')
const closeicon = document.getElementById('closeicon')
const cartbody = document.querySelector('.cartbody')
const removebtn = document.getElementsByClassName('removebtn')
const carttotal = document.querySelector('.carttotal')
cartbtn.addEventListener('click', function(){
cartbody.classList.toggle('cartbodyactive')
})
closeicon.addEventListener('click', function(){
cartbody.classList.remove('cartbodyactive')
})
function InputToDefault(){
let qinput = document.getElementsByClassName('qinput')
for(let i = 0; i < qinput.length; i++){
qinput[i].value= 1;
}
}
InputToDefault()
function RemoveItem(){
for (i = 0; i < removebtn.length; i++){
let rbutton = removebtn[i];
rbutton.addEventListener("click", function (){
//HERRE IS THE ISSUE.... HERE IS THE ISSUE...
let TotalNumbervalue = TotalNumber.innerText
if(TotalNumbervalue > 0){
// console.log(TotalNumbervalue)
TotalNumber.innerText--
}
rbutton.parentElement.parentElement.remove()
})
}
}
RemoveItem()
function AddItemtoCart(){
for (i = 0; i < Atc.length; i++){
let button = Atc[i];
button.addEventListener("click", function (){
let TotalNumbervalue = TotalNumber.innerHTML
if(TotalNumbervalue > -1){
TotalNumber.innerHTML++
}
let price = document.getElementById('actualprice')
let pricenum = price.innerText
console.log(pricenum)
let shopitem = button.parentElement
let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
let cartrow = document.createElement('div')
let cartitems = document.getElementsByClassName('cartitems')[0]
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`
cartrow.innerHTML = cartrowcontent
cartitems.append(cartrow)
qinput.value = 1
InputToDefault()
RemoveItem()
})
}
}
AddItemtoCart()

I didn't go through the rest of your code, but the way you're creating the Remove item event listeners doesn't really make sense. Why call a function when you just need run through the loop. The reason why you're not getting the result you expect is because the innerText is a string and you can't do math on strings. Instead, convert it to a number by putting a + in front of it.
for (i = 0; i < removebtn.length; i++) {
let rbutton = removebtn[i];
rbutton.addEventListener("click", function() {
let TotalNumbervalue = +TotalNumber.innerText.trim()
if (TotalNumbervalue > 0) {
TotalNumber.innerText--
}
rbutton.parentElement.parentElement.remove()
})
}

removeItem() loops through all remove button elements and adds a click listener that deletes the parent. You call this everytime a new item is added, which means eventually multiple click listeners "stack up" and you have multiple click listeners removing 1 from the total.
Instead, assign the click event listener after appending the element, ensuring only 1 click event listener will be applied
let TotalNumber = document.querySelector('.totalnumber');
const Atc = document.getElementsByClassName('atcbtn');
const cartbtn = document.getElementById('cartbtn')
const closeicon = document.getElementById('closeicon')
const cartbody = document.querySelector('.cartbody')
const removebtn = document.getElementsByClassName('removebtn')
const carttotal = document.querySelector('.carttotal')
cartbtn.addEventListener('click', function() {
cartbody.classList.toggle('cartbodyactive')
})
closeicon.addEventListener('click', function() {
cartbody.classList.remove('cartbodyactive')
})
function InputToDefault() {
let qinput = document.getElementsByClassName('qinput')
for (let i = 0; i < qinput.length; i++) {
qinput[i].value = 1;
}
}
InputToDefault()
function AddItemtoCart() {
for (i = 0; i < Atc.length; i++) {
let button = Atc[i];
button.addEventListener("click", function() {
let TotalNumbervalue = TotalNumber.innerHTML
if (TotalNumbervalue > -1) {
TotalNumber.innerHTML++
}
let price = document.getElementById('actualprice')
let pricenum = price.innerText
console.log(pricenum)
let shopitem = button.parentElement
let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
let cartrow = document.createElement('div')
let cartitems = document.getElementsByClassName('cartitems')[0]
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`
cartrow.innerHTML = cartrowcontent;
cartitems.append(cartrow)
cartitems.lastChild.querySelector('.removebtn').addEventListener("click", function() {
let TotalNumbervalue = +TotalNumber.innerText;
console.log(TotalNumbervalue);
if (TotalNumbervalue > 0) {
TotalNumber.innerText--
}
this.parentElement.parentElement.remove()
})
qinput.value = 1
InputToDefault()
})
}
}
AddItemtoCart()
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar {
display: none;
}
.wrapper {
overflow-x: hidden;
}
.topnavcont {
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav {
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li {
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover {
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle {
margin-right: 2.5%;
}
.navcartcontainer {
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber {
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i {
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover {
transform: scale(1.15);
}
.p1 {
height: 100vh;
position: relative;
}
.p1 img {
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after {
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody {
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal {
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i {
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover {
transform: scale(1.15);
}
.cartbody input {
width: 2.2rem;
height: auto;
}
.cartbodyactive {
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle {
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem {
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle {
font-size: 1.2rem;
}
.cartitems {
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn {
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2 {
height: 160vh;
position: relative;
}
.p2title {
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img {
height: 200px;
width: 300px;
}
.itemcontainer {
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2 {
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn {
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover {
background-color: black;
color: white;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Website</title>
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<script src="app.js" async></script>
</head>
<body>
<div class="wrapper">
<div class="p1">
<div class="topnavcont">
<ul class="topleftnav">
<li class="topnavlink">Home</li>
<li class="topnavlink">Shop</li>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">0</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg">
<div class="overlay"></div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> -->
</ul>
<div class="carttotal">Total: <span id='actualprice'> $64.66</span></div>
</div>
</div>
<div class="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt1</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt2</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt3</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt4</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt5</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt6</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
</body>
</html>

Why do my total cart price not compute correctly?

I am doing a school project of designing an ecommerce webpage. I am new to this and is facing some problem at the shopping cart check out portion. Would really appreciate any help from you guys ! :)
There's already an item (let's call it item A) in the cart every time the webpage reload. I am able to get a correct total price computation for every increasing quantity of item A in the cart. However, when I add another item into the cart and increase the quantity of the newly added item , the total price won't update. I also noticed that when I increase the quantity of item A when there is other items in the cart. The total price = (quantity * total amount) in the cart instead of computing just the price of item.
Here's the js, css and html code:
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready() {
var removeCartItemButtons = document.getElementsByClassName('btn-1');
console.log(removeCartItemButtons)
for (var i = 0; i < removeCartItemButtons.length; i++) {
var button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
var quantityInputs = document.getElementsByClassName('cart-quantity-input')
for (var i = 0; i < quantityInputs.length; i++) {
var input = quantityInputs[i]
input.addEventListener('change', quantityChanged)
}
var addToCartButtons = document.getElementsByClassName('btn-2')
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i]
button.addEventListener('click', addToCartClicked)
}
document.getElementsByClassName
}
function removeCartItem(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged(event) {
var input = event.target
if (isNaN(input.value) || input.value <= 0) {
input.value = 1
}
updateCartTotal()
}
function addToCartClicked(event) {
var button = event.target
var shopItem = button.parentElement
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
console.log(title, price, imageSrc)
addItemToCart(title, price, imageSrc)
updateCartTotal()
}
function addItemToCart(title, price, imageSrc) {
var cartRow = document.createElement('div')
cartRow.classList.add()
var cartItems = document.getElementsByClassName('cart-items')[0]
var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
for (var i = 0; i < cartItemNames.length; i++) {
if (cartItemNames[i].innerText == title) {
alert('This item is already been added to the cart')
return
}
}
var cartRowContents = `
<div class="cart-items">
<table class="cart-row">
<tr>
<td>
<div class="cart-info">
<img class="cart-item-image"src="${imageSrc}" >
<div>
<p class="cart-item-title">${title}</p>
<small>Price: ${price}</small>
<br>
<button class="btn-1" type="button">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" min="1" value="1"></td>
<td
class="cart-price">${price}
</td >
</tr>
</table>
</div>`
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
cartRow.getElementsByClassName('btn-1')[0].addEventListener('click', removeCartItem)
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
var total = 0
for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i]
var quantityElement = cartItemContainer.getElementsByClassName('cart-quantity-input')[0]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var price = parseFloat(priceElement.innerHTML.replace('$', ''))
var quantity = quantityElement.value
total = total + (price * quantity)
}
total = (Math.round(total * 100) / 100).toFixed(2)
document.getElementsByClassName('cart-total-price')[0].innerHTML = '$' + total
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
display: flex;
align-items: center;
padding: 20px;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
a {
text-decoration: none;
color: black;
}
p {
color: black;
}
.container {
max-width: 1300px;
margin: auto;
padding-left: 50px;
padding-right: 50px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.col-2 {
flex-basis: 50%;
min-width: 400px;
}
.col-2 img {
max-width: 100%;
padding: 50px 0;
}
.col-2 h1 {
font-size: 50px;
line-height: 60px;
margin: 25px 0;
}
.btn {
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 18px;
margin: 30px 0;
border-radius: 30px;
cursor: pointer;
outline: none;
}
.col-4 {
flex-basis: 25%;
padding: 10px;
min-width: 200px;
margin-bottom: 50px;
transition: transform 0.5s;
}
.col-4 img {
width: 100%;
}
.small-container {
max-width: 1080px;
margin: auto;
padding-left: 50px;
padding-right: 50px;
}
.title {
text-align: center;
margin: 0 auto 30px;
position: relative;
line-height: 50px;
color: black
}
.title::after {
content: '';
background: black;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.col-4:hover {
transform: translateY(-5px);
}
.btn-2 {
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 18px;
margin: 30px 0;
border-radius: 30px;
cursor: pointer;
border: none;
outline: none;
}
/*------footer-----*/
.footer {
background: #000;
color: #8a8a8a;
font-size: 14px;
padding: 40px 0 20px;
}
.footer-col-1 {
min-width: 250px;
margin-bottom: 10px;
flex-basis: 30%;
flex: 1;
text-align: center;
}
.footer-col-1 img {
width: 200px;
margin-bottom: 20px;
}
.footer p {
color: #8a8a8a;
}
/*------cart-----*/
.cart-page {
margin: 80px auto;
}
table {
width: 100%;
border-collapse: collapse;
}
.cart-info {
display: flex;
flex-wrap: nowrap;
}
th {
text-align: justify;
padding: 5px;
color: #fff;
background: #ff523b;
font-weight: normal;
}
td {
padding: 10px 5px;
width: 1px;
}
td input {
width: 45px;
height: 30px;
padding: 5px;
border-radius: 30px;
text-align: right;
}
td a {
color: #ff523b;
font-size: 10px;
}
td img {
width: 80px;
height: 80px;
margin-right: 10px;
}
.btn-1 {
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 10px;
margin: 3px 0;
border-radius: 30px;
font-size: 10px;
cursor: pointer;
border: none;
outline: none;
}
.total-price {
display: flex;
justify-content: flex-end;
}
.total-price table {
border-top: 3px solid #ff523b;
width: 100%;
max-width: 350px;
margin: 30px 0;
}
td:last-child {
text-align: right;
}
th:last-child {
text-align: right;
}
.btn-purchase {
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 40px;
margin: 30px 0;
border-radius: 30px;
outline: none;
border: none;
cursor: pointer;
}
.btn-purchase:hover {
transform: translateY(-3px);
}
.btn-1:hover {
transform: translateY(-1px);
}
.cart-item {
width: 60%;
}
/*------------ account page --------------*/
.account-page {
padding: 50px 0;
}
.form-container {
background: #fff;
width: 300px;
height: 300px;
position: relative;
text-align: center;
padding: 20px 0;
margin: auto;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.form-container span {
font-weight: bold;
padding: 0 10px;
color: #555;
cursor: pointer;
width: 100px;
display: inline-block;
}
.form-btn {
display: inline-block;
}
.form-container form {
max-width: 300px;
padding: 0 20px;
position: absolute;
top: 130;
transition: transform 1s;
}
form input {
width: 100%;
height: 30px;
margin: 10px 0;
padding: 0 10px;
border: 1px solid #ccc;
}
form .btn {
width: 100%;
border: none;
cursor: pointer;
margin: 10px 0;
}
form .btn:focus {
outline: none;
}
#LoginForm {
left: -300px;
}
#RegForm {
left: 0;
}
form a {
font-size: 12px;
}
#Indicator {
width: 100px;
border: none;
background: #ff523b;
margin-top: 8px;
height: 3px;
transform: translateX(100px);
transition: transform 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internet Security PBIL</title>
<link rel="stylesheet" href="style.css">
<script src="store.js" async></script>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="logo">
<img src="yeet/yeet.jpg" width="80px">
</div>
<nav>
<ul>
<li>Home</li>
<li>Account</li>
</ul>
</nav>
</div>
<div class="row">
<div class="col-2">
<h1>Good Sport <br>Good game!</h1>
<p>Come buy our good items now!</p>
Explore Now
</div>
<div class="col-2">
<img src="yeet/image1.png">
</div>
</div>
</div>
<!-------- products -------->
<div class="small-container">
<h2 class="title">Shirt</h2>
<div class="row">
<div class="col-4">
<img class="shop-item-image" src="yeet/product-1.jpg">
<h4 class="shop-item-title">Red</h4>
<p class="shop-item-price">$10.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-2.jpg">
<h4 class="shop-item-title">Blue</h4>
<p class="shop-item-price">$20.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-3.jpg">
<h4 class="shop-item-title">Green</h4>
<p class="shop-item-price">$30.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-4.jpg">
<h4 class="shop-item-title">Yellow</h4>
<p class="shop-item-price">$40.00</p>
<button class="btn-2">Add to cart</button>
</div>
</div>
<h2 class="title">Shorts</h2>
<div class="row">
<div class="col-4">
<img class="shop-item-image" src="yeet/product-5.jpg">
<h4 class="shop-item-title">1 printed t-shirt</h4>
<p class="shop-item-price">$50.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-6.jpg">
<h4 class="shop-item-title">2 printed t-shirt</h4>
<p class="shop-item-price">$60.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-7.jpg">
<h4 class="shop-item-title">3 printed t-shirt</h4>
<p class="shop-item-price">$70.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-8.jpg">
<h4 class="shop-item-title">4 printed t-shirt</h4>
<p class="shop-item-price">$80.00</p>
<button class="btn-2">Add to cart</button>
</div>
</div>
</div>
<!----- cart items details ----->
<section class="small-container cart-page">
<h2 class="title">Cart</h2>
<table>
<tr>
<th class="cart-item">Product</th>
<th class="cart-qunatity">Quantity</th>
<th class="cart-price">Subtotal</th>
</tr>
</table>
<div class="cart-items">
<table class="cart-row">
<tr>
<td>
<div class="cart-info">
<img class="cart-item-image" src="yeet/buy-1.jpg">
<div>
<p class="cart-item-title">Red Printed Tshirt</p>
<small>Price: $50.00</small>
<br>
<button class="btn-1" type="button">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" min="1" value="1"></td>
<td><span class="cart-price">$50.10</span>
</td>
</tr>
</table>
</div>
<!--- <table>
<tr class="cart-row">
<td>
<div class="cart-info">
<img class="cart-item-image" src="yeet/buy-2.jpg" >
<div>
<p class="cart-item-title">Red Printed Tshirt</p>
<small>Price: $80.0</small>
<br>
<button class="btn-1" type="button">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" min="1" value="1"></td>
<td class="cart-price">$80.50</td>
</tr>
</table>
</div> --->
<div class="total-price">
<table>
<tr>
<td class="cart-total-title">Total</td>
<td class="cart-total-price">$50.50</td>
</tr>
<tr>
<td>
<button class="btn-purchase" type="button">Purchase</button>
</td>
</tr>
</table>
</div>
</section>
<!-----footer----->
<div class="footer">
<div class="container">
<div class="footer-col-1">
<p>Products brought to you by Yeet!</p>
<img src="yeet/yeet.jpg">
</div>
</div>
</div>
</body>
</html>
Thank you guys for your help!
(ps: please ignore the naming of my items as is not finalize yet haha,cheers!)

Ah, it was hard to see, so I made an answer of it:
you used once cartItemContainer instead of cartRow, so you couldn't understand my comment... :-)
var quantityElement = cartItemContainer.getElementsByClassName('cart-quantity-input') [0] <- should be cartRow
var priceElement = cartRow.getElementsByClassName('cart-price')[0]

How do I perfectly fit things in the bottom banner?

I have a problem where I have a lot of items I want to fit in my website's bottom banner, but when I try adding them they get messed up because of how I spaced them, now I really just want to know how I can fix this and what a good way could be for not doing this in any of my future projects. Here is an example of what I want:
I want to make the text in the center go left towards the icons and I want the pictures at the bottom left to go to the center-right. I tried messing with this before but the banner always became smaller or the images would get messed up and other things like that. Here is the code of my website:
<!DOCTYPE html>
<html>
<head>
<title>FAQ</title>
<!-- Novo Sans Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght#300&display=swap" rel="stylesheet">
<!-- Crimson Text Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght#1,600&display=swap" rel="stylesheet">
<!-- Architect's Daughter Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-align: center;
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.indicator {
margin-right: 50px;
float: left;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: 0.2s ease transform;
}
.collapsible {
color: black;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid thin;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible.active .indicator {
transform: rotate(45deg);
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
#div2 {
width: 100vw;
position: relative;
margin-top: 290px;
margin-left: -50vw;
height: 100%;
left: 50%;
background-color: rgb(173, 12, 7);
padding-top: 50px;
padding-bottom: 120px;
}
.contactInfo {
text-align: center;
color: white;
}
#cInfo {
padding-right: 1px;
}
#phoneInfo {
margin-top: 55px;
margin-right: 300px;
}
#phoneIcon {
float: left;
margin-top: 30px;
margin-left: 100px;
}
#emailInfo {
margin-top: 55px;
margin-right: 200px;
}
#emailIcon {
float: left;
margin-top: 30px;
margin-left: 100px;
}
#farmer {
float: left;
}
#littleShop {
float: left;
}
</style>
<body>
<div class="logo"><img src="CSS/logo.jpg" id="logo" width="250" height="150"></div>
<nav>
<div style="width: 750px; margin: 0 auto;">
<div id="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Store</li>
<li>FAQ</li>
</ul>
</div>
</div>
</nav>
<link rel="stylesheet" type="text/css" href="CSS/faq.css">
<link rel="stylesheet" type="text/css" href="CSS/new_main_css.css">
<h1>FAQ</h1>
<button class="collapsible" data-toggle=""><b>Questions and Answers</b><i class="arrow indicator"></i></button>
<div class="content">
<p>Lorem Ipsum</p>
</div>
<div id="div2">
<h1 class="contactInfo" id="cInfo">Contact information</h1>
<img src="CSS/phoneIconNew.png" width="40" height="40" id="phoneIcon">
<h2 class="contactInfo" id="phoneInfo">Business Contact: 072 000 000 0000</h2>
<img src="CSS/emailIconNew.png" width="40" height="40" id="emailIcon">
<h2 class="contactInfo" id="emailInfo">Busienss Email: exampleemail#example.com</h2>
<img src="CSS/littleshopnew.jpg" id="littleShop">
<img src="CSS/farmer.png" id="farmer">
</div>
</body>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</html>
JSfiddle link: https://jsfiddle.net/5309uzrd/

I have changed div2 from block to flex
Css
#div2 {
width: 100vw;
position: relative;
margin-top: 290px;
margin-left: -50vw;
height: 100%;
left: 50%;
background-color: rgb(173, 12, 7);
padding-top: 50px;
padding-bottom: 120px;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
#div2 .container{
width: 50%;
}
.contactInfo {
width: 100%;
text-align: center;
color: white;
}
Html
<div id="div2">
<h1 class="contactInfo" id="cInfo">Contact information</h1>
<div class="container">
<img src="CSS/phoneIconNew.png" width="40" height="40" id="phoneIcon">
<h2 class="contactInfo" id="phoneInfo">Business Contact: 072 000 000 0000</h2>
<img src="CSS/emailIconNew.png" width="40" height="40" id="emailIcon">
<h2 class="contactInfo" id="emailInfo">Busienss Email: exampleemail#example.com</h2>
</div>
<div class="container">
<img src="CSS/littleshopnew.jpg" id="littleShop">
<img src="CSS/farmer.png" id="farmer">
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

My Slide Out Shopping Cart Wont Scroll With Page - javascript

https://github.com/koukalcreativeco/Web-Store.git Github code is above, I have a slide out shopping cart on this page. When I add too many items to the cart they start to go off the screen. I want to be able to scroll down on the cart. How would I go about doing that?

Related

automatically resizing the menu bar by javascript

Flickity carousel is overlapping dropdown menu. How can I fix this?

My "Total Number' Will iterate different number amounts, even though I used --

Why do my total cart price not compute correctly?

How do I perfectly fit things in the bottom banner?

Categories

Resources