diff --git a/css/advanced/Assignment-1/index.html b/css/advanced/Assignment-1/index.html new file mode 100644 index 00000000..e69de29b diff --git a/css/advanced/Assignment-1/style.css b/css/advanced/Assignment-1/style.css new file mode 100644 index 00000000..3e7719f6 --- /dev/null +++ b/css/advanced/Assignment-1/style.css @@ -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; + } +} diff --git a/css/advanced/Assignment-2/animations.html b/css/advanced/Assignment-2/animations.html new file mode 100644 index 00000000..45bcfc50 --- /dev/null +++ b/css/advanced/Assignment-2/animations.html @@ -0,0 +1,60 @@ + + + + + + CSS Animation & Media Queries + + + +
Hello Guys..!
+ + diff --git a/javascript/10-fetch-security-debugging/Assignment-1/index.html b/javascript/10-fetch-security-debugging/Assignment-1/index.html new file mode 100644 index 00000000..a00a6062 --- /dev/null +++ b/javascript/10-fetch-security-debugging/Assignment-1/index.html @@ -0,0 +1,23 @@ + + + + + + E-Commerce App + + + +

🛍️ Simple E-Commerce App

+ +
+ + + +
+ +
+
+ + + + diff --git a/javascript/10-fetch-security-debugging/Assignment-1/product.html b/javascript/10-fetch-security-debugging/Assignment-1/product.html new file mode 100644 index 00000000..51403a9b --- /dev/null +++ b/javascript/10-fetch-security-debugging/Assignment-1/product.html @@ -0,0 +1,43 @@ + + + + + + Product Details + + + +

🛒 Product Details

+
+ +
+ + + + diff --git a/javascript/10-fetch-security-debugging/Assignment-1/script.js b/javascript/10-fetch-security-debugging/Assignment-1/script.js new file mode 100644 index 00000000..73e46544 --- /dev/null +++ b/javascript/10-fetch-security-debugging/Assignment-1/script.js @@ -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 = `

Error: ${error.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(); + displayProducts(data.products); + } catch (error) { + productContainer.innerHTML = `

Error: ${error.message}

`; + } +} + +function displayProducts(products) { + if (products.length === 0) { + productContainer.innerHTML = `

No products found

`; + return; + } + + productContainer.innerHTML = products + .map( + (p) => ` +
+ ${p.title} +

${p.title}

+

$${p.price}

+ +
+ ` + ) + .join(""); +} + +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!"); +}); + +allBtn.addEventListener("click", fetchAllProducts); + +fetchAllProducts(); diff --git a/javascript/10-fetch-security-debugging/Assignment-1/style.css b/javascript/10-fetch-security-debugging/Assignment-1/style.css new file mode 100644 index 00000000..06ab695f --- /dev/null +++ b/javascript/10-fetch-security-debugging/Assignment-1/style.css @@ -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; +}