From 58612540ead3a12882f4f7416f57e7d1447df3ef Mon Sep 17 00:00:00 2001
From: SupriyaDasari04 <dasarisupriya3012@gmail.com>
Date: Thu, 25 Sep 2025 13:49:49 +0530
Subject: [PATCH 1/2] SupriyaDasari-fetch-security-debugging-assignments

---
 .../supriya/assignment-1/css/shop.css         | 51 +++++++++++
 .../supriya/assignment-1/scripts/shop.js      | 87 +++++++++++++++++++
 .../supriya/assignment-1/shop.html            | 24 +++++
 .../supriya/index.html                        | 15 ++++
 4 files changed, 177 insertions(+)
 create mode 100644 javascript/10-fetch-security-debugging/supriya/assignment-1/css/shop.css
 create mode 100644 javascript/10-fetch-security-debugging/supriya/assignment-1/scripts/shop.js
 create mode 100644 javascript/10-fetch-security-debugging/supriya/assignment-1/shop.html
 create mode 100644 javascript/10-fetch-security-debugging/supriya/index.html

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..22b5d1d8
--- /dev/null
+++ b/javascript/10-fetch-security-debugging/supriya/assignment-1/css/shop.css
@@ -0,0 +1,51 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+header {
+  background: #333;
+  color: white;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+header input {
+  padding: 5px;
+  font-size: 16px;
+}
+
+header button {
+  padding: 5px 10px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+main {
+  padding: 20px;
+}
+
+#product-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.product-card {
+  border: 1px solid #ccc;
+  padding: 10px;
+  width: 200px;
+  cursor: pointer;
+}
+
+.product-card img {
+  width: 100%;
+  height: auto;
+}
+
+#product-details {
+  margin-top: 20px;
+}
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..9c0e4fe4
--- /dev/null
+++ b/javascript/10-fetch-security-debugging/supriya/assignment-1/scripts/shop.js
@@ -0,0 +1,87 @@
+"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 allProductsBtn = document.getElementById("all-products-btn");
+
+async function fetchProducts() {
+  try {
+    const res = await fetch("https://dummyjson.com/products");
+    if (!res.ok) throw new Error("Failed to fetch products");
+    const data = await res.json();
+    return data.products;
+  } catch (err) {
+    productList.innerHTML = `<p>${err.message}</p>`;
+  }
+}
+
+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 = `<p>${err.message}</p>`;
+  }
+}
+
+async function getProduct(id) {
+  try {
+    const res = await fetch(`https://dummyjson.com/products/${id}`);
+    if (!res.ok) throw new Error("Failed to fetch product");
+    const data = await res.json();
+    return data;
+  } catch (err) {
+    productDetails.innerHTML = `<p>${err.message}</p>`;
+  }
+}
+
+function renderProducts(products) {
+  productList.innerHTML = "";
+  productDetails.innerHTML = "";
+  products.forEach(p => {
+    const card = document.createElement("div");
+    card.classList.add("product-card");
+    card.innerHTML = `
+      <img src="${p.thumbnail}" alt="${p.title}">
+      <h3>${p.title}</h3>
+      <p>$${p.price}</p>
+    `;
+    card.addEventListener("click", () => showProductDetails(p.id));
+    productList.appendChild(card);
+  });
+}
+
+async function showAllProducts() {
+  const products = await fetchProducts();
+  if (products) renderProducts(products);
+}
+
+async function searchHandler() {
+  const query = searchInput.value.trim();
+  if (!query) return;
+  const products = await searchProducts(query);
+  if (products) renderProducts(products);
+}
+
+async function showProductDetails(id) {
+  const product = await getProduct(id);
+  if (product) {
+    productDetails.innerHTML = `
+      <h2>${product.title}</h2>
+      <img src="${product.thumbnail}" alt="${product.title}" style="width:300px">
+      <p>${product.description}</p>
+      <p>Price: $${product.price}</p>
+      <p>Brand: ${product.brand}</p>
+      <p>Category: ${product.category}</p>
+    `;
+  }
+}
+
+searchBtn.addEventListener("click", searchHandler);
+allProductsBtn.addEventListener("click", showAllProducts);
+
+showAllProducts();
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..a35d2aa9
--- /dev/null
+++ b/javascript/10-fetch-security-debugging/supriya/assignment-1/shop.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ShopEase - Simple E-Commerce</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./css/shop.css">
+</head>
+<body>
+  <header>
+    <h1>ShopEase</h1>
+    <input type="text" id="search-input" placeholder="Search products">
+    <button id="search-btn">Search</button>
+    <button id="all-products-btn">All Products</button>
+  </header>
+
+  <main>
+    <div id="product-list"></div>
+    <div id="product-details"></div>
+  </main>
+
+  <script src="./scripts/shop.js" defer></script>
+</body>
+</html>
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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ 
+		<title>Javascript Assignments | Supriya Dasari</title>
+</head>
+<body>
+<details>
+<summary>Assignment 1</summary>
+<iframe src="./assignment-1/shop.html" frameborder="0" width="100%"></iframe>
+</details>
+</body>
+</html>
\ No newline at end of file

