Anahlia Nguyen

Case studies

Practicing CSS, HTML, Javascript

3–4 minutes
Add to Cart Feature

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ben's Skincare</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <header>
        <h1>Ben's Skincare</h1>
        <nav>
            <ul>
                <li id="checkout-link">
                    <a href="#">
                        <span id="cart-count" class="cart-count">0</span>
                        <i class="fas fa-circle cart-icon-bg"></i>
                        <i class="fas fa-shopping-cart" id="cart-icon"></i>
                    </a>
                </li>
            </ul>
        </nav>
    </header>
    <div class="products-container">
        <h2>Products</h2>
        <div id="product-list">
            <!-- Products will be dynamically added here -->
        </div>
    </div>
    <ul id="cart-items">
        <!-- Cart items will be dynamically added here -->
    </ul>
    http://script.js
</body>
</html>

JavaScript

// Dummy data for skincare products with image URLs
const products = [
    { name: "Moisturizing Cream", price: 20, image: "ord1.png" },
    { name: "Cleansing Oil", price: 15, image: "ord2.png" },
    { name: "Sunscreen SPF 50", price: 25, image: "ord1.png" },
    // Add more products here
];

let cartItemCount = 0; // Initialize cart item count

// Function to display skincare products with images
function displayProducts() {
    const productList = document.getElementById("product-list");

    products.forEach(product => {
        const productContainer = document.createElement("div");
        productContainer.classList.add("product-container");

        const imgContainer = document.createElement("div");
        imgContainer.classList.add("product-image-container");

        const img = document.createElement("img");
        img.src = product.image;
        img.alt = product.name;
        img.classList.add("product-image");

        const name = document.createElement("p");
        name.textContent = `${product.name} - $${product.price}`;
        name.classList.add("product-name");

        const button = document.createElement("button");
        button.textContent = 'Add';
        button.classList.add("product-button");
        button.addEventListener("click", function() {
            addToCart(product.name, product.price);
        });

        imgContainer.appendChild(img);
        productContainer.appendChild(imgContainer);
        productContainer.appendChild(name); // Move name before button
        productContainer.appendChild(button); // Place button after name

        productList.appendChild(productContainer);
    });
}


// Function to handle adding items to the cart
function addToCart(productName, productPrice) {
    // Increment cart item count
    cartItemCount++;
    // Update cart count display
    updateCartCount();
}

// Function to update cart count display
function updateCartCount() {
    const cartCount = document.getElementById("cart-count");
    cartCount.textContent = cartItemCount;
}

// Display products when the page loads
displayProducts();

CSS

@import url('https://fonts.googleapis.com/css?family=Unbounded');
body {
    font-family: "Unbounded";
    margin: 0;
    padding: 0;
    background-color: #f5e6ff; /* Light purple background */
    font-weight: 600; 
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

nav {
    position: absolute;
    top: 0;
    right: 20px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
}

nav ul li a i.fas.fa-shopping-cart {
    font-size: 30px; /* Adjust the cart size */
    margin-top: 35px; /* Adjust the margin to move it down */
}

nav ul li a:hover {
    background-color: #555;
    border-radius: 5px;
}

.products-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.product-container {
    text-align: center;
    width: calc(33.33% - 20px); /* Approximately one-third of the available width with some spacing */
    margin: 0 10px 20px;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}

.product-image {
    /* each file is set to 900 by 1120 */
    max-width: 100%; /* Limiting image size */
    display: block;
    margin: 0 auto 10px; /* Centering the image */
    max-height: 100%; /* Ensure the image fits within the container */
}

.product-button {
    background-color: #fff; /* White background */
    color: #000; /* Black text */
    border: 2.5px solid #000; /* Black border */
    cursor: pointer;
    padding: 15px 30px;
    border-radius: 30px; /* Rounded corners */
    display: block;
    width: 100%; /* Make button fill container width */
    font-weight: 600;
    font-size: 18px;
    font-family: Helvetica
}

.product-button:hover {
    background-color: #000; 
    color: #fff;
}


.cart-count {
    position: absolute;
    margin-top: 50px; /* Move it down by adjusting the top value */
    left: 0;
    transform: translate(-50%, -50%);
    background-color:  #f5e6ff;
    color: black;
    border-radius: 50%;
    width: 30px; /* Increase the size of the cart icon */
    height: 30px; /* Increase the size of the cart icon */
    line-height: 30px; /* Increase the size of the cart icon */
    text-align: center;
    font-size: 18px; /* Increase the font size */
    z-index: 1;
}


.cart-icon-bg::before {
  display: none;
}
.products-container h2 {
    text-align: center;
    font-size: 34px;
}

Conclusion

While having done this exercise, there are many things that I reflected on as a designer. I realized that blocking is really important and to be able to communicate my ideas to developers, I should make a design possible for developers to make while creating an interactive and dynamic experience for users. Here are some of the things that stood out the most:

  1. Understanding of Constraints and Capabilities: I realized the constraints and capabilities of web technologies. I feel like I have gained an understanding in the limitations of HTML in defining structure, the styling capabilities provided by CSS, and the interactive functionalities enabled by JavaScript.
  2. Interactive Design: Having been introduced to JavaScript, I realize that there are many possibilities to create more interactive and dynamic elements on web pages. It is possible to design features such as animations, sliders, pop-ups, and other interactive elements to enhance user experience.
  3. Responsive Design: Briefly learning CSS allowed me to create responsive layouts that adapt to different screen sizes and devices. There are many possibilities designers like me can use like CSS media queries to adjust the layout, fonts, and other design elements based on the screen resolution..
  4. Collaboration with Developers: With a better understanding of HTML, CSS, and JavaScript, I feel like I can collaborate more effectively with developers. I would be able to communicate their design ideas more clearly and understand the technical considerations involved in implementing their designs.