Create A Shopping Add To Cart With Functionality Using Html, CSS & JavaScript


"Create A Shopping Add To Cart With Functionality Using Html, CSS & JavaScript" marks the beginning of an exciting journey into the world of web development and personal branding. This multipart series is designed to guide you through the process of building a personal portfolio website from scratch, using the foundational technologies of HTML, CSS, and JavaScript.

You'll learn how to combine HTML for structuring the content, CSS for styling, and JavaScript for dynamic functionality. By the end of this tutorial, you'll have the skills and knowledge to build your own shopping cart and provide users with a user-friendly and interactive online shopping experience.

This tutorial empowers you to take control of your web development journey, leveraging the power of HTML, CSS, and JavaScript to create a fully functional website that offers a seamless user experience.


If interested in watching the video before running the code below, you can click the play button to get started.

First, create a folder with any name you like. Then, make the necessary files inside it.

Create a file called index.html to serve as the main file.

Create a file called style.css for the CSS code.

Create a file called script.js for the JavaScript code.

Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.

To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout. 


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div class="header">
        <img src="cart-64.png" alt="">
        <span></span>
        <span></span>
    </div>

<div class="container">
    <div class="each">
        <!-- <img src="71WcMX4a1IL.webp"> -->
        <div class="overlay"></div>
        <div class="product_description">
            <h1>20% off on tank tops</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, nobis corporis?</p>
            <div><span>$43</span></div>
            <button class="shop id1">Shop Now</button>
        </div>
    </div>
    <div class="each">
        <!-- <img src="maksym.jpg"> -->
        <div class="overlay"></div>
        <div class="product_description">
            <h1>Latest eyewear for you</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, nobis corporis?</p>
            <div><span>$433</span></div>
            <button class="shop id2">Shop Now</button>
        </div>
    </div>
    <div class="each">
        <!-- <img src="black.jpg"> -->
        <div class="overlay"></div>
        <div class="product_description">
            <h1>Let's lorem suit up!</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, nobis corporis?</p>
            <div><span>$102</span></div>
            <button class="shop id3">Shop Now</button>
        </div>
    </div>
</div>



<!--Do this after running the script code that is the console.log for the prodcut property object-->

<div class="overall">
    <div class="covering"></div>
    <div class="cart_information">
        <div class="exit"><img src="exit.png" alt="" class="exit_btn"></div>
        <div class="cart_details"></div>
    </div>
</div>
</body>
</html>


Next, add the following CSS codes to your style.css file to make your AI image generator website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website. 


* {
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    background: #f2f2f2;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: Poppins,Arial,sans-serif;
}

.header {
    position: absolute;
    top: 20px;
    right: 20%;
    transform: translateX(-20%);
    border-radius: 5px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.header img {
    width: 30px;
}

.header span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: red;
    display: block;
    position: absolute;
    top: 10px;
    right: 7px;
    display: none;
}

.header span:nth-child(2) {
    animation: shadow 2s linear infinite alternate;
}

@keyframes shadow {
    0% {
        box-shadow: none;
    }100% {
        box-shadow: 0 0 40px 5px red,
        0 0 30px 10px red,
        0 0 40px 5px red;
    }
}

.container {
    border: 2px solid #000;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    background: #fff;
    border-radius: 5px;
}

.each {
    width: 230px;
    height: 350px;
    border: 1px solid #000;
    position: relative;
    padding: 15px;
    border-radius: 3px;
    line-height: 1.2;
}

.each:nth-child(1) {
    background-image: url(71WcMX4a1IL.webp);
    background-position: center;
    background-size: cover;
}

.each:nth-child(2) {
    background-image: url(maksym.jpg);
    background-position: center;
    background-size: cover;
}


.each:nth-child(3) {
    background-image: url(black.jpg);
    background-position: center;
    background-size: cover;
}


.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
}

.product_description {
    position: absolute;
    bottom: 20px;
}

.product_description h1 {
    text-transform: capitalize;
    position: relative;
    /* top: 10px; */
    font-size: 32px;
    font-weight: 500;
}

.product_description div {
    position: relative;
    margin-bottom: 10px;
}

.product_description p {
    margin-bottom: 5px;
}

