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
![Product Card Design using HTML CSS and JavaScript, raju webdev, geeks help, e-commerce product card design html, Responsive product card html CSS, Simple product card HTML CSS Product Card Design using HTML CSS and JavaScript, raju webdev, geeks help, e-commerce product card design html, Responsive product card html CSS, Simple product card HTML CSS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4UGmOrlL7XDbJc0OjekR2S8AR3maQCnnRNFKNPUbfqOTbvvWNUdyVdYAHqwDMynsjEXcn3u5qdlssIzWgWwUcx5qBibDXYImIVrtGhN6P1yh5HHoFmCIIkno9si7bRGHsqi_7Hi3UP1WAzakAQ8pps01M81YgPowYo60iS5BZalav3ZXzL3__ZwxH/s16000/colored%20product%20card.gif)
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;
});