cart.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>Cart</title>
</head>
<body>
    
</body>
</html>
<script>
    var cartItem = JSON.parse(localStorage.getItem("cartItem"))
    console.log("cartItem", cartItem);

    displayItem(cartItem);

    function displayItem(product) {
        product.map(function (item) {
            var h1 =document.createElement("h1");
            h1.textContent=item.name;
            var h2 =document.createElement("h2");
            h2.textContent=item.price;
            var h3=document.createElement("h3");
            h3.textContent=item.type;

            var img = document.createElement("img");
            img.setAttribute("src", item.image_url);

            var hr = document.createElement("hr");

            document.querySelector("body").append(img, h1, h2, h3  )
            
        
        })
        function addToCart(item) {
            cart.push(item);
            localStorage.setItem("cartItem", JSON.stringify(cart))
            
        }
    }
    var total=cartItems.reduce(function(acc,cv){
    console.log(cv);
    return acc + Number(cv.price);
        } ,0);
        console.log(total);
        document.querySelector(
            "#total"
        ).innerhtml=`<h1>Total cost is $ {total}</h1>
        <button onclick-"goToCheckout()">Checkout</button>`;
        function goToCheckout(){
            window.location.href=checkout.html
        }
</script>