.product_description div span {
    font-weight: 500;
    font-size: 20px;
    font-family: cursive;
}

.product_description button {
    padding: 10px 20px;
    border: none;
    outline: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 700;
}

.notify {
    display: flex;
    align-items: center;
    color: green;
    font-weight: bold;
    margin-bottom: 10px;
}

.notify img {
    width: 20px;
}

.overall {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}

.covering {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .9);
}

.cart_information {
    position: absolute;
    right: 0;
    width: 600px;
    height: 100vh;
    background: #222;
    padding: 50px;
    padding-top: 0;
    padding-bottom: 0;
    overflow-y: scroll;
}

.exit {
    position: relative;
    top: 10px;
    left: -44px;
}

.exit img {
    filter: invert(100%);
    cursor: pointer;
}

.cart_details > div {
    border: 2px solid rgba(255, 255, 255, .7);
    display: flex;
    margin: 10px 0;
    border-radius: 7px;
    overflow: hidden;
    background: transparent;
}

.cart_details > div:last-child {
    margin-bottom: 0;
}

.cart_details img {
    width: 150px;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

.cart_details > div > div {
    margin: 20px;
    line-height: 1.2;
}

.cart_details > div > div span {
    display: block;
    margin-bottom: 10px;
}

.cart_details > div > div p {
    margin: 10px 0;
}

.cart_details > div > div button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    font-weight: 700;
}

.cart_details > div > div button.buy {
    background: green;
}

.cart_details > div > div button.remove {
    background: red;
}


Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.


<script>

const cartDetails = document.querySelector(".cart_details");
const shop = document.querySelectorAll(".shop");
shop.forEach(btn => {
    btn.addEventListener("click", e => {
        e.preventDefault();
        let p1 = e.currentTarget.parentElement;
        let p2 = p1.parentElement;
        let notify = document.createElement("div");
        let imgspan = "<img src='check-block.png'><span>Added To Cart!</span>";
        notify.innerHTML = imgspan;
        p1.appendChild(notify)
        let button = p1.querySelector("button");
        p1.insertBefore(notify, button);

        //add class
        notify.classList.add("notify");

        button.setAttribute("disabled", "disabled");

        setTimeout(() => {
            button.removeAttribute("disabled");
            p1.removeChild(notify)
        }, 1000);

        
        let image = window.getComputedStyle(p2).backgroundImage;
        let sliceImage = image.slice(5, -2);

        let productProperty = {
            name: p1.querySelector("h1").textContent,
            description: p1.querySelector("p").textContent,
            image: sliceImage,
            price: p1.querySelector("div").textContent,
        };

        
        let div = document.createElement("div");
        div.innerHTML = `<img src="${productProperty.image}"> 
        <div>
        <h1>${productProperty.name}</h1>
        <p>${productProperty.description}</p>   
        <span>${productProperty.price}</span>
        <button class="buy">Buy</button>
        <button class="remove">Remove</button> 
        </div>`;
        cartDetails.appendChild(div);

        //do this when you want to create the result of the add to cart
        const header = document.querySelector(".header");
        let span = header.querySelector("span");
        console.log(cartDetails)
        if(cartDetails.innerHTML === "") {
            span.style.display = "none";
        }else {
            span.style.display = "block";
        }

    })
})

const overall = document.querySelector(".overall");
const header = document.querySelector(".header");
let img = header.querySelector("img");
img.addEventListener("click", e => {
    overall.style.display = "block";

    const remove = document.querySelectorAll(".remove");
    remove.forEach(del => {
    del.addEventListener("click", e => {
       e.currentTarget.parentNode.parentNode.remove();
    })
})
})

const exitBtn = document.querySelector(".exit_btn");
exitBtn.addEventListener("click", e => {
    overall.style.display = "none";
})

</script>

Conclusion and Final word

In conclusion, I hope you have learnt a successful topic for this article which is Create A Shopping Add To Cart With Functionality Using Html, CSS & JavaScript.

I recommend watching the above video if you still have any confusion on the code.

By following the steps outlined in this article, I believe that you have successfully learnt and created your own shopping cart. Feel free to practice more on this, enhance your skills to improve more on being a good programmer. This is used in most of the websites so having it as a skill will help boost your productivity.

Post a Comment

0 Comments

Close Menu