From 11964f7314c958d43592cba14857dc58ede10f6e Mon Sep 17 00:00:00 2001 From: Wanderinglizrd Date: Mon, 20 Oct 2025 21:28:53 +0530 Subject: [PATCH 1/4] feat: Add initial implementation with README --- .../fetchstylepromisestimulator/README.md | 32 +++++++++++++++++++ .../fetchstylepromisestimulator/index.html | 16 ++++++++++ .../fetchstylepromisestimulator/script.js | 0 3 files changed, 48 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/fetchstylepromisestimulator/README.md create mode 100644 Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html create mode 100644 Domains/Frontend/MiniProjects/fetchstylepromisestimulator/script.js 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..75f940be --- /dev/null +++ b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html @@ -0,0 +1,16 @@ + + + + + + Fetch Style Promise Simulator + + + +
+

Fetch Style Promise Simulator

+

A simulator for demonstrating fetch-style promises.

+
+ + + diff --git a/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/script.js b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/script.js new file mode 100644 index 00000000..e69de29b From 7fa0bfcc8231521a9d688967cf54e21960257ff0 Mon Sep 17 00:00:00 2001 From: Wanderinglizrd Date: Tue, 21 Oct 2025 20:33:13 +0530 Subject: [PATCH 2/4] added html file --- .../fetchstylepromisestimulator/index.html | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html index 75f940be..c782c435 100644 --- a/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html +++ b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html @@ -11,6 +11,56 @@

Fetch Style Promise Simulator

A simulator for demonstrating fetch-style promises.

+
+

⏳ Fetch Promise Simulator

+

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

+ +
+ 💡 How it works: This simulator 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
+
+
+
From 0fc9907841d1b8715443a2497e038c865ef9500a Mon Sep 17 00:00:00 2001 From: Wanderinglizrd Date: Tue, 21 Oct 2025 21:23:11 +0530 Subject: [PATCH 3/4] Add initial styles --- .vscode/settings.json | 3 + .../fetchstylepromisestimulator/index.html | 81 +++++++++++++++++-- 2 files changed, 77 insertions(+), 7 deletions(-) create mode 100644 .vscode/settings.json 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/index.html b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html index c782c435..fc2b6989 100644 --- a/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html +++ b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html @@ -4,15 +4,82 @@ Fetch Style Promise Simulator - + + -
-

Fetch Style Promise Simulator

-

A simulator for demonstrating fetch-style promises.

-
-
-

⏳ Fetch Promise Simulator

+
+

Fetch-Style Promise Simulator

Simulates API calls with Promises (20% failure rate)

From 265c8db399e2e6f22eb1847fe1c1acfd6d27d4d5 Mon Sep 17 00:00:00 2001 From: Wanderinglizrd Date: Tue, 21 Oct 2025 21:42:49 +0530 Subject: [PATCH 4/4] fake fetch functionality --- .../fetchstylepromisestimulator/index.html | 7 +- .../fetchstylepromisestimulator/script.js | 90 +++++++++++++++++++ 2 files changed, 94 insertions(+), 3 deletions(-) diff --git a/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html index fc2b6989..ba92adc0 100644 --- a/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html +++ b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/index.html @@ -45,6 +45,7 @@ .subtitle { color: var(--muted); margin-top: 0; + font-size: 16px; } .btn { padding: 10px 20px; @@ -85,9 +86,9 @@

Fetch-Style Promise Simulator

- 💡 How it works: This simulator creates a fake API call - that takes 2 seconds to complete. There's a 20% chance it will fail to - simulate real-world scenarios! + 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!
diff --git a/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/script.js b/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/script.js index e69de29b..1d81988b 100644 --- a/Domains/Frontend/MiniProjects/fetchstylepromisestimulator/script.js +++ 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); + }); +}