diff --git a/javascript/10-fetch-security-debugging/supriya/assignment-1/css/shop.css b/javascript/10-fetch-security-debugging/supriya/assignment-1/css/shop.css new file mode 100644 index 00000000..1b6a14c7 --- /dev/null +++ b/javascript/10-fetch-security-debugging/supriya/assignment-1/css/shop.css @@ -0,0 +1,120 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + background: #f7f7f7; + color: #333; + line-height: 1.6; +} + +header { + background: #4a90e2; + color: white; + padding: 15px 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +header h1 { + font-size: 24px; +} + +.search-bar { + display: flex; + gap: 10px; +} + +.search-bar input { + padding: 8px; + border-radius: 4px; + border: none; + width: 200px; +} + +.search-bar button { + padding: 8px 12px; + border: none; + border-radius: 4px; + background: white; + color: #4a90e2; + cursor: pointer; + font-weight: bold; + transition: background 0.3s; +} + +.search-bar button:hover { + background: #e2e2e2; +} + +main { + padding: 20px; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 20px; +} + +.product-card { + background: white; + border-radius: 8px; + padding: 15px; + text-align: center; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + cursor: pointer; + transition: transform 0.2s; +} + +.product-card:hover { + transform: translateY(-5px); +} + +.product-card img { + max-width: 100%; + height: 150px; + object-fit: contain; + margin-bottom: 10px; +} + +.product-card h3 { + font-size: 18px; + margin-bottom: 8px; +} + +.product-card p { + font-size: 16px; + color: #4a90e2; + font-weight: bold; +} + +#product-details { + background: white; + border-radius: 8px; + padding: 20px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + margin-top: 20px; +} + +#product-details img { + max-width: 300px; + display: block; + margin-bottom: 15px; +} + +.hidden { + display: none; +} + +footer { + margin-top: 40px; + padding: 15px; + background: #4a90e2; + color: white; + text-align: center; +} \ No newline at end of file diff --git a/javascript/10-fetch-security-debugging/supriya/assignment-1/scripts/shop.js b/javascript/10-fetch-security-debugging/supriya/assignment-1/scripts/shop.js new file mode 100644 index 00000000..e6195542 --- /dev/null +++ b/javascript/10-fetch-security-debugging/supriya/assignment-1/scripts/shop.js @@ -0,0 +1,88 @@ +"use strict"; + +const productList = document.getElementById("product-list"); +const productDetails = document.getElementById("product-details"); +const searchInput = document.getElementById("search-input"); +const searchBtn = document.getElementById("search-btn"); +const allBtn = document.getElementById("all-btn"); + +async function fetchProducts() { + try { + const res = await fetch("https://dummyjson.com/products?limit=30"); + if (!res.ok) throw new Error("Unable to load products"); + const data = await res.json(); + return data.products; + } catch (err) { + productList.innerHTML = `

${err.message}

`; + } +} + +async function searchProducts(query) { + try { + const res = await fetch(`https://dummyjson.com/products/search?q=${query}`); + if (!res.ok) throw new Error("Search failed"); + const data = await res.json(); + return data.products; + } catch (err) { + productList.innerHTML = `

${err.message}

`; + } +} + +async function getProduct(id) { + try { + const res = await fetch(`https://dummyjson.com/products/${id}`); + if (!res.ok) throw new Error("Unable to fetch product details"); + return await res.json(); + } catch (err) { + productDetails.innerHTML = `

${err.message}

`; + } +} + +function renderProducts(products) { + productDetails.classList.add("hidden"); + productList.innerHTML = ""; + products.forEach(p => { + const card = document.createElement("div"); + card.className = "product-card"; + card.innerHTML = ` + ${p.title} +

${p.title}

+

$${p.price}

+ `; + card.addEventListener("click", () => showProduct(p.id)); + productList.appendChild(card); + }); +} + +async function showProduct(id) { + const product = await getProduct(id); + if (product) { + productDetails.classList.remove("hidden"); + productDetails.innerHTML = ` +

${product.title}

+ ${product.title} +

${product.description}

+

Price: $${product.price}

+

Brand: ${product.brand}

+

Category: ${product.category}

+ `; + window.scrollTo({ top: productDetails.offsetTop - 20, behavior: "smooth" }); + } +} + +async function loadAllProducts() { + const products = await fetchProducts(); + if (products) renderProducts(products); +} + +async function handleSearch() { + const query = searchInput.value.trim(); + if (!query) return; + const products = await searchProducts(query); + if (products) renderProducts(products); +} + +searchBtn.addEventListener("click", handleSearch); +allBtn.addEventListener("click", loadAllProducts); + +window.addEventListener("load", loadAllProducts); \ No newline at end of file diff --git a/javascript/10-fetch-security-debugging/supriya/assignment-1/shop.html b/javascript/10-fetch-security-debugging/supriya/assignment-1/shop.html new file mode 100644 index 00000000..b08ba9b8 --- /dev/null +++ b/javascript/10-fetch-security-debugging/supriya/assignment-1/shop.html @@ -0,0 +1,32 @@ + + + + + ShopEase - Simple E-Commerce + + + + +
+

ShopEase

+
+ + + +
+
+ +
+
+
+
+ +
+ + + + + + diff --git a/javascript/10-fetch-security-debugging/supriya/index.html b/javascript/10-fetch-security-debugging/supriya/index.html new file mode 100644 index 00000000..aeed3468 --- /dev/null +++ b/javascript/10-fetch-security-debugging/supriya/index.html @@ -0,0 +1,15 @@ + + + + + + + Javascript Assignments | Supriya Dasari + + +
+Assignment 1 + +
+ + \ No newline at end of file