diff --git a/javascript/10-fetch-security-debugging/sakshi/assignment-1/index.html b/javascript/10-fetch-security-debugging/sakshi/assignment-1/index.html new file mode 100644 index 00000000..812af3a6 --- /dev/null +++ b/javascript/10-fetch-security-debugging/sakshi/assignment-1/index.html @@ -0,0 +1,27 @@ + + + + + Search Products + + + +
+

E-Shop

+ +
+ +
+

Search Products

+ + +
+
+ + + + diff --git a/javascript/10-fetch-security-debugging/sakshi/assignment-1/list.html b/javascript/10-fetch-security-debugging/sakshi/assignment-1/list.html new file mode 100644 index 00000000..32d70d47 --- /dev/null +++ b/javascript/10-fetch-security-debugging/sakshi/assignment-1/list.html @@ -0,0 +1,26 @@ + + + + + All Products + + + +
+

E-Shop

+ +
+ +
+

All Products

+ +
+
+ + + + diff --git a/javascript/10-fetch-security-debugging/sakshi/assignment-1/scripts/script.js b/javascript/10-fetch-security-debugging/sakshi/assignment-1/scripts/script.js new file mode 100644 index 00000000..c33a6cba --- /dev/null +++ b/javascript/10-fetch-security-debugging/sakshi/assignment-1/scripts/script.js @@ -0,0 +1,60 @@ +async function searchProducts() { + const query = document.getElementById("searchInput").value + const resultsDiv = document.getElementById("results") + resultsDiv.innerHTML = "Loading..." + try { + const res = await fetch(`https://dummyjson.com/products/search?q=${query}`) + if (!res.ok) throw new Error("Failed to fetch products") + const data = await res.json() + resultsDiv.innerHTML = "" + data.products.forEach(p => { + resultsDiv.innerHTML += ` +
+ ${p.title} +

${p.title}

+

$${p.price}

+
` + }) + } catch (err) { + resultsDiv.innerHTML = `

${err.message}

` + } +} + +async function loadProducts() { + const productsDiv = document.getElementById("products") + productsDiv.innerHTML = "Loading..." + try { + const res = await fetch("https://dummyjson.com/products?limit=12") + if (!res.ok) throw new Error("Failed to fetch products") + const data = await res.json() + productsDiv.innerHTML = "" + data.products.forEach(p => { + productsDiv.innerHTML += ` +
+ ${p.title} +

${p.title}

+

$${p.price}

+
` + }) + } catch (err) { + productsDiv.innerHTML = `

${err.message}

` + } +} + +async function viewProduct() { + const id = document.getElementById("productId").value + const detailsDiv = document.getElementById("productDetails") + detailsDiv.innerHTML = "Loading..." + try { + const res = await fetch(`https://dummyjson.com/products/${id}`) + if (!res.ok) throw new Error("Product not found") + const p = await res.json() + detailsDiv.innerHTML = ` + ${p.title} +

${p.title}

+

Price: $${p.price}

+

${p.description}

` + } catch (err) { + detailsDiv.innerHTML = `

${err.message}

` + } +} diff --git a/javascript/10-fetch-security-debugging/sakshi/assignment-1/styles/styles.css b/javascript/10-fetch-security-debugging/sakshi/assignment-1/styles/styles.css new file mode 100644 index 00000000..e72cc7b7 --- /dev/null +++ b/javascript/10-fetch-security-debugging/sakshi/assignment-1/styles/styles.css @@ -0,0 +1,82 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + background: #f5f5f5; + color: #333; +} + +header { + background: #2c3e50; + color: white; + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +header h1 a { + margin: 0; + font-size: 1.8rem; + color: white; + +} + +nav a { + color: white; + margin-left: 1rem; + text-decoration: none; + font-weight: bold; + transition: color 0.3s; +} + +nav a:hover { + color: #f39c12; +} + +main { + padding: 2rem; +} + +input, button { + padding: 0.6rem; + margin: 0.5rem 0; + border-radius: 5px; + border: 1px solid #ccc; +} + +button { + background: #3498db; + color: white; + border: none; + cursor: pointer; +} + +button:hover { + background: #2980b9; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 1.5rem; + margin-top: 1.5rem; +} + +.product-card { + background: white; + border-radius: 10px; + padding: 1rem; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + text-align: center; + transition: transform 0.2s; +} + +.product-card:hover { + transform: scale(1.05); +} + +.product-card img { + max-width: 100%; + border-radius: 8px; + margin-bottom: 0.5rem; +} diff --git a/javascript/10-fetch-security-debugging/sakshi/assignment-1/view.html b/javascript/10-fetch-security-debugging/sakshi/assignment-1/view.html new file mode 100644 index 00000000..d383277b --- /dev/null +++ b/javascript/10-fetch-security-debugging/sakshi/assignment-1/view.html @@ -0,0 +1,27 @@ + + + + + View Product + + + +
+

E-Shop

+ +
+ +
+

View Product by ID

+ + +
+
+ + + + diff --git a/javascript/10-fetch-security-debugging/sakshi/index.html b/javascript/10-fetch-security-debugging/sakshi/index.html new file mode 100644 index 00000000..29d2415e --- /dev/null +++ b/javascript/10-fetch-security-debugging/sakshi/index.html @@ -0,0 +1,15 @@ + + + + + + HTML Assignments | Sakshi Bhosale + + +
+ Assignment 1 + +
+ + + \ No newline at end of file