Merge pull request #124 from pradipchaudhary/project93

pradipchaudhary · web-flow · commit bf0e13056b8b · 2024-02-13T14:56:23.000+05:45
inint basic debouncing and throtting app [project93]
diff --git a/93-Debouncing and Throttling Functions/index.html b/93-Debouncing and Throttling Functions/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Debouncing and Throttling Web App</title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <main>
+            <h1>Debouncing and Throttling Web App</h1>
+
+            <label for="delaySlider"
+                >Delay: <span id="delayValue">500</span>ms</label
+            >
+            <input
+                type="range"
+                id="delaySlider"
+                min="100"
+                max="1000"
+                step="100"
+                value="500"
+            />
+
+            <input type="text" id="textInput" placeholder="Type something..." />
+
+            <div class="result">
+                <h2>Result:</h2>
+                <pre id="resultContent"></pre>
+            </div>
+        </main>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/93-Debouncing and Throttling Functions/readme.md b/93-Debouncing and Throttling Functions/readme.md
@@ -0,0 +1,78 @@
+Creating complex apps for startup businesses involves various aspects such as planning, design, development, testing, and deployment. It typically requires a team of skilled professionals, including project managers, designers, and developers. Below is a simplified outline of the steps involved in creating a complex app for a startup:
+
+### 1. Define Your Idea:
+
+-   Clearly define the problem your app aims to solve.
+-   Identify your target audience and market.
+-   Research competitors and find unique selling points.
+
+### 2. Wireframing and Prototyping:
+
+-   Create wireframes to outline the app's structure and layout.
+-   Develop interactive prototypes for user testing.
+-   Gather feedback and make necessary adjustments.
+
+### 3. Design:
+
+-   Create a visually appealing and user-friendly interface.
+-   Develop a design system for consistent branding.
+-   Consider usability and accessibility during the design phase.
+
+### 4. Technology Stack:
+
+-   Choose the appropriate technology stack (frontend, backend, database, etc.).
+-   Consider scalability, security, and future maintenance.
+
+### 5. Frontend Development:
+
+-   Develop the user interface using HTML, CSS, and JavaScript.
+-   Utilize frontend frameworks such as React, Angular, or Vue.js.
+-   Implement responsive design for various devices.
+
+### 6. Backend Development:
+
+-   Develop the server-side logic using a backend framework (Node.js, Django, Flask, Ruby on Rails, etc.).
+-   Design and implement the database structure.
+
+### 7. API Development:
+
+-   Create RESTful or GraphQL APIs to facilitate communication between frontend and backend.
+-   Ensure proper authentication and authorization mechanisms.
+
+### 8. Integration:
+
+-   Integrate third-party services or APIs if needed (payment gateways, authentication providers, etc.).
+
+### 9. Testing:
+
+-   Conduct unit testing, integration testing, and end-to-end testing.
+-   Perform usability testing with real users.
+-   Address and fix any identified bugs or issues.
+
+### 10. Deployment:
+
+-   Choose a suitable hosting platform (AWS, Azure, Heroku, etc.).
+-   Set up continuous integration and deployment (CI/CD) pipelines.
+-   Deploy the app to a production environment.
+
+### 11. Monitoring and Analytics:
+
+-   Implement monitoring tools for tracking app performance.
+-   Integrate analytics tools to gather user behavior data.
+
+### 12. Security:
+
+-   Implement security best practices to protect against common vulnerabilities.
+-   Regularly update dependencies and conduct security audits.
+
+### 13. Maintenance and Support:
+
+-   Provide ongoing maintenance and support.
+-   Update the app based on user feedback and changing requirements.
+
+### 14. Marketing and Launch:
+
+-   Develop a marketing strategy to promote the app.
+-   Launch the app and monitor user engagement.
+
+Remember that the complexity of the app development process may vary based on the specific features and requirements of your startup. Consider consulting with professionals or hiring a development team if needed.
diff --git a/93-Debouncing and Throttling Functions/script.js b/93-Debouncing and Throttling Functions/script.js
@@ -0,0 +1,66 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const delaySlider = document.getElementById("delaySlider");
+    const delayValue = document.getElementById("delayValue");
+    const textInput = document.getElementById("textInput");
+    const resultContent = document.getElementById("resultContent");
+
+    let debouncedRequest;
+    let throttledRequest;
+
+    function debounce(func, delay) {
+        let timeoutId;
+
+        return function () {
+            const context = this;
+            const args = arguments;
+
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                func.apply(context, args);
+            }, delay);
+        };
+    }
+
+    function throttle(func, limit) {
+        let inThrottle;
+
+        return function () {
+            const context = this;
+            const args = arguments;
+
+            if (!inThrottle) {
+                func.apply(context, args);
+                inThrottle = true;
+                setTimeout(() => (inThrottle = false), limit);
+            }
+        };
+    }
+
+    function simulateApiRequest(value) {
+        // Simulate an API request (replace this with your actual API request logic)
+        resultContent.textContent = `API Request: ${value}`;
+    }
+
+    function handleInput() {
+        const value = textInput.value;
+
+        // Debounce the API request
+        debouncedRequest(value);
+
+        // Throttle the API request
+        throttledRequest(value);
+    }
+
+    // Update delay value display
+    delaySlider.addEventListener("input", function () {
+        delayValue.textContent = delaySlider.value;
+    });
+
+    // Set up debouncing and throttling functions
+    const delay = parseInt(delaySlider.value, 10);
+    debouncedRequest = debounce(simulateApiRequest, delay);
+    throttledRequest = throttle(simulateApiRequest, delay);
+
+    // Add input event listener
+    textInput.addEventListener("input", handleInput);
+});
diff --git a/93-Debouncing and Throttling Functions/styles.css b/93-Debouncing and Throttling Functions/styles.css
@@ -0,0 +1,31 @@
+body {
+    font-family: "Arial", sans-serif;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    margin-top: 50px;
+}
+
+main {
+    margin: 20px;
+}
+
+label {
+    font-size: 16px;
+    margin-bottom: 10px;
+    display: block;
+}
+
+input {
+    padding: 10px;
+    font-size: 16px;
+    margin-bottom: 20px;
+}
+
+.result {
+    margin-top: 20px;
+}
+
+#resultContent {
+    white-space: pre-wrap;
+}
