Consolidating my progress, I advanced my skill set by architecting dynamic e-commerce product grids. I implemented the Fetch API to retrieve database content and dynamically manipulated the DOM to render structured listings with descriptions and pricing. Furthermore, I integrated state management to support a shopping cart workflow, enabling users to seamlessly add items and review their selections in a dedicated view, complemented by custom styling and interactive elements for a polished user experience.
I attached the code to this blog
<style> * { padding: 0; margin: 0; box-sizing: border-box; } span { font-size: 26px; font-weight: 600; } #parent-div { box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; width: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; gap: 20px; } img { width: 300px; } #cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 40px; } button { padding: 15px 20px; font-weight: 700; background-color: blue; color: white; border: none; border-radius: 10px; } #btns button { margin-right: 20px; cursor: pointer; } #btns button:hover { background-color: rgb(8, 8, 147); } p { /* border: 1px solid; */ height: 100px; overflow: scroll; } .cart-btn { position: fixed; right: 30px; cursor: pointer; border: 1px solid; background-color: blue; color: white; padding: 10px; text-decoration: none; font-weight: 700; } </style> </head> <body> <a class="cart-btn" href="/cartPage.html">ViewCart <span id="cartCount"></span></a> <!-- <button ></button> --> <div id="cards"> </div> <script> // localStorage.removeItem("cart"); // const storedFruits = JSON.parse(localStorage.getItem("myFruits")) || []; // const currentCart = JSON.parse(localStorage.getItem("cart")) || []; const cart_items = JSON.parse(localStorage.getItem("cart")) || []; console.log("get from local storage", cart_items); document.getElementById("cartCount").innerText = cart_items.length; fetch("https://dummyjson.com/products?limit=200") .then((res) => res.json()) .then((data) => { const productList = data.products; for (let i = 0; i < productList.length; i++) { // img const card = document.createElement("div"); card.id = "parent-div"; // <div id = "parent-div"></div> const elem = document.createElement("img"); elem.src = productList[i].images[0]; card.appendChild(elem); // <div id = "parent-div"> // <img src = "link" /> // </div> const brandTag = document.createElement("h3"); brandTag.innerText = `Brand : ${productList[i].brand}`; card.appendChild(brandTag); // <div id = "parent-div"> // <img src = "link" /> // <h3>Brand : brand</h3> // </div> const para = document.createElement("p"); para.innerHTML = `<span>Description :</span> ${productList[i].description}`; card.appendChild(para); // <div id = "parent-div"> // <img src = "link" /> // <h3>Brand : brand</h3> // <p>Description : desc</p> // </div> const priceTag = document.createElement("h3"); priceTag.innerText = `Price : ${productList[i].price}`; card.appendChild(priceTag); // <div id = "parent-div"> // <img src = "link" /> // <h3>Brand : brand</h3> // <p>Description : desc</p> // <h3>Price : price</h3> // </div> const btns = document.createElement("div"); btns.id = "btns"; // <div id="btns"></div> const cart_btn = document.createElement("button"); cart_btn.addEventListener('click', () => myfunction(productList[i])); cart_btn.innerText = "Add to cart"; btns.appendChild(cart_btn); // <div> // <button>Add to cart</button> // </div> const buy_btn = document.createElement("button"); buy_btn.innerText = "Buy"; btns.appendChild(buy_btn); // <div> // <button>Add to cart</button> // <button>Buy</button> // </div> card.appendChild(btns); // <div id = "parent-div"> // <img src = "link" /> // <h3>Brand : brand</h3> // <p>Description : desc</p> // <h3>Price : price</h3> // <div id="btns"> // <button>Add to cart</button> // <button>Buy</button> // </div> // </div> const cardsDiv = document.getElementById("cards"); cardsDiv.appendChild(card); } }) function myfunction(e) { console.log("inside function", cart_items); const val = cart_items.find((item) => item.id == e.id); if (val) { alert("yes") for (let i = 0; i < cart_items.length; i++) { if (cart_items[i].id == e.id) { cart_items[i].count = cart_items[i].count + 1; } } } else { alert("no") e.count = 1; cart_items.push(e); } document.getElementById("cartCount").innerText = cart_items.length; localStorage.setItem("cart", JSON.stringify(cart_items)); } </script> * { padding: 0; margin: 0; box-sizing: border-box; } span { font-size: 26px; font-weight: 600; } #parent-div { box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; width: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; gap: 20px; } img { width: 300px; } #cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 40px; } button { padding: 15px 20px; font-weight: 700; background-color: blue; color: white; border: none; border-radius: 10px; } #btns button { margin-right: 20px; cursor: pointer; } #btns button:hover { background-color: rgb(8, 8, 147); } p { /* border: 1px solid; */ height: 100px; overflow: scroll; } .cart-btn { position: fixed; right: 30px; cursor: pointer; border: 1px solid; background-color: blue; color: white; padding: 10px; text-decoration: none; font-weight: 700; } <div id="cards"> </div> <script> const cart_items = JSON.parse(localStorage.getItem("cart")) || []; for (let i = 0; i < cart_items.length; i++) { // img const card = document.createElement("div"); card.id = "parent-div"; // <div id = "parent-div"></div> const elem = document.createElement("img"); elem.src = cart_items[i].images[0]; card.appendChild(elem); // <div id = "parent-div"> // <img src = "link" /> // </div> const brandTag = document.createElement("h3"); brandTag.innerText = `Brand : ${cart_items[i].brand}`; card.appendChild(brandTag); // <div id = "parent-div"> // <img src = "link" /> // <h3>Brand : brand</h3> // </div> const para = document.createElement("p"); para.innerHTML = `<span>Description :</span> ${cart_items[i].description}`; card.appendChild(para); // <div id = "parent-div"> // <img src = "link" /> // <h3>Brand : brand</h3> // <p>Description : desc</p> // </div> const priceTag = document.createElement("h3"); priceTag.innerText = `Price : ${cart_items[i].price}`; card.appendChild(priceTag); // <div id = "parent-div"> // <img src = "link" /> // <h3>Brand : brand</h3> // <p>Description : desc</p> // <h3>Price : price</h3> // </div> const btns = document.createElement("div"); btns.id = "btns"; // <div id="btns"></div> // const cart_btn = document.createElement("button"); // cart_btn.addEventListener('click', () => myfunction(cart_items[i])); // cart_btn.innerText = "Add to cart"; // btns.appendChild(cart_btn); // <div> // <button>Add to cart</button> // </div> const buy_btn = document.createElement("button"); buy_btn.innerText = "Buy"; btns.appendChild(buy_btn); // <div> // <button>Add to cart</button> // <button>Buy</button> // </div> card.appendChild(btns); // <div id = "parent-div"> // <img src = "link" /> // <h3>Brand : brand</h3> // <p>Description : desc</p> // <h3>Price : price</h3> // <div id="btns"> // <button>Add to cart</button> // <button>Buy</button> // </div> // </div> const cardsDiv = document.getElementById("cards"); cardsDiv.appendChild(card); } </script> 
