So I want to make an “add to cart” button. I've already made the button, and it works fine. Now, I want to make it so if you press the plus button that appears, the number on the screen will change by one and if you press the minus, the number will change by -one. Also, I want to make that if the number is equal to 0 then go back to the initial button. Here's the code that I have used by far.
const cartButtons = document.querySelectorAll('.cart-button');
cartButtons.forEach(button => {
button.addEventListener('click', cartClick);
});
function cartClick() {
let button = this;
button.classList.add('clicked');
}
body {
margin: 0;
padding: 0;
height: 100vh;
place-items: center;
background-color: #151515;
}
.cart-button {
position: relative;
padding: 10px;
width: 200px;
height: 60px;
border: 0;
outline: none;
border-radius: 10px;
background-color: #1b6eee;
cursor: pointer;
color: #fff;
transition: 0.3s ease-in-out;
overflow: hidden;
top: 300px;
left: 300px;
}
.cart-button span {
position: absolute;
z-index: 3;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 1.2em;
color: #fff;
}
.cart-button span.add-to-cart {
opacity: 1;
}
.cart-button span.added {
opacity: 0;
}
.cart-button .cart-icon {
position: absolute;
z-index: 2;
top: 50%;
left: -10%;
transform: translate(-50%, -50%);
font-size: 2em;
}
.cart-button .cart-item {
position: absolute;
z-index: 3;
top: -20%;
left: 52%;
transform: translate(-50%, -50%);
font-size: 1.2em;
}
h3 {
display: inline;
color: #fff;
font-size: 2em;
}
.more, .less {
padding: 10px;
width: 60px;
height: 60px;
border: 0;
outline: none;
border-radius: 10px;
background-color: #1b6eee;
cursor: pointer;
color: #fff;
}
div {
position: absolute;
top: 300px;
left: 300px;
opacity: 0;
}
.more {margin-left: 28px;}
.less {margin-right: 28px;}
/*=====animations=====*/
.cart-button.clicked .cart-icon {
animation: cart 3s ease-in-out forwards;
}
.cart-button.clicked .cart-item {
animation: box 3s ease-in-out forwards;
}
.cart-button.clicked span.add-to-cart {
animation: add 3s ease-in-out forwards;
}
.cart-button.clicked span.added {
animation: added 3s ease-in-out forwards;
}
.cart-button.clicked {
animation: but 3s ease-in-out forwards;
}
.cart-button.clicked ~ div {
animation: ml 3s ease-in-out forwards;
}
@keyframes cart {
0% {
left: -10%;
}
20%, 30% {
left: 50%;
}
50%, 100% {
left: 110%;
}
}
@keyframes box {
0%, 20% {
top: -20%;
}
30% {
top: 40%;
left: 52%;
}
50%, 100%{
top: 40%;
left: 112%;
}
}
@keyframes add {
0% {
opacity: 1;
}
10%, 100% {
opacity: 0;
}
}
@keyframes added {
0%, 40% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
@keyframes but {
0%, 80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes ml {
0%, 80% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/4fc032096b.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<button class="cart-button">
<span class="add-to-cart">Add To Cart</span>
<span class="added">Added</span>
<i class="fas fa-shopping-cart cart-icon"></i>
<i class="fas fa-box cart-item"></i>
</button>
<div>
<button class="less" onclick="minus()">-</button>
<h3 class="number">1</h3>
<button class="more" onclick="plus()">+</button>
</div>
Sorry for putting everything, but I hope it helped and if you can help me too I would appreciate it very much!!!