acesdit · Tejas-Santosh-Nalawade · Oct 21, 2025 · Oct 20, 2025 · Oct 20, 2025 · Oct 21, 2025
diff --git a/.vscode/settings.json 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
@@ -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
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fetch Style Promise Simulator</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      :root {
+        --max-w: 720px;
+        --pad: 1.25rem;
+        --gap: 0.75rem;
+        --radius: 8px;
+        --shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
+        --accent: #ffffff;
+        --muted: #b44949;
+      }
+
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        font-family: "poppins", Arial;
+        background: #5980ce;
+        color: #111;
+      }
+      .center-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--gap);
+        max-width: var(--max-w);
+        width: calc(100% - 2rem);
+        margin: 0 auto;
+        padding: var(--pad);
+        background: var(--accent);
+        box-shadow: var(--shadow);
+        border-radius: var(--radius);
+        box-sizing: border-box;
+      }
+      .subtitle {
+        color: var(--muted);
+        margin-top: 0;
+        font-size: 16px;
+      }
+      .btn {
+        padding: 10px 20px;
+        border-radius: 20px;
+        border: solid 1px #0b6ef6;
+        background: #0b6ef6;
+        color: white;
+        cursor: pointer;
+        font-size: 1rem;
+        font-weight: 600;
+      }
+      input,
+      select {
+        width: 100%;
+        padding: 0.5rem;
+        border-radius: 6px;
+        border: 1px solid #ddd;
+      }
+      .stats {
+        display: flex;
+        gap: 0.5rem;
+        width: 100%;
+        justify-content: center;
+      }
+      .stat-card {
+        background: #fafafa;
+        padding: 0.5rem 0.75rem;
+        border-radius: 6px;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container center-container">
+      <h1>Fetch-Style Promise Simulator</h1>
+      <p class="subtitle">
+        Simulates API calls with Promises (20% failure rate)
+      </p>
+
+      <div class="info-box">
+        <strong>How it works:</strong> creates a fake API call that takes 2
+        seconds to complete. There's a 20% chance it will fail to simulate
+        real-world scenarios!
+      </div>
+
+      <div class="input-group">
+        <label for="url">API Endpoint URL</label>
+        <input
+          type="text"
+          id="url"
+          placeholder="https://api.example.com/users"
+          value="https://api.example.com/users"
+        />
+      </div>
+
+      <div class="input-group">
+        <label for="method">HTTP Method</label>
+        <select id="method">
+          <option value="GET">GET</option>
+          <option value="POST">POST</option>
+          <option value="PUT">PUT</option>
+          <option value="DELETE">DELETE</option>
+        </select>
+      </div>
+
+      <button class="btn" id="fetchBtn">Make Request</button>
+
+      <div id="result" class="result-container">
+        <div class="result-title" id="resultTitle"></div>
+        <div class="result-content" id="resultContent"></div>
+      </div>
+
+      <div class="stats">
+        <div class="stat-card">
+          <div class="stat-value" id="successCount">0</div>
+          <div class="stat-label">✅ Successful</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value" id="failCount">0</div>
+          <div class="stat-label">❌ Failed</div>
+        </div>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git 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 =
+      '<div class="loader"></div><p style="text-align:center; margin-top:10px;">Simulating 2 second delay...</p>';
+
+    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);
+    });
+}