Product Card Design using HTML CSS and JavaScript

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

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;
});


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad