diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/README.md b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/README.md new file mode 100644 index 00000000..b995bfed --- /dev/null +++ b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/README.md @@ -0,0 +1,32 @@ +# Fetch-Style Promise Simulator + +A web-based simulator that mimics real API fetch calls using JavaScript Promises. It demonstrates asynchronous programming concepts with a 20% simulated failure rate to practice error handling with .then() and .catch(). + +## Tech Stack + +HTML5, CSS3, JavaScript (Vanilla) + +## Features + +- Simulates API calls with 2-second delays +- 20% random failure rate for error handling practice +- Real-time success/failure statistics +- Modern, responsive UI + +## How to Use + +1. Enter an API endpoint URL +2. Select HTTP method (GET/POST/PUT/DELETE) +3. Click "Make Request" +4. Watch the promise resolve or reject! + +## Learning Objectives + +- Understanding Promises (resolve, reject) +- Using setTimeout for async operations +- Error handling with try/catch and .catch() +- Async/await vs .then() patterns + +## Installation + +Just open `index.html` in your browser! diff --git a/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html new file mode 100644 index 00000000..ba92adc0 --- /dev/null +++ b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html @@ -0,0 +1,134 @@ + + + + + + Fetch Style Promise Simulator + + + + +
+

Fetch-Style Promise Simulator

+

+ Simulates API calls with Promises (20% failure rate) +

+ +
+ How it works: creates a fake API call that takes 2 + seconds to complete. There's a 20% chance it will fail to simulate + real-world scenarios! +
+ +
+ + +
+ +
+ + +
+ + + +
+
+
+
+ +
+
+
0
+
✅ Successful
+
+
+
0
+
❌ Failed
+
+
+
+ + + diff --git a/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/script.js b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/script.js new file mode 100644 index 00000000..1d81988b --- /dev/null +++ b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/script.js @@ -0,0 +1,90 @@ +let successCount = 0; +let failCount = 0; +function fakeFetch(url, options = {}) { + return new Promise((resolve, reject) => { + const resultDiv = document.getElementById("result"); + const resultTitle = document.getElementById("resultTitle"); + const resultContent = document.getElementById("resultContent"); + + resultDiv.className = "result-container loading show"; + resultTitle.textContent = "⏳ Loading..."; + resultContent.innerHTML = + '

Simulating 2 second delay...

'; + + setTimeout(() => { + const shouldFail = Math.random() < 0.2; + + if (shouldFail) { + reject({ + error: true, + message: "Network Error: Failed to fetch", + code: 500, + timestamp: new Date().toISOString(), + }); + } else { + const users = ["Jane", "John", "Alice", "Bob", "Charlie", "Emma"]; + const randomUser = users[Math.floor(Math.random() * users.length)]; + + resolve({ + success: true, + user: randomUser, + userId: Math.floor(Math.random() * 1000) + 1, + timestamp: new Date().toISOString(), + method: options.method || "GET", + endpoint: url, + }); + } + }, 2000); + }); +} + +document.getElementById("fetchBtn").addEventListener("click", async () => { + const url = document.getElementById("url").value; + const method = document.getElementById("method").value; + const fetchBtn = document.getElementById("fetchBtn"); + const resultDiv = document.getElementById("result"); + const resultTitle = document.getElementById("resultTitle"); + const resultContent = document.getElementById("resultContent"); + + if (!url.trim()) { + alert("Please enter a URL!"); + return; + } + + fetchBtn.disabled = true; + fetchBtn.textContent = "Loading..."; + + try { + const data = await fakeFetch(url, { method }); + + successCount++; + document.getElementById("successCount").textContent = successCount; + + resultDiv.className = "result-container success show"; + resultTitle.textContent = "✅ Success!"; + resultContent.textContent = JSON.stringify(data, null, 2); + } catch (error) { + failCount++; + document.getElementById("failCount").textContent = failCount; + + resultDiv.className = "result-container error show"; + resultTitle.textContent = "❌ Request Failed"; + resultContent.textContent = JSON.stringify(error, null, 2); + } finally { + fetchBtn.disabled = false; + fetchBtn.textContent = "Make Request"; + } +}); + +function makeFetchWithThenCatch() { + const url = document.getElementById("url").value; + const method = document.getElementById("method").value; + + fakeFetch(url, { method }) + .then((data) => { + console.log("Success with .then():", data); + }) + .catch((error) => { + console.error("Error with .catch():", error); + }); +}