Create a Product Card Using HTML, CSS, & JavaScript

Create a Product Card Using HTML, CSS, & JavaScript

 


In This Tutorial, we are going to create a Product Card using HTML CSS, and JavaScript. Before I have created lots of product card designs by using HTML CSS, Change Image Color Profile Cards is one of them but today we will add Little JavaScript too, and I am sure that helps to make out Product Card Template more beautiful.

A product card is a sample of the specific product from where the user can choose the product, product's size, color, and designs as they need. Basically, product card on the webpages helps for users to find products for buying and for the company to sell.

Digital Product Card in JavaScript [Source Codes]

To create this program [Product Card]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of the Digital Clock from the given download buttom.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!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 Using Javascript</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
</head>
<body>
    <div class="card">
        <div class="bg-watch">
            <div class="gradients">
                <div class="gradient first" color="blue"></div>
                <div class="gradient" color="red"></div>
                <div class="gradient" color="pink"></div>
                <div class="gradient" color="white"></div>
                <div class="gradient" color="black"></div>
            </div>
            <h1 class="watch">watch</h1>
            <a href="#" class="share">
                <i class="fas fa-share-alt"></i>
            </a>
            <img src="img/watch-1.png" alt="" class="watch-img show" color="blue">
            <img src="img/watch-2.png" alt="" class="watch-img" color="red">
            <img src="img/watch-3.png" alt="" class="watch-img" color="pink">
            <img src="img/watch-4.png" alt="" class="watch-img" color="white">
            <img src="img/watch-5.png" alt="" class="watch-img" color="black">
        </div>
        <div class="info">
            <div class="watch-name">
                <h1 class="title">
                    apple watch series 6
                </h1>
                <span class="new">new</span>
            </div>
            <div class="color-container">
                <h3>color</h3>
                <div class="colors">
                    <span class="color active" primary="#31394e" color="blue"></span>
                    <span class="color" primary="#f84848" color="red"></span>
                    <span class="color" primary="#f4d5cb" color="pink"></span>
                    <span class="color" primary="#e9e5e4" color="white"></span>
                    <span class="color" primary="#444" color="black"></span>
                </div>
            </div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #31394e;
}

body {
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    background: #fefefe;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    position: relative;
    width: 320px;
    height: 600px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px
               rgba(50, 50, 50, 0.2);
}

.bg-watch {
    position: relative;
    height: 320px;
}

.gradients {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    clip-path: circle(150px at 80% 20%);
}

.gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    clip-path: circle(150px at 80% 20%);
    z-index: -2;
}

.first {
    z-index: 0;
    animation: width 1s ease;
}

@keyframes width {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

.gradient[color="blue"] {
    background: #31394e;
}

.gradient[color="red"] {
    background: #f84848;
}

.gradient[color="pink"] {
    background: #f4d5cb;
}

.gradient[color="white"] {
    background: #e9e5e4;
}

.gradient[color="black"] {
    background: #444;
}

.watch {
    position: absolute;
    top: 200px;
    left: -80px;
    font-size: 8rem;
    text-transform: uppercase;
    opacity: 0.1;
    color: #000;
    transform: rotate(-70deg);
}

.share {
    position: absolute;
    text-decoration: none;
    width: 50px;
    height: 50px;
    top: 15px;
    right: 15px;
    background: #fff;
    color: var(--primary);
    border-radius: 50%;
    text-align: center;
    font-size: 1.3rem;
    line-height: 50px;
    transition: .5s;
    z-index: 2;
}

.share:hover {
    transform: scale(1.1);
}

.watch-img {
    position: absolute;
    max-width: 100%;
    width: 250px;
    right: 50px;
    bottom: 0;
    opacity: 0;
    z-index: 2;
}

.watch-img.show {
    opacity: 1;
}

.info {
    position: relative;
    padding: 35px 40px;
}

.watch-name {
    padding: 0 0 10px 0;
}

.watch-name .title {
    margin-bottom: 10px;
    font-size: 2rem;
    line-height: 1.3;
    color: #333;
    text-transform: uppercase;
}

.watch-name .new {
    padding: 3px 10px;
    background: var(--primary);
    color: #fff;
    border-radius: 5px;
    text-transform: uppercase;
    cursor: pointer;
}

h3 {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #333;
}

.colors {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.color {
    width: 25px;
    height: 25px;
    margin: 0 10px;
    border: 5px solid;
    border-radius: 50%;
    cursor: pointer;
}

.color[color="blue"] {
    background-color: #31394e;
    border-color: #31394e;
}

.color[color="red"] {
    background-color: #f84848;
    border-color: #f84848;
}

.color[color="pink"] {
    background-color: #f4d5cb;
    border-color: #f4d5cb;
}

.color[color="white"] {
    background-color: #e9e5e4;
    border-color: #e9e5e4;
}

.color[color="black"] {
    background-color: #444;
    border-color: #444;
}

.color.active {
    border-color: #000;
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

const colors = document.querySelectorAll('.color');
const watchs = document.querySelectorAll('.watch-img');
const gradients = document.querySelectorAll('.gradient');

function changeColor() {
  let primary = this.getAttribute('primary');
  let color = this.getAttribute('color');
 
  let watch = document.querySelector(`
  .watch-img[color="${color}"]`);

  let gradient = document.querySelector(`
  .gradient[color="${color}"]`);
 
  document.documentElement.style
  .setProperty('--primary', primary);

  colors.forEach (c => c.classList.remove('active'));
  this.classList.add('active');

  watchs.forEach (s => s.classList.remove('show'));
  watch.classList.add('show');

  gradients.forEach(g => g.classList.remove('first'));
  gradient.classList.add('first');
};

colors.forEach (c => c.addEventListener('click', changeColor));

Download Source Code: Create a Product Card Using JavaScript

That’s all, now you’ve successfully Create a Product Card Using JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Here are a few helpful posts you might want to read, too:

Why learning code? 7 Essential Benefits From Learning Programming

6 Things To Know Before Learning Programming

How to Teach Yourself to Learn Code

If you enjoyed this post about the Product Card Using JavaScript just drop me a line in the comments below!

P.S. If you found this post helpful, please share it with others! Thanks for your support!