Hey, developers welcome to Day 84 of our 90Days 90Projects challenge. And today in this challenge we are going to Create a Product Card using HTML CSS and JavaScript.
So to run this code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
HTML Code
index.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> Product Card </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="item-container">
<li class="cart">
<i class="fa-solid fa-cart-shopping"></i>
<sub id="items"></sub>
</li>
<img class="one active" src="./images/blue.png" alt="">
<img class="two" src="./images/pink.png" alt="">
<img class="three" src="./images/yellow.png" alt="">
<div class="colors">
<ul>
<li id="blue" class="blue circle"></li>
<li id="pink" class="pink circle"></li>
<li id="yellow" class="yellow circle"></li>
</ul>
</div>
<p class="title"> Fluo M Running Shoes For Men </p>
<h2 class="price">
<span> Price: </span><span class="money">$60</span>
</h2>
<button class="add-to-card" id="cart-btn"> Add To Card </button>
</div>
</body>
<script src="script.js"></script>
</html>
CSS Code
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: #211e1e;
display: grid;
padding: 20px 0;
place-items: center;
}
.item-container {
color: #000;
width: 300px;
margin: 10px;
display: flex;
flex-direction: column;
position: relative;
text-align: center;
justify-content: center;
padding: 10px 20px;
border-radius: 10px;
background-color: #fff;
}
.cart {
list-style: none;
font-size: 25px;
color: #e65b00;
z-index: 10;
width: 100%;
position: absolute;
top: 20px;
left: 108px;
}
sub {
font-size: 14px;
position: relative;
color: black;
right: 10px
}
.item-container img {
width: auto;
display: none;
transform: rotate(15deg);
border-radius: 50%;
}
.colors {
margin: 10px auto;
}
.colors ul {
list-style: none;
display: flex;
}
.circle {
height: 20px;
width: 20px;
cursor: pointer;
border-radius: 50%;
margin: 10px;
}
.title {
margin-bottom: 10px;
font-size: 20px;
}
.price {
font-weight: 600;
margin-bottom: 20px;
}
.blue {
background-color: blue;
}
.pink {
background-color: rgb(194, 20, 107);
}
.yellow {
background-color: rgb(213, 213, 6);
}
.money {
color: #e65b00;
}
.add-to-card {
width: 60%;
display: block;
margin: 0 auto;
padding: 10px;
cursor: pointer;
border-radius: 10px;
border: none;
background-color: #e65b00;
font-size: 16px;
color: #fff;
font-weight: 600;
}
.item-container img.active {
display: block;
}
JavaScript
batteryScript.js
const blueBtn = document.getElementById('blue');
const pinkBtn = document.getElementById('pink');
const yellowBtn = document.getElementById('yellow');
const cartBtn = document.getElementById('cart-btn');
const cartItems = document.getElementById('items');
const myCart = document.querySelector('.cart');
let itemImages = document.getElementsByTagName('img');
let num = 0;
cartItems.innerText = num;
blueBtn.addEventListener('click', () => {
itemImages[0].classList.add('active');
itemImages[1].classList.remove('active');
itemImages[2].classList.remove('active');
});
pinkBtn.addEventListener('click', () => {
itemImages[1].classList.add('active');
itemImages[0].classList.remove('active');
itemImages[2].classList.remove('active');
});
yellowBtn.addEventListener('click', () => {
itemImages[0].classList.remove('active');
itemImages[1].classList.remove('active');
itemImages[2].classList.add('active');
});
cartBtn.addEventListener('click', () => {
num = num + 1;
cartItems.innerText = num;
});
