Skip to content

Durga js fetch api debugging #545

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Saidurgasatturi wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Durga js fetch api debugging #545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aa636fa
durga-html-advancedtags
Saidurgasatturi Sep 30, 2025
667b96b
durga-js-fetch_API_Debugging
Saidurgasatturi Nov 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added css/advanced/Assignment-1/index.html
View file
Open in desktop
Empty file.
69 changes: 69 additions & 0 deletions css/advanced/Assignment-1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

header {
background: #0d0a99;
color: #fff;
padding: 20px;
text-align: center;
}

nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
margin-top: 10px;
}

nav a {
color: #fff;
text-decoration: none;
}

main {
display: flex;
padding: 20px;
gap: 20px;
}

article {
flex: 3;
background: #2c13a8;
color: #fff;
padding: 20px;
border-radius: 8px;
}

aside {
flex: 1;
background: #4d119b;
color: #fff;
padding: 20px;
border-radius: 8px;
}

footer {
background: #3f12ba;
color: #fff;
text-align: center;
padding: 15px;
margin-top: 20px;
bottom: auto;
}

@media (max-width: 768px) {
main {
flex-direction: column;
flex:1;
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The flex: 1 property here has no effect. main is a flex container, but it is not a flex item of another flex container (its parent, body, does not have display: flex by default). You can safely remove this line.

}
}
60 changes: 60 additions & 0 deletions css/advanced/Assignment-2/animations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation & Media Queries</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.box {
width: 150px;
height: 150px;
background: #3498db;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
}
@media (max-width: 768px) {
.box {
width: 120px;
height: 120px;
font-size: 14px;
background: #e67e22;
}
}

@media (max-width: 480px) {
.box {
width: 90px;
height: 90px;
font-size: 12px;
background: #2ecc71;
}
}
</style>
Comment on lines +7 to +55
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

It's a best practice to keep your CSS in a separate file rather than embedding it within a <style> tag in your HTML. This improves code organization, reusability, and browser caching. Consider creating a separate .css file and linking it in the <head> using a <link> tag.

</head>
<body>
<div class="box">Hello Guys..!</div>
</body>
</html>
23 changes: 23 additions & 0 deletions javascript/10-fetch-security-debugging/Assignment-1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>🛍️ Simple E-Commerce App</h1>

<div class="search-box">
<input type="text" id="searchInput" placeholder="Search for products..." />
<button id="searchBtn">Search</button>
<button id="allBtn">All Products</button>
</div>

<div id="productContainer" class="product-container">
</div>

<script src="script.js"></script>
</body>
</html>
43 changes: 43 additions & 0 deletions javascript/10-fetch-security-debugging/Assignment-1/product.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Details</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>🛒 Product Details</h1>
<div id="productDetails" class="product-details">
<!-- Product details will load here -->
</div>

<script>
async function loadProductDetails() {
const params = new URLSearchParams(window.location.search);
const id = params.get("id");

try {
const res = await fetch(`https://dummyjson.com/products/${id}`);
if (!res.ok) throw new Error("Failed to fetch product details");
const product = await res.json();

const container = document.getElementById("productDetails");
container.innerHTML = `
<img src="${product.thumbnail}" alt="${product.title}">
<h2>${product.title}</h2>
<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>
<button onclick="window.history.back()">⬅️ Go Back</button>
`;
Comment on lines +26 to +34
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Using innerHTML to inject content from an API response can expose your application to Cross-Site Scripting (XSS) attacks if the fetched data contains malicious scripts. It's much safer to create DOM elements programmatically and set their content using properties like textContent, which prevents string content from being parsed as HTML.

} catch (error) {
document.getElementById("productDetails").innerHTML = `<p>Error: ${error.message}</p>`;
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using innerHTML to display an error message can be a security risk if the error.message can be manipulated. It's safer to use textContent to prevent any potential HTML injection.

Suggested change
document.getElementById("productDetails").innerHTML = `<p>Error: ${error.message}</p>`;
document.getElementById("productDetails").textContent = `Error: ${error.message}`;

}
}

loadProductDetails();
</script>
Comment on lines +15 to +41
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For better code organization and maintainability, it's a best practice to move JavaScript code out of HTML files. Consider creating a separate product-details.js file and including it with <script src="product-details.js" defer></script> just before the closing </body> tag.