From 38cc32a00dbbf9e3a247d9cac46320eefcc13092 Mon Sep 17 00:00:00 2001
From: SupriyaDasari04 <dasarisupriya3012@gmail.com>
Date: Tue, 30 Sep 2025 12:57:34 +0530
Subject: [PATCH 2/2] SupriyaDasari-fetch-security-debugging-assignments

---
 .../supriya/assignment-1/css/shop.css         | 105 +++++++++++++++---
 .../supriya/assignment-1/scripts/shop.js      |  63 +++++------
 .../supriya/assignment-1/shop.html            |  18 ++-
 3 files changed, 132 insertions(+), 54 deletions(-)

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
index 22b5d1d8..1b6a14c7 100644
--- a/javascript/10-fetch-security-debugging/supriya/assignment-1/css/shop.css
+++ b/javascript/10-fetch-security-debugging/supriya/assignment-1/css/shop.css
@@ -1,51 +1,120 @@
-body {
-  font-family: Arial, sans-serif;
+* {
+  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: #333;
+  background: #4a90e2;
   color: white;
-  padding: 10px;
+  padding: 15px 20px;
   display: flex;
+  justify-content: space-between;
   align-items: center;
+}
+
+header h1 {
+  font-size: 24px;
+}
+
+.search-bar {
+  display: flex;
   gap: 10px;
 }
 
-header input {
-  padding: 5px;
-  font-size: 16px;
+.search-bar input {
+  padding: 8px;
+  border-radius: 4px;
+  border: none;
+  width: 200px;
 }
 
-header button {
-  padding: 5px 10px;
-  font-size: 16px;
+.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;
 }
 
-#product-list {
-  display: flex;
-  flex-wrap: wrap;
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 20px;
 }
 
 .product-card {
-  border: 1px solid #ccc;
-  padding: 10px;
-  width: 200px;
+  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 {
-  width: 100%;
-  height: auto;
+  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
index 9c0e4fe4..e6195542 100644
--- a/javascript/10-fetch-security-debugging/supriya/assignment-1/scripts/shop.js
+++ b/javascript/10-fetch-security-debugging/supriya/assignment-1/scripts/shop.js
@@ -4,16 +4,16 @@ 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 allProductsBtn = document.getElementById("all-products-btn");
+const allBtn = document.getElementById("all-btn");
 
 async function fetchProducts() {
   try {
-    const res = await fetch("https://dummyjson.com/products");
-    if (!res.ok) throw new Error("Failed to fetch products");
+    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 = `<p>${err.message}</p>`;
+    productList.innerHTML = `<p class="error">${err.message}</p>`;
   }
 }
 
@@ -24,64 +24,65 @@ async function searchProducts(query) {
     const data = await res.json();
     return data.products;
   } catch (err) {
-    productList.innerHTML = `<p>${err.message}</p>`;
+    productList.innerHTML = `<p class="error">${err.message}</p>`;
   }
 }
 
 async function getProduct(id) {
   try {
     const res = await fetch(`https://dummyjson.com/products/${id}`);
-    if (!res.ok) throw new Error("Failed to fetch product");
-    const data = await res.json();
-    return data;
+    if (!res.ok) throw new Error("Unable to fetch product details");
+    return await res.json();
   } catch (err) {
-    productDetails.innerHTML = `<p>${err.message}</p>`;
+    productDetails.innerHTML = `<p class="error">${err.message}</p>`;
   }
 }
 
 function renderProducts(products) {
+  productDetails.classList.add("hidden");
   productList.innerHTML = "";
-  productDetails.innerHTML = "";
   products.forEach(p => {
     const card = document.createElement("div");
-    card.classList.add("product-card");
+    card.className = "product-card";
     card.innerHTML = `
       <img src="${p.thumbnail}" alt="${p.title}">
       <h3>${p.title}</h3>
       <p>$${p.price}</p>
     `;
-    card.addEventListener("click", () => showProductDetails(p.id));
+    card.addEventListener("click", () => showProduct(p.id));
     productList.appendChild(card);
   });
 }
 
-async function showAllProducts() {
+async function showProduct(id) {
+  const product = await getProduct(id);
+  if (product) {
+    productDetails.classList.remove("hidden");
+    productDetails.innerHTML = `
+      <h2>${product.title}</h2>
+      <img src="${product.thumbnail}" alt="${product.title}">
+      <p>${product.description}</p>
+      <p><strong>Price:</strong> $${product.price}</p>
+      <p><strong>Brand:</strong> ${product.brand}</p>
+      <p><strong>Category:</strong> ${product.category}</p>
+    `;
+    window.scrollTo({ top: productDetails.offsetTop - 20, behavior: "smooth" });
+  }
+}
+
+async function loadAllProducts() {
   const products = await fetchProducts();
   if (products) renderProducts(products);
 }
 
-async function searchHandler() {
+async function handleSearch() {
   const query = searchInput.value.trim();
   if (!query) return;
   const products = await searchProducts(query);
   if (products) renderProducts(products);
 }
 
-async function showProductDetails(id) {
-  const product = await getProduct(id);
-  if (product) {
-    productDetails.innerHTML = `
-      <h2>${product.title}</h2>
-      <img src="${product.thumbnail}" alt="${product.title}" style="width:300px">
-      <p>${product.description}</p>
-      <p>Price: $${product.price}</p>
-      <p>Brand: ${product.brand}</p>
-      <p>Category: ${product.category}</p>
-    `;
-  }
-}
-
-searchBtn.addEventListener("click", searchHandler);
-allProductsBtn.addEventListener("click", showAllProducts);
+searchBtn.addEventListener("click", handleSearch);
+allBtn.addEventListener("click", loadAllProducts);
 
-showAllProducts();
+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
index a35d2aa9..b08ba9b8 100644
--- a/javascript/10-fetch-security-debugging/supriya/assignment-1/shop.html
+++ b/javascript/10-fetch-security-debugging/supriya/assignment-1/shop.html
@@ -9,16 +9,24 @@
 <body>
   <header>
     <h1>ShopEase</h1>
-    <input type="text" id="search-input" placeholder="Search products">
-    <button id="search-btn">Search</button>
-    <button id="all-products-btn">All Products</button>
+    <div class="search-bar">
+      <input type="text" id="search-input" placeholder="Search products...">
+      <button id="search-btn">Search</button>
+      <button id="all-btn">All Products</button>
+    </div>
   </header>
 
   <main>
-    <div id="product-list"></div>
-    <div id="product-details"></div>
+    <section id="products-section">
+      <div id="product-list" class="grid"></div>
+    </section>
+    <section id="product-details" class="hidden"></section>
   </main>
 
+  <footer>
+    <p>© 2025 ShopEase. All rights reserved.</p>
+  </footer>
+
   <script src="./scripts/shop.js" defer></script>
 </body>
 </html>