Building Dynamic E-Commerce Experiences: Mastering DOM Manipulation and State Management
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 listi
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>
📰 Read the original article on Dev.to WebDev
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.