</body>
</html>
59 changes: 59 additions & 0 deletions javascript/10-fetch-security-debugging/Assignment-1/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
const productContainer = document.getElementById("productContainer");
const searchInput = document.getElementById("searchInput");
const searchBtn = document.getElementById("searchBtn");
const allBtn = document.getElementById("allBtn");
async function fetchAllProducts() {
try {
const res = await fetch("https://dummyjson.com/products");
if (!res.ok) throw new Error("Failed to fetch products");
const data = await res.json();
displayProducts(data.products);
} catch (error) {
productContainer.innerHTML = `<p>Error: ${error.message}</p>`;
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using innerHTML to display an error message can be a security risk if the error.message can be manipulated. It's safer to use textContent to prevent any potential HTML injection.

Suggested change
productContainer.innerHTML = `<p>Error: ${error.message}</p>`;
productContainer.textContent = `Error: ${error.message}`;

}
}

async function searchProducts(query) {
try {
const res = await fetch(`https://dummyjson.com/products/search?q=${query}`);
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The search query should be properly encoded before being included in a URL to handle special characters (e.g., &, ?, ) correctly. Using encodeURIComponent() ensures the query is treated as a single, safe string parameter.

Suggested change
const res = await fetch(`https://dummyjson.com/products/search?q=${query}`);
const res = await fetch(`https://dummyjson.com/products/search?q=${encodeURIComponent(query)}`);

if (!res.ok) throw new Error("Search failed");
const data = await res.json();
displayProducts(data.products);
} catch (error) {
productContainer.innerHTML = `<p>Error: ${error.message}</p>`;
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using innerHTML to display an error message can be a security risk if the error.message can be manipulated. It's safer to use textContent to prevent any potential HTML injection.

Suggested change
productContainer.innerHTML = `<p>Error: ${error.message}</p>`;
productContainer.textContent = `Error: ${error.message}`;

}
}

function displayProducts(products) {
if (products.length === 0) {
productContainer.innerHTML = `<p>No products found</p>`;
return;
}

productContainer.innerHTML = products
.map(
(p) => `
<div class="product-card">
<img src="${p.thumbnail}" alt="${p.title}">
<h3>${p.title}</h3>
<p>$${p.price}</p>
<button onclick="viewProduct(${p.id})">View Details</button>
</div>
`
)
.join("");
Comment on lines +33 to +44
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Using innerHTML to render a list of items from an API is a significant security risk, making the application vulnerable to Cross-Site Scripting (XSS). Additionally, using inline onclick handlers is not a modern best practice. The recommended approach is to create DOM elements for each product card programmatically, use textContent to safely insert data, and attach event listeners with addEventListener.

}

function viewProduct(id) {
window.location.href = `product.html?id=${id}`;
}

searchBtn.addEventListener("click", () => {
const query = searchInput.value.trim();
if (query) searchProducts(query);
else alert("Please enter something to search!");
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using alert() provides a poor user experience because it's a blocking modal dialog. A better approach is to display a non-blocking message within the UI, for instance, by adding a text element near the search bar or changing the input's placeholder text temporarily.

});

allBtn.addEventListener("click", fetchAllProducts);

fetchAllProducts();
70 changes: 70 additions & 0 deletions javascript/10-fetch-security-debugging/Assignment-1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
body {
font-family: Arial, sans-serif;
background: #f7f9fb;
margin: 20px;
text-align: center;
}

.search-box {
margin-bottom: 20px;
}

input {
padding: 8px;
width: 250px;
border-radius: 5px;
border: 1px solid #ccc;
}

button {
padding: 8px 15px;
margin: 5px;
border: none;
background: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background: #0056b3;
}

.product-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}

.product-card {
background: white;
border-radius: 10px;
width: 200px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: 0.3s;
}

.product-card:hover {
transform: translateY(-5px);
}

.product-card img {
width: 100%;
border-radius: 8px;
}

.product-details {
max-width: 600px;
margin: 0 auto;
text-align: left;
background: white;
padding: 20px;
border-radius: 10px;
}

.product-details img {
width: 100%;
border-radius: 8px;
}