html - How to show a message when cart is empty in javascript

Question

I created a shopping cart using Javascript. I'm trying to output a "Your cart is empty." with an image message when the shopping cart is empty. This is my displayCart

function displayCart() {
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);

let cart = localStorage.getItem("totalCost");
// cart = parseInt(cart);

let productContainer = document.querySelector('.products');
let cartCost = localStorage.getItem('totalCost');


if( cartItems && productContainer ) {
    productContainer.innerHTML = '';
    Object.values(cartItems).map( (item, index) => {
        productContainer.innerHTML += 
        `<div class="product"><ion-icon name="close-circle"></ion-icon><img src="assets/images/${item.title}.jpg" width=200px height=150px/>
            <span class="sm-hide">${item.title}</span>
        </div>
        <div class="price sm-hide">?${item.price}.00</div>
        <div class="quantity">
            <ion-icon class="decrease " name="arrow-dropleft-circle"></ion-icon>
                <span>${item.inCart}</span>
            <ion-icon class="increase" name="arrow-dropright-circle"></ion-icon>   
        </div>
        <div class="total">?${item.inCart * item.price}.00</div>`;
    }); 

    productContainer.innerHTML += `
        <div class="basketTotalContainer">
            <h4 class="basketTotalTitle">
                Basket Total
            </h4>
            <h4 class="basketTotal">
            ?${cartCost}.00
            </h4>
    `;

}

deleteButtons();
manageQuantity();

}

This is my products div

    <div class="container-products">
    <div class="product-header">
        <h5 class="product-title">PRODUCT</h5>
        <h5 class="price sm-hide">PRICE</h5>
        <h5 class="quantity">QUANTITY</h5>
        <h5 class="total">TOTAL</h5>
    </div>
    <div class="products">

    </div>
</div>

I want to display this when my cart is empty. How can i do this .Help me please

<div class="empty-cart">
    <h1>Cart Empty </h1>
    <p>You Haven't Ordered a pizza yet.
        To order a pizza go to the main page.
    </p>
    <img src="assets/images/empty-cart.png" alt="">
</div>

Answer 1

No, I think he wants to render either div.container-products or div.empty-cart right? You could achieve this by setting the display css property of both HTML elements (one to none and one to e.g. inline) depending on the length of cartItems. Look here for how you can set css properties: https://www.w3schools.com/js/js_htmldom_css.asp