<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<div class="container">
<div class="icon">
<div class="itemsCount"></div>
<i class="fas fa-shopping-cart cartIcon"></i>
</div>
<button class="addToCart" onclick="displayItemsCount()">
Add to cart
</button>
</div>
*,
:after,
:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #fef9e7;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.icon {
border: 3px solid #262626;
border-radius: 50%;
padding: 25px;
position: relative;
}
i {
font-size: 28px;
color: #262626;
}
button {
margin-top: 32px;
padding: 10px 25px;
background-color: #d22b2b;
border: 2px solid transparent;
color: #fff;
font-size: 14px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 1px 2px #aaa;
transition: all 250ms ease-in-out;
outline: none;
}
button:hover {
border: 2px solid #d22b2b;
background-color: #fff;
color: #d22b2b;
transform: scale(0.9);
}
.itemsCount {
position: absolute;
background-color: #d22b2b;
width: 20px;
height: 20px;
border-radius: 50%;
top: 0;
right: 0;
display: none;
color: #fff;
padding: 2px;
text-align: center;
font-family: sans-serif;
font-size: 14px;
}
.appear {
animation: appear 250ms ease-in 1 forwards;
}
.flicker {
animation: appear 150ms ease-in 1 forwards;
}
@keyframes appear {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
@keyframes flicker {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
let itemsCountDiv = document.querySelector(".itemsCount");
let cartIcon = document.querySelector(".cartIcon");
let itemsCount = 1;
function displayItemsCount() {
itemsCountDiv.style.display = "block";
itemsCountDiv.classList.add("appear");
cartIcon.classList.add("flicker");
itemsCountDiv.innerHTML = itemsCount;
setTimeout(() => {
itemsCountDiv.classList.remove("appear");
cartIcon.classList.remove("flicker");
}, 250);
itemsCount++;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.