From cd5c72beedf9faee2be1c32aca3aa3ca6447335b Mon Sep 17 00:00:00 2001
From: Sameer Faridi <s.faridi007@gmail.com>
Date: Tue, 20 Aug 2024 22:16:53 +0530
Subject: [PATCH 01/30] fix the build

---
 src/Utils.js | 1005 +++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 950 insertions(+), 55 deletions(-)

diff --git a/src/Utils.js b/src/Utils.js
index 66eb633..3acbde9 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -72,6 +72,10 @@ export const buttonDetails = [
   {
     name: "TextToSpeech",
     description: "Convert text to speech."
+  },
+  {
+    name: "following-curser",
+    description: "following curser."
   }
 ];
 
@@ -221,66 +225,74 @@ export const categories = [
       {
         id: 1,
         title: "Color Changing Button",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Create a button that changes color when clicked or hovered over."
+        description:
+          "Create a button that changes color when clicked or hovered over."
       },
       {
         id: 2,
         title: "Stop Watch",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Develop a functional stopwatch with start, stop, and reset features."
+        description:
+          "Develop a functional stopwatch with start, stop, and reset features."
       },
       {
         id: 3,
         title: "Password Generator",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Build a tool that generates secure, random passwords based on user-defined criteria."
+        description:
+          "Build a tool that generates secure, random passwords based on user-defined criteria."
       },
       {
         id: 4,
         title: "Tabs Composition",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Implement a tabbed interface component for organizing and displaying content."
+        description:
+          "Implement a tabbed interface component for organizing and displaying content."
       },
       {
         id: 5,
         title: "Breadcrumbs",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Create a breadcrumb navigation component to improve website navigation."
+        description:
+          "Create a breadcrumb navigation component to improve website navigation."
       },
       {
         id: 6,
         title: "Progress Bar",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Design and implement a progress bar to visualize task completion or loading status."
+        description:
+          "Design and implement a progress bar to visualize task completion or loading status."
       },
       {
         id: 7,
         title: "Holy Grail Layout",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Implement the classic 'Holy Grail' layout using modern CSS techniques."
+        description:
+          "Implement the classic 'Holy Grail' layout using modern CSS techniques."
       },
       {
         id: 8,
         title: "Blink Game",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Develop a simple reaction-based game where elements blink and users must click quickly."
+        description:
+          "Develop a simple reaction-based game where elements blink and users must click quickly."
       }
     ]
   },
@@ -290,98 +302,110 @@ export const categories = [
       {
         id: 9,
         title: "Stepper Component",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Create a multi-step form or wizard interface using a stepper component."
+        description:
+          "Create a multi-step form or wizard interface using a stepper component."
       },
       {
         id: 10,
         title: "Quiz App",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Build an interactive quiz application with multiple-choice questions and scoring."
+        description:
+          "Build an interactive quiz application with multiple-choice questions and scoring."
       },
       {
         id: 11,
         title: "Drag and Drop Notes",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Implement a drag-and-drop interface for organizing and rearranging notes or tasks."
+        description:
+          "Implement a drag-and-drop interface for organizing and rearranging notes or tasks."
       },
       {
         id: 12,
         title: "Tic Tac Toe",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Create a functional Tic Tac Toe game with win detection and player turn management."
+        description:
+          "Create a functional Tic Tac Toe game with win detection and player turn management."
       },
       {
         id: 13,
         title: "Website Walk-through Helper",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Develop a step-by-step guide system to help users navigate through a website or application."
+        description:
+          "Develop a step-by-step guide system to help users navigate through a website or application."
       },
       {
         id: 14,
         title: "Overlapping Circles Detector",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Create a function to detect and visualize overlapping circles on a canvas."
+        description:
+          "Create a function to detect and visualize overlapping circles on a canvas."
       },
       {
         id: 15,
         title: "OTP Login System",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Implement a One-Time Password (OTP) based login system for enhanced security."
+        description:
+          "Implement a One-Time Password (OTP) based login system for enhanced security."
       },
       {
         id: 16,
         title: "Dark Mode Toggle",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Create a toggle switch to switch between dark and light modes in a web application."
+        description:
+          "Create a toggle switch to switch between dark and light modes in a web application."
       },
       {
         id: 17,
         title: "Selectable Grid",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Build a grid where users can select multiple cells, similar to spreadsheet functionality."
+        description:
+          "Build a grid where users can select multiple cells, similar to spreadsheet functionality."
       },
       {
         id: 18,
         title: "Search Suggestions",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Implement a search bar with auto-complete suggestions as the user types."
+        description:
+          "Implement a search bar with auto-complete suggestions as the user types."
       },
       {
         id: 19,
         title: "Modal Component",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Create a reusable modal component as a functional component in React."
+        description:
+          "Create a reusable modal component as a functional component in React."
       },
       {
         id: 20,
         title: "Like Button",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Implement an interactive 'like' button with animations and state management."
+        description:
+          "Implement an interactive 'like' button with animations and state management."
       }
     ]
   },
@@ -391,59 +415,930 @@ export const categories = [
       {
         id: 21,
         title: "Job Board with API Integration",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Build a job board application that fetches and displays job listings using the Hacker News API."
+        description:
+          "Build a job board application that fetches and displays job listings using the Hacker News API."
       },
       {
         id: 22,
         title: "Infinite Scroll Implementation",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Create an infinite scroll feature to load content dynamically as the user scrolls."
+        description:
+          "Create an infinite scroll feature to load content dynamically as the user scrolls."
       },
       {
         id: 23,
         title: "useEffect Hook Polyfill",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Implement a polyfill for React's useEffect hook to understand its inner workings."
+        description:
+          "Implement a polyfill for React's useEffect hook to understand its inner workings."
       },
       {
         id: 24,
         title: "useMemo Hook Polyfill",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Create a custom implementation of React's useMemo hook for optimizing performance."
+        description:
+          "Create a custom implementation of React's useMemo hook for optimizing performance."
       },
       {
         id: 25,
         title: "useThrottle Hook",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Develop a custom React hook for throttling function calls to improve performance."
+        description:
+          "Develop a custom React hook for throttling function calls to improve performance."
       },
       {
         id: 26,
         title: "Multi-Select Search Component",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Build a search component that allows users to select multiple items from search results."
+        description:
+          "Build a search component that allows users to select multiple items from search results."
       },
       {
         id: 27,
         title: "Recursive Comment Section",
-        date: "06 July 2024",
+        date: "25 July 2024",
         author: "sameerkali",
         link: "https://github.com/sameerkali/React_coding_round_practice",
-        description: "Implement a nested comment section using recursion and depth-first search in React."
+        description:
+          "Implement a nested comment section using recursion and depth-first search in React."
       }
     ]
   }
-];
\ No newline at end of file
+];
+
+export const ServiceId = "service_gtb4j1e";
+
+export const Arun_M_questions = {
+  questions: [
+    {
+      id: 1,
+      title: "Implement Debounce",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a debounce function.",
+      difficulty: "easy",
+      askedIn: ["Meta", "Google", "Flipkart", "IBM", "MakeMyTrip"]
+    },
+
+    {
+      id: 2,
+      title: "Implement Throttle",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a throttle function.",
+      difficulty: "medium",
+      askedIn: ["Google", "Meta", "Tekion"]
+    },
+    {
+      id: 3,
+      title: "Implement Currying",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement function currying in JavaScript.",
+      difficulty: "easy",
+      askedIn: ["Intuit", "Tekion", "Adobe", "MakeMyTrip", "Jio", "Paytm"]
+    },
+    {
+      id: 4,
+      title: "Implement Currying with Placeholders",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement function currying with placeholders.",
+      difficulty: "hard",
+      askedIn: [
+        "Amazon",
+        "Flipkart",
+        "Yandex",
+        "Xiaomi",
+        "Vimeo",
+        "Gojek",
+        "Zeta"
+      ]
+    },
+    {
+      id: 5,
+      title: "Deep Flatten I",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement deep flattening of arrays (version 1).",
+      difficulty: "medium",
+      askedIn: ["Roblox", "Disney+ Hotstar", "Rippling"]
+    },
+    {
+      id: 6,
+      title: "Deep Flatten II",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement deep flattening of arrays (version 2).",
+      difficulty: "medium",
+      askedIn: ["CoinSwitch"]
+    },
+    {
+      id: 7,
+      title: "Deep Flatten III",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement deep flattening of arrays (version 3).",
+      difficulty: "easy",
+      askedIn: []
+    },
+    {
+      id: 8,
+      title: "Deep Flatten IV",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement deep flattening of arrays (version 4).",
+      difficulty: "hard",
+      askedIn: ["Meta", "TikTok", "Google", "Apple", "Yandex", "Flipkart"]
+    },
+    {
+      id: 9,
+      title: "Negative Indexing in Arrays (Proxies)",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement negative indexing in arrays using Proxies.",
+      difficulty: "medium",
+      askedIn: []
+    },
+    {
+      id: 10,
+      title: "Implement a Pipe Method",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a pipe method for function composition.",
+      difficulty: "easy",
+      askedIn: ["Adobe"]
+    },
+    {
+      id: 11,
+      title: "Implement Auto-retry Promises",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Implement a system for automatically retrying failed promises.",
+      difficulty: "medium",
+      askedIn: ["Amazon", "Flipkart", "Adobe", "Paypal", "Swiggy"]
+    },
+    {
+      id: 12,
+      title: "Implement Promise.all",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement the Promise.all() method.",
+      difficulty: "medium",
+      askedIn: [
+        "TikTok",
+        "Lyft",
+        "Snapchat",
+        "Disney+ Hotstar",
+        "MakeMyTrip",
+        "Jio",
+        "MindTickle",
+        "Zepto"
+      ]
+    },
+    {
+      id: 13,
+      title: "Implement Promise.allSettled",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement the Promise.allSettled() method.",
+      difficulty: "medium",
+      askedIn: ["Tekion", "Adobe"]
+    },
+    {
+      id: 14,
+      title: "Implement Promise.any",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement the Promise.any() method.",
+      difficulty: "medium",
+      askedIn: ["Zepto"]
+    },
+    {
+      id: 15,
+      title: "Implement Promise.race",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement the Promise.race() method.",
+      difficulty: "easy",
+      askedIn: ["Yandex"]
+    },
+    {
+      id: 16,
+      title: "Implement Promise.finally",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement the Promise.finally() method.",
+      difficulty: "medium",
+      askedIn: ["Google"]
+    },
+    {
+      id: 17,
+      title: "Implement Custom Javascript Promises",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom Promise class in JavaScript.",
+      difficulty: "super hard",
+      askedIn: ["Amazon", "Airbnb", "Tekion", "Cars24"]
+    },
+    {
+      id: 18,
+      title: "Throttling Promises by Batching",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a system to throttle promises by batching them.",
+      difficulty: "medium",
+      askedIn: []
+    },
+    {
+      id: 19,
+      title: "Implement Custom Deep Equal",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom deep equality comparison function.",
+      difficulty: "hard",
+      askedIn: ["Google", "Tekion"]
+    },
+    {
+      id: 20,
+      title: "Implement Custom Object.assign",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of Object.assign().",
+      difficulty: "medium",
+      askedIn: ["ServiceNow", "Flipkart"]
+    },
+    {
+      id: 21,
+      title: "Implement Custom JSON.stringify",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of JSON.stringify().",
+      difficulty: "hard",
+      askedIn: ["Meta"]
+    },
+    {
+      id: 22,
+      title: "Implement Custom JSON.parse",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of JSON.parse().",
+      difficulty: "super hard",
+      askedIn: ["Meta"]
+    },
+    {
+      id: 23,
+      title: "Implement Custom typeof operator",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of the typeof operator.",
+      difficulty: "medium",
+      askedIn: []
+    },
+    {
+      id: 24,
+      title: "Implement Custom lodash _.get()",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of lodash's _.get() method.",
+      difficulty: "medium",
+      askedIn: ["TikTok", "Amazon", "Quizizz", "MindTickle"]
+    },
+    {
+      id: 25,
+      title: "Implement Custom lodash _.set()",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of lodash's _.set() method.",
+      difficulty: "medium",
+      askedIn: []
+    },
+    {
+      id: 26,
+      title: "Implement Custom lodash _.omit()",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of lodash's _.omit() method.",
+      difficulty: "medium",
+      askedIn: []
+    },
+    {
+      id: 27,
+      title: "Implement Custom String Tokenizer",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom string tokenizer.",
+      difficulty: "medium",
+      askedIn: []
+    },
+    {
+      id: 28,
+      title: "Implement Custom setTimeout",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of setTimeout().",
+      difficulty: "medium",
+      askedIn: []
+    },
+    {
+      id: 29,
+      title: "Implement Custom setInterval",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of setInterval().",
+      difficulty: "medium",
+      askedIn: ["Meta", "TikTok", "Swiggy"]
+    },
+    {
+      id: 30,
+      title: "Implement Custom clearAllTimers",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a function to clear all active timers.",
+      difficulty: "easy",
+      askedIn: ["Meta"]
+    },
+    {
+      id: 31,
+      title: "Implement Custom Event Emitter",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom event emitter class.",
+      difficulty: "medium",
+      askedIn: ["Meta", "Flipkart", "Adobe", "Jio", "Tekion"]
+    },
+    {
+      id: 32,
+      title: "Implement Custom Browser History",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom browser history object.",
+      difficulty: "medium",
+      askedIn: []
+    },
+    {
+      id: 33,
+      title: "Implement Custom Deep Clone",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom deep cloning function.",
+      difficulty: "medium",
+      askedIn: ["Adobe", "Tekion", "Navi"]
+    },
+    {
+      id: 34,
+      title: "Implement Custom lodash _.chunk()",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of lodash's _.chunk() method.",
+      difficulty: "medium",
+      askedIn: []
+    },
+    {
+      id: 35,
+      title: "Promisify the Async Callbacks",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Convert async callbacks to promises.",
+      difficulty: "easy",
+      askedIn: ["Amazon"]
+    },
+    {
+      id: 36,
+      title: "Implement 'N' async tasks in Series",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a system to run N async tasks in series.",
+      difficulty: "hard",
+      askedIn: ["Jio", "MakeMyTrip", "Tekion"]
+    },
+    {
+      id: 37,
+      title: "Implement 'N' async tasks in Parallel",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a system to run N async tasks in parallel.",
+      difficulty: "medium",
+      askedIn: ["Zepto", "Paytm", "BookMyShow"]
+    },
+    {
+      id: 38,
+      title: "Implement 'N' async tasks in Race",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a system to run N async tasks in a race.",
+      difficulty: "easy",
+      askedIn: []
+    },
+    {
+      id: 39,
+      title: "Implement Custom Object.is() method",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of the Object.is() method.",
+      difficulty: "easy",
+      askedIn: []
+    },
+    {
+      id: 40,
+      title: "Implement Custom lodash _.partial()",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of lodash's _.partial() method.",
+      difficulty: "medium",
+      askedIn: ["Meesho"]
+    },
+    {
+      id: 41,
+      title: "Implement Custom lodash _.once()",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of lodash's _.once() method.",
+      difficulty: "medium",
+      askedIn: []
+    },
+    {
+      id: 42,
+      title: "Implement Custom trim() operation",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom trim() operation for strings.",
+      difficulty: "medium",
+      askedIn: []
+    },
+    {
+      id: 43,
+      title: "Implement Custom reduce() method",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of the reduce() method.",
+      difficulty: "medium",
+      askedIn: ["Amazon", "Apple", "Expedia", "Paytm", "ByteLearn"]
+    },
+    {
+      id: 44,
+      title: "Implement Custom lodash _.memoize()",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of lodash's _.memoize() method.",
+      difficulty: "medium",
+      askedIn: ["Meta", "Intuit", "Gameskraft"]
+    },
+    {
+      id: 45,
+      title: "Implement Custom call() method",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of the call() method.",
+      difficulty: "medium",
+      askedIn: ["Meesho"]
+    },
+    {
+      id: 46,
+      title: "Implement Custom apply() method",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of the apply() method.",
+      difficulty: "medium",
+      askedIn: []
+    },
+    {
+      id: 47,
+      title: "Implement Custom bind() method",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom version of the bind() method.",
+      difficulty: "medium",
+      askedIn: ["Rippling", "Flipkart", "BookMyShow"]
+    },
+    {
+      id: 48,
+      title: "Implement Custom React 'classnames' library",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Implement a custom version of the classnames library for React.",
+      difficulty: "medium",
+      askedIn: ["Meta"]
+    },
+    {
+      id: 49,
+      title: "Implement Custom Redux used 'Immer' library",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Implement a custom version of Redux using the Immer library.",
+      difficulty: "medium",
+      askedIn: []
+    },
+    {
+      id: 50,
+      title: "Implement Custom Virtual DOM - I (Serialize)",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom virtual DOM (serialization).",
+      difficulty: "hard",
+      askedIn: ["Meta"]
+    },
+    {
+      id: 51,
+      title: "Implement Custom Virtual DOM - II (Deserialize)",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement a custom virtual DOM (deserialization).",
+      difficulty: "medium",
+      askedIn: ["Meta"]
+    },
+    {
+      id: 52,
+      title: "Implement Memoize/Cache identical API calls",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Implement memoization or caching for identical API calls.",
+      difficulty: "hard",
+      askedIn: ["Meta"]
+    },
+    {
+      id: 53,
+      title: "Virtualized List",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Implement a virtualized list to efficiently render large lists of items.",
+      difficulty: "hard",
+      askedIn: ["Google"]
+    },
+    {
+      id: 54,
+      title: "Context API for Theme Switching",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Use the Context API to implement theme switching across a React application.",
+      difficulty: "medium",
+      askedIn: ["Amazon"]
+    },
+    {
+      id: 55,
+      title: "Custom Hook for Data Fetching",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Create a custom React hook for data fetching with error handling and loading states.",
+      difficulty: "medium",
+      askedIn: ["Netflix"]
+    },
+    {
+      id: 56,
+      title: "Image Carousel",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Develop an image carousel component with auto-slide and manual navigation.",
+      difficulty: "easy",
+      askedIn: ["Microsoft"]
+    },
+    {
+      id: 57,
+      title: "Form Validation with Formik and Yup",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Implement form validation using Formik and Yup for a user registration form.",
+      difficulty: "medium",
+      askedIn: ["Apple"]
+    },
+    {
+      id: 58,
+      title: "Real-Time Chat Application",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Build a real-time chat application using WebSockets.",
+      difficulty: "hard",
+      askedIn: ["Facebook"]
+    },
+    {
+      id: 59,
+      title: "Debounce Function Implementation",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Implement a debounce function to limit the rate at which a function is executed.",
+      difficulty: "medium",
+      askedIn: ["LinkedIn"]
+    },
+    {
+      id: 60,
+      title: "Markdown Previewer",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Create a Markdown previewer that converts Markdown input to HTML in real-time.",
+      difficulty: "easy",
+      askedIn: ["Twitter"]
+    },
+    {
+      id: 61,
+      title: "E-commerce Product Filter",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Implement a product filter component for an e-commerce website.",
+      difficulty: "medium",
+      askedIn: ["Shopify"]
+    },
+    {
+      id: 62,
+      title: "Interactive Map with Leaflet",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "Build an interactive map using Leaflet and React.",
+      difficulty: "hard",
+      askedIn: ["Uber"]
+    },
+    {
+      id: 63,
+      title: "Real-Time Data Visualization",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Create a real-time data visualization dashboard using D3.js and React.",
+      difficulty: "hard",
+      askedIn: ["Tesla"]
+    },
+    {
+      id: 64,
+      title: "Dynamic Form Builder",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Build a dynamic form builder that allows users to create and customize forms.",
+      difficulty: "medium",
+      askedIn: ["Salesforce"]
+    },
+    {
+      id: 65,
+      title: "Responsive Navbar",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Create a responsive navbar that collapses and expands based on screen size.",
+      difficulty: "easy",
+      askedIn: ["Adobe"]
+    },
+    {
+      id: 66,
+      title: "Weather App with Geolocation",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Develop a weather application that uses geolocation to fetch weather data for the user's current location.",
+      difficulty: "medium",
+      askedIn: ["IBM"]
+    },
+    {
+      id: 67,
+      title: "Recipe Finder",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Create a recipe finder app that fetches recipes from an external API based on user input.",
+      difficulty: "easy",
+      askedIn: ["Pinterest"]
+    },
+    {
+      id: 68,
+      title: "Custom Scrollbars",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Implement custom scrollbars for a web application using CSS and JavaScript.",
+      difficulty: "medium",
+      askedIn: ["Slack"]
+    },
+    {
+      id: 69,
+      title: "SVG Animation",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Create an animated SVG graphic using React and CSS animations.",
+      difficulty: "hard",
+      askedIn: ["Spotify"]
+    },
+    {
+      id: 70,
+      title: "Real-Time Collaborative Editor",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Develop a real-time collaborative text editor using WebSockets.",
+      difficulty: "hard",
+      askedIn: ["Dropbox"]
+    },
+    {
+      id: 71,
+      title: "Video Player with Custom Controls",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Build a video player component with custom controls and full-screen functionality.",
+      difficulty: "medium",
+      askedIn: ["YouTube"]
+    },
+    {
+      id: 72,
+      title: "Image Gallery with Lightbox",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Create an image gallery with a lightbox feature for viewing images in a modal.",
+      difficulty: "easy",
+      askedIn: ["Flickr"]
+    },
+    {
+      id: 73,
+      title: "Markdown to HTML Converter",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Build a tool that converts Markdown input into HTML output in real-time.",
+      difficulty: "medium",
+      askedIn: ["Medium"]
+    },
+    {
+      id: 74,
+      title: "E-commerce Shopping Cart",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Implement a shopping cart feature for an e-commerce site with add, remove, and update functionalities.",
+      difficulty: "medium",
+      askedIn: ["Amazon"]
+    },
+    {
+      id: 75,
+      title: "GraphQL API Integration",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Integrate a GraphQL API into a React application and perform queries and mutations.",
+      difficulty: "hard",
+      askedIn: ["Airbnb"]
+    },
+    {
+      id: 76,
+      title: "Redux State Management",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Implement state management using Redux in a React application.",
+      difficulty: "medium",
+      askedIn: ["PayPal"]
+    },
+    {
+      id: 77,
+      title: "Voice Recognition",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Create a voice recognition feature to interact with a web application using the Web Speech API.",
+      difficulty: "hard",
+      askedIn: ["Google"]
+    },
+    {
+      id: 78,
+      title: "Password Strength Indicator",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Develop a password strength indicator to provide feedback on the strength of user passwords.",
+      difficulty: "easy",
+      askedIn: ["Twitter"]
+    },
+    {
+      id: 79,
+      title: "Server-Side Rendering with Next.js",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Implement server-side rendering for a React application using Next.js.",
+      difficulty: "medium",
+      askedIn: ["Netflix"]
+    },
+    {
+      id: 80,
+      title: "Accessibility Enhancements",
+      date: "25 July 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description:
+        "Enhance the accessibility of a web application by implementing ARIA roles and keyboard navigation.",
+      difficulty: "medium",
+      askedIn: ["Microsoft"]
+    },
+    {
+      id: 81,
+      title: "Following Curser",
+      date: "20 August 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "A circle that follows the Curser",
+      difficulty: "easy",
+      askedIn: [""]
+    }
+  ]
+};

From 23ed67734c5c781a769053d873f7c88501621400 Mon Sep 17 00:00:00 2001
From: Sameer Faridi <s.faridi007@gmail.com>
Date: Tue, 20 Aug 2024 22:24:02 +0530
Subject: [PATCH 02/30] fix the utils

---
 src/Utils.js | 147 +--------------------------------------------------
 1 file changed, 1 insertion(+), 146 deletions(-)

diff --git a/src/Utils.js b/src/Utils.js
index 581a019..40fd482 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -76,12 +76,10 @@ export const buttonDetails = [
   {
     name: "following-curser",
     description: "following curser."
-<<<<<<< HEAD
-=======
   },
+  {
     name: "Debouncing",
     description: "Impliment Debouncing."
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
   }
 ];
 
@@ -487,15 +485,8 @@ export const categories = [
 
 export const ServiceId = "service_gtb4j1e";
 
-<<<<<<< HEAD
 export const Arun_M_questions = {
   questions: [
-=======
-
-export const Arun_M_questions = {
-  questions: [
-    
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
     {
       id: 1,
       title: "Implement Debounce",
@@ -506,9 +497,6 @@ export const Arun_M_questions = {
       difficulty: "easy",
       askedIn: ["Meta", "Google", "Flipkart", "IBM", "MakeMyTrip"]
     },
-<<<<<<< HEAD
-
-=======
     {
       id: 81,
       title: "Following Curser",
@@ -519,7 +507,6 @@ export const Arun_M_questions = {
       difficulty: "easy",
       askedIn: [""]
     },
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
     {
       id: 2,
       title: "Implement Throttle",
@@ -548,7 +535,6 @@ export const Arun_M_questions = {
       link: "https://github.com/sameerkali/React_coding_round_practice",
       description: "Implement function currying with placeholders.",
       difficulty: "hard",
-<<<<<<< HEAD
       askedIn: [
         "Amazon",
         "Flipkart",
@@ -558,9 +544,6 @@ export const Arun_M_questions = {
         "Gojek",
         "Zeta"
       ]
-=======
-      askedIn: ["Amazon", "Flipkart", "Yandex", "Xiaomi", "Vimeo", "Gojek", "Zeta"]
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
     },
     {
       id: 5,
@@ -628,12 +611,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Implement a system for automatically retrying failed promises.",
-=======
-      description: "Implement a system for automatically retrying failed promises.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["Amazon", "Flipkart", "Adobe", "Paypal", "Swiggy"]
     },
@@ -645,7 +624,6 @@ export const Arun_M_questions = {
       link: "https://github.com/sameerkali/React_coding_round_practice",
       description: "Implement the Promise.all() method.",
       difficulty: "medium",
-<<<<<<< HEAD
       askedIn: [
         "TikTok",
         "Lyft",
@@ -656,9 +634,6 @@ export const Arun_M_questions = {
         "MindTickle",
         "Zepto"
       ]
-=======
-      askedIn: ["TikTok", "Lyft", "Snapchat", "Disney+ Hotstar", "MakeMyTrip", "Jio", "MindTickle", "Zepto"]
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
     },
     {
       id: 13,
@@ -1016,12 +991,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Implement a custom version of the classnames library for React.",
-=======
-      description: "Implement a custom version of the classnames library for React.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["Meta"]
     },
@@ -1031,12 +1002,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Implement a custom version of Redux using the Immer library.",
-=======
-      description: "Implement a custom version of Redux using the Immer library.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: []
     },
@@ -1076,12 +1043,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Implement a virtualized list to efficiently render large lists of items.",
-=======
-      description: "Implement a virtualized list to efficiently render large lists of items.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "hard",
       askedIn: ["Google"]
     },
@@ -1091,12 +1054,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Use the Context API to implement theme switching across a React application.",
-=======
-      description: "Use the Context API to implement theme switching across a React application.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["Amazon"]
     },
@@ -1106,12 +1065,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Create a custom React hook for data fetching with error handling and loading states.",
-=======
-      description: "Create a custom React hook for data fetching with error handling and loading states.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["Netflix"]
     },
@@ -1121,12 +1076,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Develop an image carousel component with auto-slide and manual navigation.",
-=======
-      description: "Develop an image carousel component with auto-slide and manual navigation.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "easy",
       askedIn: ["Microsoft"]
     },
@@ -1136,12 +1087,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Implement form validation using Formik and Yup for a user registration form.",
-=======
-      description: "Implement form validation using Formik and Yup for a user registration form.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["Apple"]
     },
@@ -1161,12 +1108,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Implement a debounce function to limit the rate at which a function is executed.",
-=======
-      description: "Implement a debounce function to limit the rate at which a function is executed.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["LinkedIn"]
     },
@@ -1176,12 +1119,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Create a Markdown previewer that converts Markdown input to HTML in real-time.",
-=======
-      description: "Create a Markdown previewer that converts Markdown input to HTML in real-time.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "easy",
       askedIn: ["Twitter"]
     },
@@ -1191,12 +1130,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Implement a product filter component for an e-commerce website.",
-=======
-      description: "Implement a product filter component for an e-commerce website.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["Shopify"]
     },
@@ -1216,12 +1151,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Create a real-time data visualization dashboard using D3.js and React.",
-=======
-      description: "Create a real-time data visualization dashboard using D3.js and React.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "hard",
       askedIn: ["Tesla"]
     },
@@ -1231,12 +1162,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Build a dynamic form builder that allows users to create and customize forms.",
-=======
-      description: "Build a dynamic form builder that allows users to create and customize forms.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["Salesforce"]
     },
@@ -1246,12 +1173,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Create a responsive navbar that collapses and expands based on screen size.",
-=======
-      description: "Create a responsive navbar that collapses and expands based on screen size.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "easy",
       askedIn: ["Adobe"]
     },
@@ -1261,12 +1184,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Develop a weather application that uses geolocation to fetch weather data for the user's current location.",
-=======
-      description: "Develop a weather application that uses geolocation to fetch weather data for the user's current location.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["IBM"]
     },
@@ -1276,12 +1195,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Create a recipe finder app that fetches recipes from an external API based on user input.",
-=======
-      description: "Create a recipe finder app that fetches recipes from an external API based on user input.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "easy",
       askedIn: ["Pinterest"]
     },
@@ -1291,12 +1206,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Implement custom scrollbars for a web application using CSS and JavaScript.",
-=======
-      description: "Implement custom scrollbars for a web application using CSS and JavaScript.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["Slack"]
     },
@@ -1306,12 +1217,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Create an animated SVG graphic using React and CSS animations.",
-=======
-      description: "Create an animated SVG graphic using React and CSS animations.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "hard",
       askedIn: ["Spotify"]
     },
@@ -1321,12 +1228,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Develop a real-time collaborative text editor using WebSockets.",
-=======
-      description: "Develop a real-time collaborative text editor using WebSockets.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "hard",
       askedIn: ["Dropbox"]
     },
@@ -1336,12 +1239,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Build a video player component with custom controls and full-screen functionality.",
-=======
-      description: "Build a video player component with custom controls and full-screen functionality.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["YouTube"]
     },
@@ -1351,12 +1250,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Create an image gallery with a lightbox feature for viewing images in a modal.",
-=======
-      description: "Create an image gallery with a lightbox feature for viewing images in a modal.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "easy",
       askedIn: ["Flickr"]
     },
@@ -1366,12 +1261,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Build a tool that converts Markdown input into HTML output in real-time.",
-=======
-      description: "Build a tool that converts Markdown input into HTML output in real-time.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["Medium"]
     },
@@ -1381,12 +1272,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Implement a shopping cart feature for an e-commerce site with add, remove, and update functionalities.",
-=======
-      description: "Implement a shopping cart feature for an e-commerce site with add, remove, and update functionalities.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["Amazon"]
     },
@@ -1396,12 +1283,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Integrate a GraphQL API into a React application and perform queries and mutations.",
-=======
-      description: "Integrate a GraphQL API into a React application and perform queries and mutations.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "hard",
       askedIn: ["Airbnb"]
     },
@@ -1411,12 +1294,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Implement state management using Redux in a React application.",
-=======
-      description: "Implement state management using Redux in a React application.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["PayPal"]
     },
@@ -1426,12 +1305,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Create a voice recognition feature to interact with a web application using the Web Speech API.",
-=======
-      description: "Create a voice recognition feature to interact with a web application using the Web Speech API.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "hard",
       askedIn: ["Google"]
     },
@@ -1441,12 +1316,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Develop a password strength indicator to provide feedback on the strength of user passwords.",
-=======
-      description: "Develop a password strength indicator to provide feedback on the strength of user passwords.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "easy",
       askedIn: ["Twitter"]
     },
@@ -1456,12 +1327,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Implement server-side rendering for a React application using Next.js.",
-=======
-      description: "Implement server-side rendering for a React application using Next.js.",
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3
       difficulty: "medium",
       askedIn: ["Netflix"]
     },
@@ -1471,7 +1338,6 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-<<<<<<< HEAD
       description:
         "Enhance the accessibility of a web application by implementing ARIA roles and keyboard navigation.",
       difficulty: "medium",
@@ -1489,14 +1355,3 @@ export const Arun_M_questions = {
     }
   ]
 };
-=======
-      description: "Enhance the accessibility of a web application by implementing ARIA roles and keyboard navigation.",
-      difficulty: "medium",
-      askedIn: ["Microsoft"]
-    },
-    
-    
-    
-  ]
-}
->>>>>>> 71b573c8751ab87ecbf95a570c13921099a3acf3

From d1730b6b4a0efc27672348db2c9aa64c4f4bab42 Mon Sep 17 00:00:00 2001
From: Sameer Faridi <76611058+sameerkali@users.noreply.github.com>
Date: Wed, 21 Aug 2024 11:50:19 +0530
Subject: [PATCH 03/30] Update FollowingCurser.jsx

---
 src/All Assessment/assessment19/FollowingCurser.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/All Assessment/assessment19/FollowingCurser.jsx b/src/All Assessment/assessment19/FollowingCurser.jsx
index d8a0321..71aced8 100644
--- a/src/All Assessment/assessment19/FollowingCurser.jsx	
+++ b/src/All Assessment/assessment19/FollowingCurser.jsx	
@@ -25,7 +25,7 @@ const FollowingCurser = () => {
     };
   };
 
-  const throttledHandleMovement = throttle(handleMovement, 40);  
+  const throttledHandleMovement = throttle(handleMovement, 20);  
 
   return (
     <div

From b86b666e0a4e89fa0152d3efc30483155d95d12a Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Sat, 24 Aug 2024 18:52:05 +0530
Subject: [PATCH 04/30] checking

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index fa4f542..ecd176f 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,8 @@
 - OTP Login
 - Dark mode Light mode
 
+
+
 ## Medium:
 
 - Selectable Grid ✅

From 22af8a291c337841b191a5fe8afde1635e631d25 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Tue, 27 Aug 2024 13:26:04 +0530
Subject: [PATCH 05/30] adding toster

---
 .../assessment20/Debouncing.jsx               | 35 +++++++++++++++++++
 src/All Assessment/assessment20/readme.md     |  1 +
 src/All Assessment/assessment21/Toster.jsx    |  9 +++++
 src/All Assessment/assessment21/readme.md     |  1 +
 src/App.jsx                                   |  3 +-
 src/Utils.js                                  |  4 +++
 6 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/All Assessment/assessment20/Debouncing.jsx
 create mode 100644 src/All Assessment/assessment20/readme.md
 create mode 100644 src/All Assessment/assessment21/Toster.jsx
 create mode 100644 src/All Assessment/assessment21/readme.md

diff --git a/src/All Assessment/assessment20/Debouncing.jsx b/src/All Assessment/assessment20/Debouncing.jsx
new file mode 100644
index 0000000..d16fbba
--- /dev/null
+++ b/src/All Assessment/assessment20/Debouncing.jsx	
@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+
+const Debouncing = () => {
+  const [inputValue, setInputValue] = useState('');
+  const [debouncedValue, setDebouncedValue] = useState('');
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(inputValue);
+    }, 300); 
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [inputValue]);
+
+  const handleChange = (event) => {
+    setInputValue(event.target.value);
+  };
+
+  return (
+    <div className='flex flex-col h-screen bg-gray-800/20 items-center justify-center'>
+      <input
+        className='bg-transparent border-2 border-gray-500 rounded-lg w-1/2 px-10 py-3'
+        type="text"
+        value={inputValue}
+        onChange={handleChange}
+        placeholder="Type something..."
+      />
+      <p>Input value: {inputValue}</p>
+      <p>Debounced value: {debouncedValue}</p>
+    </div>
+  );
+};
+
+export default Debouncing;
diff --git a/src/All Assessment/assessment20/readme.md b/src/All Assessment/assessment20/readme.md
new file mode 100644
index 0000000..93ba11c
--- /dev/null
+++ b/src/All Assessment/assessment20/readme.md	
@@ -0,0 +1 @@
+## Blink game
\ No newline at end of file
diff --git a/src/All Assessment/assessment21/Toster.jsx b/src/All Assessment/assessment21/Toster.jsx
new file mode 100644
index 0000000..14db90a
--- /dev/null
+++ b/src/All Assessment/assessment21/Toster.jsx	
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Toster = () => {
+  return (
+    <div>Toster</div>
+  )
+}
+
+export default Toster
\ No newline at end of file
diff --git a/src/All Assessment/assessment21/readme.md b/src/All Assessment/assessment21/readme.md
new file mode 100644
index 0000000..93ba11c
--- /dev/null
+++ b/src/All Assessment/assessment21/readme.md	
@@ -0,0 +1 @@
+## Blink game
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 11aa129..6a67ec0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -34,6 +34,7 @@ import Code from "./Components/Code_Snippet/Code";
 import FollowingCurser from "./All Assessment/assessment19/FollowingCurser";
 
 import Debouncing from "./All Assessment/assessment19/Debouncing";
+import Toster from "./All Assessment/assessment21/Toster";
 
 
 ReactGA.initialize("G-R3DJ0V5QK6");
@@ -103,7 +104,7 @@ const App = () => {
         <Route path="/following-curser" element={<FollowingCurser />} />
         <Route path="/problems" element={<ProblemsPage />} />
         <Route path="/feedback" element={<Feedback />} />
-        <Route path="/debouncing" element={<Debouncing />} />
+        <Route path="/debouncing" element={<Debouncing />} /><Route path="/toster" element={<Toster />} />
         <Route
           path="/code"
           element={<Code code={exampleCode} language="javascript" />}
diff --git a/src/Utils.js b/src/Utils.js
index 40fd482..78d4d31 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -80,6 +80,10 @@ export const buttonDetails = [
   {
     name: "Debouncing",
     description: "Impliment Debouncing."
+  },
+  {
+    name: "Toster",
+    description: "Toster message trigger on event."
   }
 ];
 

From a6a0d53709d44a6f59fb4a9193c9e979ab4a6625 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Tue, 27 Aug 2024 13:54:23 +0530
Subject: [PATCH 06/30] My version of toster that is working but not so
 optimized

---
 src/All Assessment/assessment21/Toster.jsx | 44 +++++++++++++++++++---
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/All Assessment/assessment21/Toster.jsx b/src/All Assessment/assessment21/Toster.jsx
index 14db90a..3f25fd1 100644
--- a/src/All Assessment/assessment21/Toster.jsx	
+++ b/src/All Assessment/assessment21/Toster.jsx	
@@ -1,9 +1,43 @@
-import React from 'react'
+import React, { useState } from "react";
+import GotoHome from "../../Components/GoToHome";
 
 const Toster = () => {
+  const [showToster, setShowToster] = useState(false)
+  console.log("showToster",showToster)
+  const handleClick = () => {
+    setShowToster(true)
+  };
+  setTimeout(() => {
+    setShowToster(false)
+    console.log("I am also running")
+  }, 6000);
   return (
-    <div>Toster</div>
-  )
-}
+    <div className="h-screen flex justify-center items-center flex-col gap-8">
+     {showToster && <div className="z-1000 absolute top-10 right-10"> <TosterBox setShowToster="fasle" /></div>}
+      <button
+        className="cursor-pointer border-black border px-10 py-3 hover:bg-gray-100 "
+        onClick={handleClick}
+      >
+        Click To Show Toster
+      </button>
+      <GotoHome />
+    </div>
+  );
+};
 
-export default Toster
\ No newline at end of file
+export default Toster;
+
+const TosterBox = (setShowToster) => {
+  console.log(setShowToster, "======")
+  const handleClose = () => {
+    setShowToster="false" 
+  }
+  return (
+    <div className=" items-center bg-red-400 ">
+     <div className="flex px-10 py-4 gap-10">
+     <h1 className="text-white ">This is a Toster Box after click </h1>
+     <h1 className="text-white" onClick={handleClose} >x</h1>
+     </div>
+    </div>
+  );
+};

From f4c1a2f40cb3b2c521a580f663a55da40bfff8a6 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Tue, 27 Aug 2024 14:20:06 +0530
Subject: [PATCH 07/30] apna dimaag + chat GPT for optimize it more

---
 src/All Assessment/assessment21/Toster.jsx | 59 +++++++++++++++-------
 1 file changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/All Assessment/assessment21/Toster.jsx b/src/All Assessment/assessment21/Toster.jsx
index 3f25fd1..1ccc5d4 100644
--- a/src/All Assessment/assessment21/Toster.jsx	
+++ b/src/All Assessment/assessment21/Toster.jsx	
@@ -2,20 +2,43 @@ import React, { useState } from "react";
 import GotoHome from "../../Components/GoToHome";
 
 const Toster = () => {
-  const [showToster, setShowToster] = useState(false)
-  console.log("showToster",showToster)
+  const [toasts, setToasts] = useState([]);
+
   const handleClick = () => {
-    setShowToster(true)
+    const newToast = { id: Date.now(), visible: true };
+    setToasts((prevToasts) => [newToast, ...prevToasts]);
+
+    setTimeout(() => {
+      removeToast(newToast.id);
+    }, 6000);
   };
-  setTimeout(() => {
-    setShowToster(false)
-    console.log("I am also running")
-  }, 6000);
+
+  const removeToast = (id) => {
+    setToasts((prevToasts) =>
+      prevToasts.map((toast) =>
+        toast.id === id ? { ...toast, visible: false } : toast
+      )
+    );
+    setTimeout(() => {
+      setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
+    }, 500);
+  };
+
   return (
     <div className="h-screen flex justify-center items-center flex-col gap-8">
-     {showToster && <div className="z-1000 absolute top-10 right-10"> <TosterBox setShowToster="fasle" /></div>}
+      {toasts.map((toast, index) => (
+        <div
+          key={toast.id}
+          className={`z-1000 absolute right-10 transition-all duration-500 ${
+            toast.visible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
+          }`}
+          style={{ top: `${10 + index * 60}px` }}
+        >
+          <TosterBox onClose={() => removeToast(toast.id)} />
+        </div>
+      ))}
       <button
-        className="cursor-pointer border-black border px-10 py-3 hover:bg-gray-100 "
+        className="cursor-pointer border-black border px-10 py-3 hover:bg-gray-100"
         onClick={handleClick}
       >
         Click To Show Toster
@@ -27,17 +50,15 @@ const Toster = () => {
 
 export default Toster;
 
-const TosterBox = (setShowToster) => {
-  console.log(setShowToster, "======")
-  const handleClose = () => {
-    setShowToster="false" 
-  }
+const TosterBox = ({ onClose }) => {
   return (
-    <div className=" items-center bg-red-400 ">
-     <div className="flex px-10 py-4 gap-10">
-     <h1 className="text-white ">This is a Toster Box after click </h1>
-     <h1 className="text-white" onClick={handleClose} >x</h1>
-     </div>
+    <div className="bg-red-400 rounded shadow-lg">
+      <div className="flex justify-between px-10 py-4 gap-10">
+        <h1 className="text-white">This is a Toster Box after click</h1>
+        <button className="text-white" onClick={onClose}>
+          x
+        </button>
+      </div>
     </div>
   );
 };

From b0e918c0a153555637104fe6a252089541dd6a76 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Tue, 27 Aug 2024 14:24:52 +0530
Subject: [PATCH 08/30] add progress bar in toaste message

---
 src/All Assessment/assessment21/Toster.jsx |  8 +++++---
 src/All Assessment/assessment21/styles.css | 12 ++++++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 src/All Assessment/assessment21/styles.css

diff --git a/src/All Assessment/assessment21/Toster.jsx b/src/All Assessment/assessment21/Toster.jsx
index 1ccc5d4..241d1e6 100644
--- a/src/All Assessment/assessment21/Toster.jsx	
+++ b/src/All Assessment/assessment21/Toster.jsx	
@@ -1,5 +1,6 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import GotoHome from "../../Components/GoToHome";
+import './styles.css'
 
 const Toster = () => {
   const [toasts, setToasts] = useState([]);
@@ -32,7 +33,7 @@ const Toster = () => {
           className={`z-1000 absolute right-10 transition-all duration-500 ${
             toast.visible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
           }`}
-          style={{ top: `${10 + index * 60}px` }}
+          style={{ top: `${10 + index * 60}px` }} // Adjust the position based on index
         >
           <TosterBox onClose={() => removeToast(toast.id)} />
         </div>
@@ -52,13 +53,14 @@ export default Toster;
 
 const TosterBox = ({ onClose }) => {
   return (
-    <div className="bg-red-400 rounded shadow-lg">
+    <div className="bg-red-400 rounded shadow-lg relative overflow-hidden">
       <div className="flex justify-between px-10 py-4 gap-10">
         <h1 className="text-white">This is a Toster Box after click</h1>
         <button className="text-white" onClick={onClose}>
           x
         </button>
       </div>
+      <div className="absolute bottom-0 left-0 h-1 bg-red-500 progress-bar"></div>
     </div>
   );
 };
diff --git a/src/All Assessment/assessment21/styles.css b/src/All Assessment/assessment21/styles.css
new file mode 100644
index 0000000..a7b5f46
--- /dev/null
+++ b/src/All Assessment/assessment21/styles.css	
@@ -0,0 +1,12 @@
+.progress-bar {
+    animation: progress 6s linear forwards;
+  }
+  
+  @keyframes progress {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0%;
+    }
+  }
\ No newline at end of file

From d6664c5b6a6dffd26a69f41609bffd2688853175 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Tue, 27 Aug 2024 20:35:27 +0530
Subject: [PATCH 09/30] remove comments

---
 src/All Assessment/assessment21/Toster.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/All Assessment/assessment21/Toster.jsx b/src/All Assessment/assessment21/Toster.jsx
index 241d1e6..f16326a 100644
--- a/src/All Assessment/assessment21/Toster.jsx	
+++ b/src/All Assessment/assessment21/Toster.jsx	
@@ -33,7 +33,7 @@ const Toster = () => {
           className={`z-1000 absolute right-10 transition-all duration-500 ${
             toast.visible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
           }`}
-          style={{ top: `${10 + index * 60}px` }} // Adjust the position based on index
+          style={{ top: `${10 + index * 60}px` }}
         >
           <TosterBox onClose={() => removeToast(toast.id)} />
         </div>

From ae70a4804a2e2387601def778973e95f103c9e77 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Tue, 27 Aug 2024 20:39:37 +0530
Subject: [PATCH 10/30] add My toaster

---
 src/All Assessment/assessment21/MyToaster.jsx | 58 +++++++++++++++++++
 src/App.jsx                                   |  6 +-
 src/Utils.js                                  |  4 ++
 3 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 src/All Assessment/assessment21/MyToaster.jsx

diff --git a/src/All Assessment/assessment21/MyToaster.jsx b/src/All Assessment/assessment21/MyToaster.jsx
new file mode 100644
index 0000000..16cb608
--- /dev/null
+++ b/src/All Assessment/assessment21/MyToaster.jsx	
@@ -0,0 +1,58 @@
+import React from "react";
+
+const MyToaster = () => {
+  const [toast, setToast] = React.useState([]);
+  console.log("toast:", toast);
+
+  const handleClick = () => {
+    const newToast = { id: Date.now() };
+    setToast(prev => [...prev, newToast]);
+    setTimeout(() => {
+      removeToast(newToast.id);
+    }, 6000);
+  };
+
+  const removeToast = id => {
+    setToast(prev => prev.filter(t => t.id !== id));
+  };
+
+  return (
+    <div className="App">
+      <div style={{ position: "fixed", top: "10px", right: "20px" }}>
+        {toast.map((t, index) =>
+          <div key={t.id} style={{ marginTop: `${index * 60}px` }}>
+            <Toast close={() => removeToast(t.id)} />
+          </div>
+        )}
+      </div>
+      <h1>Hello React.</h1>
+      <button onClick={handleClick}>Click Me To Show Toaster</button>
+    </div>
+  );
+};
+
+export default MyToaster;
+
+const Toast = ({ close }) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "20px",
+        backgroundColor: "white",
+        padding: "10px",
+        backgroundColor: "red"
+      }}
+    >
+      <h1>I am a sweet Toast</h1>
+      <button
+        style={{ fontSize: "3rem", backgroundColor: "transparent" }}
+        onClick={close}
+      >
+        x
+      </button>
+    </div>
+  );
+};
diff --git a/src/App.jsx b/src/App.jsx
index 6a67ec0..91b0038 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -35,7 +35,7 @@ import FollowingCurser from "./All Assessment/assessment19/FollowingCurser";
 
 import Debouncing from "./All Assessment/assessment19/Debouncing";
 import Toster from "./All Assessment/assessment21/Toster";
-
+import MyToaster from "./All Assessment/assessment21/MyToaster";
 
 ReactGA.initialize("G-R3DJ0V5QK6");
 
@@ -104,7 +104,9 @@ const App = () => {
         <Route path="/following-curser" element={<FollowingCurser />} />
         <Route path="/problems" element={<ProblemsPage />} />
         <Route path="/feedback" element={<Feedback />} />
-        <Route path="/debouncing" element={<Debouncing />} /><Route path="/toster" element={<Toster />} />
+        <Route path="/debouncing" element={<Debouncing />} />
+        <Route path="/toster" element={<Toster />} />
+        <Route path="/mytoster" element={<MyToaster />} />
         <Route
           path="/code"
           element={<Code code={exampleCode} language="javascript" />}
diff --git a/src/Utils.js b/src/Utils.js
index 78d4d31..ac94505 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -84,6 +84,10 @@ export const buttonDetails = [
   {
     name: "Toster",
     description: "Toster message trigger on event."
+  },
+  {
+    name: "MyToster",
+    description: "Toster message trigger on event jo ki maine khud banaya hai"
   }
 ];
 

From 255ae3d933fb68d414e2886b52eac901587d1e42 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Tue, 27 Aug 2024 20:42:19 +0530
Subject: [PATCH 11/30] fix My Toaster

---
 src/All Assessment/assessment21/MyToaster.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/All Assessment/assessment21/MyToaster.jsx b/src/All Assessment/assessment21/MyToaster.jsx
index 16cb608..34300ec 100644
--- a/src/All Assessment/assessment21/MyToaster.jsx	
+++ b/src/All Assessment/assessment21/MyToaster.jsx	
@@ -1,4 +1,5 @@
 import React from "react";
+import GoToHome from "../../Components/GoToHome"
 
 const MyToaster = () => {
   const [toast, setToast] = React.useState([]);
@@ -25,8 +26,9 @@ const MyToaster = () => {
           </div>
         )}
       </div>
-      <h1>Hello React.</h1>
-      <button onClick={handleClick}>Click Me To Show Toaster</button>
+      <GoToHome/>
+      <h1>Toaster By sameerkali</h1>
+      <button style={{backgroundColor: '#ccc'}} onClick={handleClick}>Click Me To Show Toaster</button>
     </div>
   );
 };

From 6b14851eda9f9e716deab991b6107f99f9ca2a5e Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Tue, 27 Aug 2024 21:00:56 +0530
Subject: [PATCH 12/30] add countdown

---
 src/All Assessment/assessment21/MyToaster.jsx | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/All Assessment/assessment21/MyToaster.jsx b/src/All Assessment/assessment21/MyToaster.jsx
index 34300ec..b92852b 100644
--- a/src/All Assessment/assessment21/MyToaster.jsx	
+++ b/src/All Assessment/assessment21/MyToaster.jsx	
@@ -1,5 +1,5 @@
 import React from "react";
-import GoToHome from "../../Components/GoToHome"
+import GoToHome from "../../Components/GoToHome";
 
 const MyToaster = () => {
   const [toast, setToast] = React.useState([]);
@@ -26,16 +26,34 @@ const MyToaster = () => {
           </div>
         )}
       </div>
-      <GoToHome/>
+      <GoToHome />
       <h1>Toaster By sameerkali</h1>
-      <button style={{backgroundColor: '#ccc'}} onClick={handleClick}>Click Me To Show Toaster</button>
+      <button style={{ backgroundColor: "#ccc" }} onClick={handleClick}>
+        Click Me To Show Toaster
+      </button>
     </div>
   );
 };
 
 export default MyToaster;
 
-const Toast = ({ close }) => {
+const Toast = ({ close, time = 6 }) => {
+  const [count, setCount] = React.useState(time);
+
+  React.useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCount((prev) => {
+        if (prev === 1) {
+          clearInterval(intervalId);
+          close();
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [close]);
+
   return (
     <div
       style={{
@@ -45,16 +63,15 @@ const Toast = ({ close }) => {
         gap: "20px",
         backgroundColor: "white",
         padding: "10px",
-        backgroundColor: "red"
+        backgroundColor: "red",
       }}
     >
       <h1>I am a sweet Toast</h1>
-      <button
-        style={{ fontSize: "3rem", backgroundColor: "transparent" }}
-        onClick={close}
-      >
+      <h1>{count}</h1>
+      <button style={{ fontSize: "3rem", backgroundColor: "transparent" }} onClick={close}>
         x
       </button>
     </div>
   );
 };
+

From 345f311f7c44069282307c7abe08c80b5030168d Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Tue, 27 Aug 2024 23:03:29 +0530
Subject: [PATCH 13/30] add new assignment: Todo app (CRUD)

---
 src/All Assessment/assessment22/Todo.jsx   |  9 +++++++++
 src/All Assessment/assessment22/readme.md  |  1 +
 src/All Assessment/assessment22/styles.css | 12 ++++++++++++
 src/App.jsx                                |  2 ++
 src/Utils.js                               |  4 ++++
 5 files changed, 28 insertions(+)
 create mode 100644 src/All Assessment/assessment22/Todo.jsx
 create mode 100644 src/All Assessment/assessment22/readme.md
 create mode 100644 src/All Assessment/assessment22/styles.css

diff --git a/src/All Assessment/assessment22/Todo.jsx b/src/All Assessment/assessment22/Todo.jsx
new file mode 100644
index 0000000..db5d368
--- /dev/null
+++ b/src/All Assessment/assessment22/Todo.jsx	
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Todo = () => {
+  return (
+    <div>Todo</div>
+  )
+}
+
+export default Todo
\ No newline at end of file
diff --git a/src/All Assessment/assessment22/readme.md b/src/All Assessment/assessment22/readme.md
new file mode 100644
index 0000000..93ba11c
--- /dev/null
+++ b/src/All Assessment/assessment22/readme.md	
@@ -0,0 +1 @@
+## Blink game
\ No newline at end of file
diff --git a/src/All Assessment/assessment22/styles.css b/src/All Assessment/assessment22/styles.css
new file mode 100644
index 0000000..a7b5f46
--- /dev/null
+++ b/src/All Assessment/assessment22/styles.css	
@@ -0,0 +1,12 @@
+.progress-bar {
+    animation: progress 6s linear forwards;
+  }
+  
+  @keyframes progress {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0%;
+    }
+  }
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 91b0038..25c9b42 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -36,6 +36,7 @@ import FollowingCurser from "./All Assessment/assessment19/FollowingCurser";
 import Debouncing from "./All Assessment/assessment19/Debouncing";
 import Toster from "./All Assessment/assessment21/Toster";
 import MyToaster from "./All Assessment/assessment21/MyToaster";
+import Todo from "./All Assessment/assessment22/Todo";
 
 ReactGA.initialize("G-R3DJ0V5QK6");
 
@@ -107,6 +108,7 @@ const App = () => {
         <Route path="/debouncing" element={<Debouncing />} />
         <Route path="/toster" element={<Toster />} />
         <Route path="/mytoster" element={<MyToaster />} />
+        <Route path="/todo" element={<Todo />} />
         <Route
           path="/code"
           element={<Code code={exampleCode} language="javascript" />}
diff --git a/src/Utils.js b/src/Utils.js
index ac94505..24d0a3e 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -88,6 +88,10 @@ export const buttonDetails = [
   {
     name: "MyToster",
     description: "Toster message trigger on event jo ki maine khud banaya hai"
+  },
+  {
+    name: "Todo",
+    description: "Basic todo app using local storage"
   }
 ];
 

From 87e1be97af94df99c9dd1aa547eb945551eac51d Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Tue, 27 Aug 2024 23:38:04 +0530
Subject: [PATCH 14/30] basic todo is compleate without local storage

---
 src/All Assessment/assessment22/Todo.jsx | 73 ++++++++++++++++++++++--
 1 file changed, 68 insertions(+), 5 deletions(-)

diff --git a/src/All Assessment/assessment22/Todo.jsx b/src/All Assessment/assessment22/Todo.jsx
index db5d368..ae3c5f1 100644
--- a/src/All Assessment/assessment22/Todo.jsx	
+++ b/src/All Assessment/assessment22/Todo.jsx	
@@ -1,9 +1,72 @@
-import React from 'react'
+import React, { useState } from "react";
 
 const Todo = () => {
+  const [todos, setTodos] = useState([]);
+  const [todo, setTodo] = useState("");
+
+  const addTodo = () => {
+    if (todo.trim() !== "") {
+      let newTodo = { id: Date.now(), content: todo };
+      setTodos((prev) => [...prev, newTodo]);
+      setTodo("");
+    }
+  };
+
+  const removeTodo = (id) => {
+    setTodos(todos.filter((todo) => todo.id !== id));
+  };
+
+  const updateTodo = (id, newText) => {
+    setTodos(
+      todos.map((todo) =>
+        todo.id === id ? { ...todo, content: newText } : todo
+      )
+    );
+  };
+
+  const handleChange = (e) => {
+    setTodo(e.target.value);
+  };
+
   return (
-    <div>Todo</div>
-  )
-}
+    <div className="flex flex-col h-screen items-center">
+      <h1 className="text-5xl font-bold font-sans mt-10">Todo Local Storage</h1>
+      <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-10">
+        <input
+          className="w-[25rem] px-3 py-1 border border-black rounded-sm"
+          type="text"
+          placeholder="learn todo"
+          value={todo}
+          onChange={handleChange}
+        />
+        <button
+          className="bg-red-700 px-10 py-2 text-white font-bold"
+          onClick={addTodo}
+        >
+          Add
+        </button>
+      </div>
+      <div className="mt-10">
+        {todos.map((todo) => (
+          <div key={todo.id} className="flex space-x-4">
+            <p>{todo.content}</p>
+            <button
+              className="bg-blue-500 px-4 py-1 text-white rounded"
+              onClick={() => updateTodo(todo.id, prompt("Update todo", todo.content))}
+            >
+              Update
+            </button>
+            <button
+              className="bg-red-500 px-4 py-1 text-white rounded"
+              onClick={() => removeTodo(todo.id)}
+            >
+              Remove
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
 
-export default Todo
\ No newline at end of file
+export default Todo;

From ffe604567eb9eb6b4de3bacb7b244d67e6e847d7 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Sun, 8 Sep 2024 22:31:02 +0530
Subject: [PATCH 15/30] basic todo is compleate without local

---
 src/All Assessment/assessment22/Todo.jsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/All Assessment/assessment22/Todo.jsx b/src/All Assessment/assessment22/Todo.jsx
index ae3c5f1..88a6f34 100644
--- a/src/All Assessment/assessment22/Todo.jsx	
+++ b/src/All Assessment/assessment22/Todo.jsx	
@@ -3,29 +3,25 @@ import React, { useState } from "react";
 const Todo = () => {
   const [todos, setTodos] = useState([]);
   const [todo, setTodo] = useState("");
+  console.log(todo)
 
   const addTodo = () => {
-    if (todo.trim() !== "") {
-      let newTodo = { id: Date.now(), content: todo };
-      setTodos((prev) => [...prev, newTodo]);
-      setTodo("");
+    if(todo.trim() !== ""){
+      let newTodo = {id: Date.now() , content: todo}
+      setTodos( prev => [...prev, newTodo ])
     }
   };
 
   const removeTodo = (id) => {
-    setTodos(todos.filter((todo) => todo.id !== id));
+    setTodos(todos.filter(t => t.id !== id))
   };
 
   const updateTodo = (id, newText) => {
-    setTodos(
-      todos.map((todo) =>
-        todo.id === id ? { ...todo, content: newText } : todo
-      )
-    );
+      setTodos(todos.map(t => ( t.id === id ? {...t, content: newText} : t)))
   };
 
   const handleChange = (e) => {
-    setTodo(e.target.value);
+    setTodo(e.target.value)
   };
 
   return (

From 695557ed3f9e47f51c288832ae567bdead37d90a Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Wed, 11 Sep 2024 21:51:38 +0530
Subject: [PATCH 16/30] fix: some things

---
 src/All Assessment/assessment01/StopWatch.jsx | 7 ++-----
 src/All Assessment/assessment21/MyToaster.jsx | 1 -
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/All Assessment/assessment01/StopWatch.jsx b/src/All Assessment/assessment01/StopWatch.jsx
index 21bdba9..45da1af 100644
--- a/src/All Assessment/assessment01/StopWatch.jsx	
+++ b/src/All Assessment/assessment01/StopWatch.jsx	
@@ -1,15 +1,12 @@
 import React, { useEffect, useState } from "react";
 import '../../index.css'
 import GoToHome from "../../Components/GoToHome";
-// import GoToHome from "../../Components/GoToHome";
 
 const StopWatch = () => {
   const [clicked, setClicked] = useState(false);
   const [time, setTime] = useState(0);
 
-  const handleclick = () => {
-    setClicked(!clicked);
-  };
+ 
 
   useEffect(() => {
     let interval;
@@ -29,7 +26,7 @@ const StopWatch = () => {
       <div className="text-6xl">{time}</div>
       <button
         className="custom-button"
-        onClick={handleclick}
+        onClick={() => setClicked(!clicked)}
       >
         {clicked ? 'Stop' : 'Start'}
       </button>
diff --git a/src/All Assessment/assessment21/MyToaster.jsx b/src/All Assessment/assessment21/MyToaster.jsx
index b92852b..fc41723 100644
--- a/src/All Assessment/assessment21/MyToaster.jsx	
+++ b/src/All Assessment/assessment21/MyToaster.jsx	
@@ -61,7 +61,6 @@ const Toast = ({ close, time = 6 }) => {
         justifyContent: "center",
         alignItems: "center",
         gap: "20px",
-        backgroundColor: "white",
         padding: "10px",
         backgroundColor: "red",
       }}

From 0d3344e096646407d7f9c73abc242e36b646ba05 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Mon, 23 Dec 2024 23:16:59 +0530
Subject: [PATCH 17/30] practice again for job

---
 src/All Assessment/assessment22/Todo.jsx | 141 +++++++++++++++--------
 1 file changed, 93 insertions(+), 48 deletions(-)

diff --git a/src/All Assessment/assessment22/Todo.jsx b/src/All Assessment/assessment22/Todo.jsx
index 88a6f34..6671a6c 100644
--- a/src/All Assessment/assessment22/Todo.jsx	
+++ b/src/All Assessment/assessment22/Todo.jsx	
@@ -1,66 +1,111 @@
+// import React, { useState } from "react";
+
+// const Todo = () => {
+//   const [todos, setTodos] = useState([]);
+//   const [todo, setTodo] = useState("");
+//   console.log(todo)
+
+//   const addTodo = () => {
+//     if(todo.trim() !== ""){
+//       let newTodo = {id: Date.now() , content: todo}
+//       setTodos( prev => [...prev, newTodo ])
+//     }
+//   };
+
+//   const removeTodo = (id) => {
+//     setTodos(todos.filter(t => t.id !== id))
+//   };
+
+//   const updateTodo = (id, newText) => {
+//       setTodos(todos.map(t => ( t.id === id ? {...t, content: newText} : t)))
+//   };
+
+//   const handleChange = (e) => {
+//     setTodo(e.target.value)
+//   };
+
+//   return (
+//     <div className="flex flex-col h-screen items-center">
+//       <h1 className="text-5xl font-bold font-sans mt-10">Todo Local Storage</h1>
+//       <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-10">
+//         <input
+//           className="w-[25rem] px-3 py-1 border border-black rounded-sm"
+//           type="text"
+//           placeholder="learn todo"
+//           value={todo}
+//           onChange={handleChange}
+//         />
+//         <button
+//           className="bg-red-700 px-10 py-2 text-white font-bold"
+//           onClick={addTodo}
+//         >
+//           Add
+//         </button>
+//       </div>
+//       <div className="mt-10">
+//         {todos.map((todo) => (
+//           <div key={todo.id} className="flex space-x-4">
+//             <p>{todo.content}</p>
+//             <button
+//               className="bg-blue-500 px-4 py-1 text-white rounded"
+//               onClick={() => updateTodo(todo.id, prompt("Update todo", todo.content))}
+//             >
+//               Update
+//             </button>
+//             <button
+//               className="bg-red-500 px-4 py-1 text-white rounded"
+//               onClick={() => removeTodo(todo.id)}
+//             >
+//               Remove
+//             </button>
+//           </div>
+//         ))}
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default Todo;
+
 import React, { useState } from "react";
 
 const Todo = () => {
-  const [todos, setTodos] = useState([]);
   const [todo, setTodo] = useState("");
-  console.log(todo)
+  const [todos, setTodos] = useState([]);
+  const [clicked, setClicked] = useState(false);
+  console.log(todos);
 
+  const handleChange = (e) => {
+    setTodo(e.target.value);
+  };
   const addTodo = () => {
-    if(todo.trim() !== ""){
-      let newTodo = {id: Date.now() , content: todo}
-      setTodos( prev => [...prev, newTodo ])
+    if (todo !== "") {
+      let newTodo = { id: Date.now(), content: todo };
+      setTodos((prev) => [...prev, newTodo]);
+      setTodo("");
     }
   };
-
   const removeTodo = (id) => {
     setTodos(todos.filter(t => t.id !== id))
   };
-
   const updateTodo = (id, newText) => {
-      setTodos(todos.map(t => ( t.id === id ? {...t, content: newText} : t)))
+    setTodos(todos.filter(t => t.id === id ? {...t, content: newText}: t))
   };
-
-  const handleChange = (e) => {
-    setTodo(e.target.value)
-  };
-
   return (
-    <div className="flex flex-col h-screen items-center">
-      <h1 className="text-5xl font-bold font-sans mt-10">Todo Local Storage</h1>
-      <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-10">
-        <input
-          className="w-[25rem] px-3 py-1 border border-black rounded-sm"
-          type="text"
-          placeholder="learn todo"
-          value={todo}
-          onChange={handleChange}
-        />
-        <button
-          className="bg-red-700 px-10 py-2 text-white font-bold"
-          onClick={addTodo}
-        >
-          Add
-        </button>
-      </div>
-      <div className="mt-10">
-        {todos.map((todo) => (
-          <div key={todo.id} className="flex space-x-4">
-            <p>{todo.content}</p>
-            <button
-              className="bg-blue-500 px-4 py-1 text-white rounded"
-              onClick={() => updateTodo(todo.id, prompt("Update todo", todo.content))}
-            >
-              Update
-            </button>
-            <button
-              className="bg-red-500 px-4 py-1 text-white rounded"
-              onClick={() => removeTodo(todo.id)}
-            >
-              Remove
-            </button>
-          </div>
+    <div>
+     
+      <input type="text" onChange={handleChange} value={todo} />
+      <button onClick={addTodo}>add me</button>
+
+      <ul>
+        {todos.map((t) => (
+          <div>
+            
+          <li key={t.id}>{t.content}<button onClick={()=>removeTodo(t.id)}>Remove</button> <button onClick={setClicked(t => !t)}>update</button></li>
+         {clicked && <input type="text" onChange={handleChange} placeholder="change here"/>}
+          </div> 
         ))}
-      </div>
+      </ul>
     </div>
   );
 };

From 129d3342549432c615a9e9be269ab1d861aa8297 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Fri, 27 Dec 2024 11:56:21 +0530
Subject: [PATCH 18/30] practice

---
 src/All Assessment/assessment22/Todo.jsx | 188 ++++++++++++-----------
 1 file changed, 95 insertions(+), 93 deletions(-)

diff --git a/src/All Assessment/assessment22/Todo.jsx b/src/All Assessment/assessment22/Todo.jsx
index 6671a6c..c7e967a 100644
--- a/src/All Assessment/assessment22/Todo.jsx	
+++ b/src/All Assessment/assessment22/Todo.jsx	
@@ -1,113 +1,115 @@
-// import React, { useState } from "react";
-
-// const Todo = () => {
-//   const [todos, setTodos] = useState([]);
-//   const [todo, setTodo] = useState("");
-//   console.log(todo)
-
-//   const addTodo = () => {
-//     if(todo.trim() !== ""){
-//       let newTodo = {id: Date.now() , content: todo}
-//       setTodos( prev => [...prev, newTodo ])
-//     }
-//   };
-
-//   const removeTodo = (id) => {
-//     setTodos(todos.filter(t => t.id !== id))
-//   };
-
-//   const updateTodo = (id, newText) => {
-//       setTodos(todos.map(t => ( t.id === id ? {...t, content: newText} : t)))
-//   };
-
-//   const handleChange = (e) => {
-//     setTodo(e.target.value)
-//   };
-
-//   return (
-//     <div className="flex flex-col h-screen items-center">
-//       <h1 className="text-5xl font-bold font-sans mt-10">Todo Local Storage</h1>
-//       <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-10">
-//         <input
-//           className="w-[25rem] px-3 py-1 border border-black rounded-sm"
-//           type="text"
-//           placeholder="learn todo"
-//           value={todo}
-//           onChange={handleChange}
-//         />
-//         <button
-//           className="bg-red-700 px-10 py-2 text-white font-bold"
-//           onClick={addTodo}
-//         >
-//           Add
-//         </button>
-//       </div>
-//       <div className="mt-10">
-//         {todos.map((todo) => (
-//           <div key={todo.id} className="flex space-x-4">
-//             <p>{todo.content}</p>
-//             <button
-//               className="bg-blue-500 px-4 py-1 text-white rounded"
-//               onClick={() => updateTodo(todo.id, prompt("Update todo", todo.content))}
-//             >
-//               Update
-//             </button>
-//             <button
-//               className="bg-red-500 px-4 py-1 text-white rounded"
-//               onClick={() => removeTodo(todo.id)}
-//             >
-//               Remove
-//             </button>
-//           </div>
-//         ))}
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default Todo;
-
 import React, { useState } from "react";
 
 const Todo = () => {
-  const [todo, setTodo] = useState("");
   const [todos, setTodos] = useState([]);
-  const [clicked, setClicked] = useState(false);
-  console.log(todos);
+  const [todo, setTodo] = useState("");
+  console.log(todo)
 
-  const handleChange = (e) => {
-    setTodo(e.target.value);
-  };
   const addTodo = () => {
-    if (todo !== "") {
-      let newTodo = { id: Date.now(), content: todo };
-      setTodos((prev) => [...prev, newTodo]);
-      setTodo("");
+    if(todo.trim() !== ""){
+      let newTodo = {id: Date.now() , content: todo}
+      setTodos( prev => [...prev, newTodo ])
     }
   };
+
   const removeTodo = (id) => {
     setTodos(todos.filter(t => t.id !== id))
   };
+
   const updateTodo = (id, newText) => {
-    setTodos(todos.filter(t => t.id === id ? {...t, content: newText}: t))
+      setTodos(todos.map(t => ( t.id === id ? {...t, content: newText} : t)))
   };
-  return (
-    <div>
-     
-      <input type="text" onChange={handleChange} value={todo} />
-      <button onClick={addTodo}>add me</button>
 
-      <ul>
-        {todos.map((t) => (
-          <div>
-            
-          <li key={t.id}>{t.content}<button onClick={()=>removeTodo(t.id)}>Remove</button> <button onClick={setClicked(t => !t)}>update</button></li>
-         {clicked && <input type="text" onChange={handleChange} placeholder="change here"/>}
-          </div> 
+  const handleChange = (e) => {
+    setTodo(e.target.value)
+  };
+
+  return (
+    <div className="flex flex-col h-screen items-center">
+      <h1 className="text-5xl font-bold font-sans mt-10">Todo Local Storage</h1>
+      <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-10">
+        <input
+          className="w-[25rem] px-3 py-1 border border-black rounded-sm"
+          type="text"
+          placeholder="learn todo"
+          value={todo}
+          onChange={handleChange}
+        />
+        <button
+          className="bg-red-700 px-10 py-2 text-white font-bold"
+          onClick={addTodo}
+        >
+          Add
+        </button>
+      </div>
+      <div className="mt-10">
+        {todos.map((todo) => (
+          <div key={todo.id} className="flex space-x-4">
+            <p>{todo.content}</p>
+            <button
+              className="bg-blue-500 px-4 py-1 text-white rounded"
+              onClick={() => updateTodo(todo.id, prompt("Update todo", todo.content))}
+            >
+              Update
+            </button>
+            <button
+              className="bg-red-500 px-4 py-1 text-white rounded"
+              onClick={() => removeTodo(todo.id)}
+            >
+              Remove
+            </button>
+          </div>
         ))}
-      </ul>
+      </div>
     </div>
   );
 };
 
 export default Todo;
+
+
+
+// import React, { useState } from "react";
+
+// const Todo = () => {
+//   const [todo, setTodo] = useState("");
+//   const [todos, setTodos] = useState([]);
+//   const [clicked, setClicked] = useState(false);
+//   console.log(todos);
+
+//   const handleChange = (e) => {
+//     setTodo(e.target.value);
+//   };
+//   const addTodo = () => {
+//     if (todo !== "") {
+//       let newTodo = { id: Date.now(), content: todo };
+//       setTodos((prev) => [...prev, newTodo]);
+//       setTodo("");
+//     }
+//   };
+//   const removeTodo = (id) => {
+//     setTodos(todos.filter(t => t.id !== id))
+//   };
+//   const updateTodo = (id, newText) => {
+//     setTodos(todos.filter(t => t.id === id ? {...t, content: newText}: t))
+//   };
+//   return (
+//     <div>
+     
+//       <input type="text" onChange={handleChange} value={todo} />
+//       <button onClick={addTodo}>add me</button>
+
+//       <ul>
+//         {todos.map((t) => (
+//           <div>
+            
+//           <li key={t.id}>{t.content}<button onClick={()=>removeTodo(t.id)}>Remove</button> <button onClick={setClicked(t => !t)}>update</button></li>
+//          {clicked && <input type="text" onChange={handleChange} placeholder="change here"/>}
+//           </div> 
+//         ))}
+//       </ul>
+//     </div>
+//   );
+// };
+
+// export default Todo;

From af5fce644308751ea311c3ba1718e129adca40bf Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Mon, 30 Dec 2024 19:30:56 +0530
Subject: [PATCH 19/30] asd

---
 Frontend Interview Preparation.txt | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/Frontend Interview Preparation.txt b/Frontend Interview Preparation.txt
index 0926557..284c337 100644
--- a/Frontend Interview Preparation.txt	
+++ b/Frontend Interview Preparation.txt	
@@ -121,7 +121,9 @@ I'd be happy to provide detailed answers on these HTML and web development topic
 
 Semantic HTML5 Elements
 
-Semantic HTML5 elements are tags that convey meaning about the structure and content of a web page to both browsers and developers. They improve accessibility, SEO, and code readability. Key semantic elements include:
+Semantic HTML5 elements are tags that convey meaning about the structure and content of a web page to
+ both browsers and developers. They improve accessibility, SEO, and code readability. Key semantic
+  elements include:
 
 <header>: Introductory content or navigational links
 <nav>: Navigation links
@@ -134,7 +136,8 @@ Semantic HTML5 elements are tags that convey meaning about the structure and con
 <time>: For dates and times
 <mark>: Highlighted text
 
-Using these elements properly helps search engines understand your content and assists screen readers in navigating the page structure.
+Using these elements properly helps search engines understand your content and assists screen 
+readers in navigating the page structure.
 
 HTML Forms and Validation
 

From 7510d5d9c6bff81e375408c5bdb2a85cd6358fd1 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Thu, 2 Jan 2025 19:53:07 +0530
Subject: [PATCH 20/30] StopWatch

---
 src/All Assessment/assessment01/StopWatch.jsx |  80 ++++----
 src/All Assessment/assessment22/Todo.jsx      | 189 +++++++++---------
 2 files changed, 140 insertions(+), 129 deletions(-)

diff --git a/src/All Assessment/assessment01/StopWatch.jsx b/src/All Assessment/assessment01/StopWatch.jsx
index 45da1af..c03f0e3 100644
--- a/src/All Assessment/assessment01/StopWatch.jsx	
+++ b/src/All Assessment/assessment01/StopWatch.jsx	
@@ -1,38 +1,50 @@
-import React, { useEffect, useState } from "react";
-import '../../index.css'
-import GoToHome from "../../Components/GoToHome";
+// import React, { useEffect, useState } from "react";
+// import '../../index.css'
+// import GoToHome from "../../Components/GoToHome";
 
-const StopWatch = () => {
-  const [clicked, setClicked] = useState(false);
-  const [time, setTime] = useState(0);
+// const StopWatch = () => {
+//   const [clicked, setClicked] = useState(false);
+//   const [time, setTime] = useState(0);
 
  
 
-  useEffect(() => {
-    let interval;
-    if (clicked) {
-      interval = setInterval(() => {
-        setTime(prevTime => prevTime + 1);
-      }, 500);
-    } else {
-      clearInterval(interval);
-    }
-
-    return () => clearInterval(interval);
-  }, [clicked]);
-
-  return (
-    <div className="flex flex-col items-center justify-center h-screen gap-10">
-      <div className="text-6xl">{time}</div>
-      <button
-        className="custom-button"
-        onClick={() => setClicked(!clicked)}
-      >
-        {clicked ? 'Stop' : 'Start'}
-      </button>
-      <GoToHome/>
-    </div>
-  );
-};
-
-export default StopWatch;
+//   useEffect(() => {
+//     let interval;
+//     if (clicked) {
+//       interval = setInterval(() => {
+//         setTime(prevTime => prevTime + 1);
+//       }, 500);
+//     } else {
+//       clearInterval(interval);
+//     }
+
+//     return () => clearInterval(interval);
+//   }, [clicked]);
+
+//   return (
+//     <div className="flex flex-col items-center justify-center h-screen gap-10">
+//       <div className="text-6xl">{time}</div>
+//       <button
+//         className="custom-button"
+//         onClick={() => setClicked(!clicked)}
+//       >
+//         {clicked ? 'Stop' : 'Start'}
+//       </button>
+//       <GoToHome/>
+//     </div>
+//   );
+// };
+
+// export default StopWatch;
+
+
+const StopWatch =()=> {
+return(
+  <div>
+    <div>{time}</div>
+    <button onClick={null}>click me</button>
+  </div>
+)
+}
+
+export default StopWatch;
\ No newline at end of file
diff --git a/src/All Assessment/assessment22/Todo.jsx b/src/All Assessment/assessment22/Todo.jsx
index c7e967a..236cca6 100644
--- a/src/All Assessment/assessment22/Todo.jsx	
+++ b/src/All Assessment/assessment22/Todo.jsx	
@@ -1,115 +1,114 @@
-import React, { useState } from "react";
-
-const Todo = () => {
-  const [todos, setTodos] = useState([]);
-  const [todo, setTodo] = useState("");
-  console.log(todo)
-
-  const addTodo = () => {
-    if(todo.trim() !== ""){
-      let newTodo = {id: Date.now() , content: todo}
-      setTodos( prev => [...prev, newTodo ])
-    }
-  };
-
-  const removeTodo = (id) => {
-    setTodos(todos.filter(t => t.id !== id))
-  };
-
-  const updateTodo = (id, newText) => {
-      setTodos(todos.map(t => ( t.id === id ? {...t, content: newText} : t)))
-  };
-
-  const handleChange = (e) => {
-    setTodo(e.target.value)
-  };
-
-  return (
-    <div className="flex flex-col h-screen items-center">
-      <h1 className="text-5xl font-bold font-sans mt-10">Todo Local Storage</h1>
-      <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-10">
-        <input
-          className="w-[25rem] px-3 py-1 border border-black rounded-sm"
-          type="text"
-          placeholder="learn todo"
-          value={todo}
-          onChange={handleChange}
-        />
-        <button
-          className="bg-red-700 px-10 py-2 text-white font-bold"
-          onClick={addTodo}
-        >
-          Add
-        </button>
-      </div>
-      <div className="mt-10">
-        {todos.map((todo) => (
-          <div key={todo.id} className="flex space-x-4">
-            <p>{todo.content}</p>
-            <button
-              className="bg-blue-500 px-4 py-1 text-white rounded"
-              onClick={() => updateTodo(todo.id, prompt("Update todo", todo.content))}
-            >
-              Update
-            </button>
-            <button
-              className="bg-red-500 px-4 py-1 text-white rounded"
-              onClick={() => removeTodo(todo.id)}
-            >
-              Remove
-            </button>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default Todo;
-
-
-
 // import React, { useState } from "react";
 
+import { useState } from "react";
+
 // const Todo = () => {
-//   const [todo, setTodo] = useState("");
 //   const [todos, setTodos] = useState([]);
-//   const [clicked, setClicked] = useState(false);
-//   console.log(todos);
+//   const [todo, setTodo] = useState("");
+//   console.log(todo)
 
-//   const handleChange = (e) => {
-//     setTodo(e.target.value);
-//   };
 //   const addTodo = () => {
-//     if (todo !== "") {
-//       let newTodo = { id: Date.now(), content: todo };
-//       setTodos((prev) => [...prev, newTodo]);
-//       setTodo("");
+//     if(todo.trim() !== ""){
+//       let newTodo = {id: Date.now() , content: todo}
+//       setTodos( prev => [...prev, newTodo ])
 //     }
 //   };
+
 //   const removeTodo = (id) => {
 //     setTodos(todos.filter(t => t.id !== id))
 //   };
+
 //   const updateTodo = (id, newText) => {
-//     setTodos(todos.filter(t => t.id === id ? {...t, content: newText}: t))
+//       setTodos(todos.map(t => ( t.id === id ? {...t, content: newText} : t)))
+//   };
+
+//   const handleChange = (e) => {
+//     setTodo(e.target.value)
 //   };
-//   return (
-//     <div>
-     
-//       <input type="text" onChange={handleChange} value={todo} />
-//       <button onClick={addTodo}>add me</button>
 
-//       <ul>
-//         {todos.map((t) => (
-//           <div>
-            
-//           <li key={t.id}>{t.content}<button onClick={()=>removeTodo(t.id)}>Remove</button> <button onClick={setClicked(t => !t)}>update</button></li>
-//          {clicked && <input type="text" onChange={handleChange} placeholder="change here"/>}
-//           </div> 
+//   return (
+//     <div className="flex flex-col h-screen items-center">
+//       <h1 className="text-5xl font-bold font-sans mt-10">Todo Local Storage</h1>
+//       <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-10">
+//         <input
+//           className="w-[25rem] px-3 py-1 border border-black rounded-sm"
+//           type="text"
+//           placeholder="learn todo"
+//           value={todo}
+//           onChange={handleChange}
+//         />
+//         <button
+//           className="bg-red-700 px-10 py-2 text-white font-bold"
+//           onClick={addTodo}
+//         >
+//           Add
+//         </button>
+//       </div>
+//       <div className="mt-10">
+//         {todos.map((todo) => (
+//           <div key={todo.id} className="flex space-x-4">
+//             <p>{todo.content}</p>
+//             <button
+//               className="bg-blue-500 px-4 py-1 text-white rounded"
+//               onClick={() => updateTodo(todo.id, prompt("Update todo", todo.content))}
+//             >
+//               Update
+//             </button>
+//             <button
+//               className="bg-red-500 px-4 py-1 text-white rounded"
+//               onClick={() => removeTodo(todo.id)}
+//             >
+//               Remove
+//             </button>
+//           </div>
 //         ))}
-//       </ul>
+//       </div>
 //     </div>
 //   );
 // };
 
 // export default Todo;
+
+const Todo = () => {
+  const [todos, setTodos] = useState([]);
+  const [todo, setTodo] = useState("");
+
+  console.log("todo:", todos);
+
+  const handleADD = () => {
+    if (todo.trim() !== "") {
+      let newtodo = { id: Date.now(), content: todo };
+      setTodos((prev) => [...prev, newtodo]);
+      setTodo("");
+    }
+  };
+
+  const handleRemove = (id) => {
+    // let rem = todos.filter((t) => (t.id === id))
+    // setTodos(prev => [...prev, rem])
+    console.log(id);
+  };
+
+  const handleUpdate = (id) => {};
+  
+  return (
+    <div>
+      <input
+        onChange={(e) => setTodo(e.target.value)}
+        placeholder="add todo"
+        type="text"
+        value={todo}
+      />
+      <button onClick={handleADD}> add todo</button>
+      <ul>
+        {todos.map((t) => (
+          <div>
+            <li key={t.id}>{t.content}</li>
+            <button onClick={handleRemove(t.id)}> remove</button>
+          </div>
+        ))}
+      </ul>
+    </div>
+  );
+};
+export default Todo;

From abecafe481929d1a8fcf0defb721274e4f65c154 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Sat, 4 Jan 2025 13:37:23 +0530
Subject: [PATCH 21/30] advanced counter

---
 src/All Assessment/assessment22/Todo.jsx      | 163 ++++++++----------
 src/All Assessment/assessment23/Counter_p.jsx |  50 ++++++
 src/All Assessment/assessment23/readme.md     |   1 +
 src/App.jsx                                   |   4 +
 src/Utils.js                                  |   4 +
 5 files changed, 127 insertions(+), 95 deletions(-)
 create mode 100644 src/All Assessment/assessment23/Counter_p.jsx
 create mode 100644 src/All Assessment/assessment23/readme.md

diff --git a/src/All Assessment/assessment22/Todo.jsx b/src/All Assessment/assessment22/Todo.jsx
index c7e967a..a3459a2 100644
--- a/src/All Assessment/assessment22/Todo.jsx	
+++ b/src/All Assessment/assessment22/Todo.jsx	
@@ -1,115 +1,88 @@
-import React, { useState } from "react";
-
-const Todo = () => {
-  const [todos, setTodos] = useState([]);
-  const [todo, setTodo] = useState("");
-  console.log(todo)
-
-  const addTodo = () => {
-    if(todo.trim() !== ""){
-      let newTodo = {id: Date.now() , content: todo}
-      setTodos( prev => [...prev, newTodo ])
-    }
-  };
-
-  const removeTodo = (id) => {
-    setTodos(todos.filter(t => t.id !== id))
-  };
-
-  const updateTodo = (id, newText) => {
-      setTodos(todos.map(t => ( t.id === id ? {...t, content: newText} : t)))
-  };
-
-  const handleChange = (e) => {
-    setTodo(e.target.value)
-  };
-
-  return (
-    <div className="flex flex-col h-screen items-center">
-      <h1 className="text-5xl font-bold font-sans mt-10">Todo Local Storage</h1>
-      <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-10">
-        <input
-          className="w-[25rem] px-3 py-1 border border-black rounded-sm"
-          type="text"
-          placeholder="learn todo"
-          value={todo}
-          onChange={handleChange}
-        />
-        <button
-          className="bg-red-700 px-10 py-2 text-white font-bold"
-          onClick={addTodo}
-        >
-          Add
-        </button>
-      </div>
-      <div className="mt-10">
-        {todos.map((todo) => (
-          <div key={todo.id} className="flex space-x-4">
-            <p>{todo.content}</p>
-            <button
-              className="bg-blue-500 px-4 py-1 text-white rounded"
-              onClick={() => updateTodo(todo.id, prompt("Update todo", todo.content))}
-            >
-              Update
-            </button>
-            <button
-              className="bg-red-500 px-4 py-1 text-white rounded"
-              onClick={() => removeTodo(todo.id)}
-            >
-              Remove
-            </button>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default Todo;
-
-
-
 // import React, { useState } from "react";
 
 // const Todo = () => {
-//   const [todo, setTodo] = useState("");
 //   const [todos, setTodos] = useState([]);
-//   const [clicked, setClicked] = useState(false);
-//   console.log(todos);
+//   const [todo, setTodo] = useState("");
+//   console.log(todo)
 
-//   const handleChange = (e) => {
-//     setTodo(e.target.value);
-//   };
 //   const addTodo = () => {
-//     if (todo !== "") {
-//       let newTodo = { id: Date.now(), content: todo };
-//       setTodos((prev) => [...prev, newTodo]);
-//       setTodo("");
+//     if(todo.trim() !== ""){
+//       let newTodo = {id: Date.now() , content: todo}
+//       setTodos( prev => [...prev, newTodo ])
 //     }
 //   };
+
 //   const removeTodo = (id) => {
 //     setTodos(todos.filter(t => t.id !== id))
 //   };
+
 //   const updateTodo = (id, newText) => {
-//     setTodos(todos.filter(t => t.id === id ? {...t, content: newText}: t))
+//       setTodos(todos.map(t => ( t.id === id ? {...t, content: newText} : t)))
+//   };
+
+//   const handleChange = (e) => {
+//     setTodo(e.target.value)
 //   };
-//   return (
-//     <div>
-     
-//       <input type="text" onChange={handleChange} value={todo} />
-//       <button onClick={addTodo}>add me</button>
 
-//       <ul>
-//         {todos.map((t) => (
-//           <div>
-            
-//           <li key={t.id}>{t.content}<button onClick={()=>removeTodo(t.id)}>Remove</button> <button onClick={setClicked(t => !t)}>update</button></li>
-//          {clicked && <input type="text" onChange={handleChange} placeholder="change here"/>}
-//           </div> 
+//   return (
+//     <div className="flex flex-col h-screen items-center">
+//       <h1 className="text-5xl font-bold font-sans mt-10">Todo Local Storage</h1>
+//       <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-10">
+//         <input
+//           className="w-[25rem] px-3 py-1 border border-black rounded-sm"
+//           type="text"
+//           placeholder="learn todo"
+//           value={todo}
+//           onChange={handleChange}
+//         />
+//         <button
+//           className="bg-red-700 px-10 py-2 text-white font-bold"
+//           onClick={addTodo}
+//         >
+//           Add
+//         </button>
+//       </div>
+//       <div className="mt-10">
+//         {todos.map((todo) => (
+//           <div key={todo.id} className="flex space-x-4">
+//             <p>{todo.content}</p>
+//             <button
+//               className="bg-blue-500 px-4 py-1 text-white rounded"
+//               onClick={() => updateTodo(todo.id, prompt("Update todo", todo.content))}
+//             >
+//               Update
+//             </button>
+//             <button
+//               className="bg-red-500 px-4 py-1 text-white rounded"
+//               onClick={() => removeTodo(todo.id)}
+//             >
+//               Remove
+//             </button>
+//           </div>
 //         ))}
-//       </ul>
+//       </div>
 //     </div>
 //   );
 // };
 
 // export default Todo;
+
+
+
+import React, { useState } from "react";
+
+
+const Todo = () => {
+  const [todo, setTodo] = useState('')
+
+  const handleChange = (e) => {
+setTodo(e.target.value)
+  }
+  return (
+    <div>
+      <input className='border-2 border-black ' placeholder=' eat apple' onChange={handleChange}/>
+    </div>
+  )
+}
+
+export default Todo
\ No newline at end of file
diff --git a/src/All Assessment/assessment23/Counter_p.jsx b/src/All Assessment/assessment23/Counter_p.jsx
new file mode 100644
index 0000000..51cfdf5
--- /dev/null
+++ b/src/All Assessment/assessment23/Counter_p.jsx	
@@ -0,0 +1,50 @@
+import { useState } from 'react';
+
+const Counter_p = () => {
+  const [count, setCount] = useState(10);
+  const [size, setSize] = useState(1);
+
+  const handleSizeChange = (e) => {
+    const newSize = parseInt(e.target.value, 10) || 1; // Ensure size is a number and defaults to 1
+    setSize(newSize);
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center h-screen bg-gray-100">
+      <div className="flex gap-4 items-center mb-5">
+        <button
+          className="px-4 py-2 bg-green-500 text-white rounded shadow hover:bg-green-600"
+          onClick={() => setCount((prev) => prev + size)}
+        >
+          +
+        </button>
+        <p className="text-xl font-bold">{count}</p>
+        <button
+          className="px-4 py-2 bg-red-500 text-white rounded shadow hover:bg-red-600"
+          onClick={() => setCount((prev) => (prev > 0 ? prev - size : 0))}
+        >
+          -
+        </button>
+      </div>
+
+      <button
+        className="mb-5 px-4 py-2 bg-blue-500 text-white rounded shadow hover:bg-blue-600"
+        onClick={() => setCount(0)}
+      >
+        RESET
+      </button>
+
+      <div className="flex gap-3 items-center">
+        <input
+          type="number"
+          placeholder="Step size"
+          className="px-3 py-2 border rounded shadow focus:outline-none focus:ring-2 focus:ring-blue-400"
+          onChange={handleSizeChange}
+        />
+        <p className="text-gray-700">Current step: {size}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Counter_p;
diff --git a/src/All Assessment/assessment23/readme.md b/src/All Assessment/assessment23/readme.md
new file mode 100644
index 0000000..93ba11c
--- /dev/null
+++ b/src/All Assessment/assessment23/readme.md	
@@ -0,0 +1 @@
+## Blink game
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 25c9b42..40b53f6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -37,6 +37,7 @@ import Debouncing from "./All Assessment/assessment19/Debouncing";
 import Toster from "./All Assessment/assessment21/Toster";
 import MyToaster from "./All Assessment/assessment21/MyToaster";
 import Todo from "./All Assessment/assessment22/Todo";
+import Counter_p from './All Assessment/assessment23/Counter_p'
 
 ReactGA.initialize("G-R3DJ0V5QK6");
 
@@ -109,6 +110,9 @@ const App = () => {
         <Route path="/toster" element={<Toster />} />
         <Route path="/mytoster" element={<MyToaster />} />
         <Route path="/todo" element={<Todo />} />
+        <Route path="/counter_p" element={<Counter_p />} />
+
+        
         <Route
           path="/code"
           element={<Code code={exampleCode} language="javascript" />}
diff --git a/src/Utils.js b/src/Utils.js
index 24d0a3e..6725dd6 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -92,6 +92,10 @@ export const buttonDetails = [
   {
     name: "Todo",
     description: "Basic todo app using local storage"
+  },
+  {
+    name: "Counter_p",
+    description: "Advanced Counter "
   }
 ];
 

From fcd3dad9a12e2d877be60502da3b543531ff4394 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Sat, 4 Jan 2025 14:03:03 +0530
Subject: [PATCH 22/30] todo

---
 src/All Assessment/assessment22/Todo.jsx | 79 +++++++++++-------------
 1 file changed, 36 insertions(+), 43 deletions(-)

diff --git a/src/All Assessment/assessment22/Todo.jsx b/src/All Assessment/assessment22/Todo.jsx
index e0869f0..dea1c69 100644
--- a/src/All Assessment/assessment22/Todo.jsx	
+++ b/src/All Assessment/assessment22/Todo.jsx	
@@ -1,6 +1,6 @@
 // import React, { useState } from "react";
 
-import { useState } from "react";
+// import { useState } from "react";
 
 // const Todo = () => {
 //   const [todos, setTodos] = useState([]);
@@ -69,66 +69,59 @@ import { useState } from "react";
 
 // export default Todo;
 
+import React, { useState } from "react";
+
 const Todo = () => {
-  const [todos, setTodos] = useState([]);
   const [todo, setTodo] = useState("");
+  const [todos, setTodos] = useState([]);
+  const [clickUpdate, setClickUpdate] = useState(false);
+  console.log("todos:", todos);
 
-  console.log("todo:", todos);
-
-  const handleADD = () => {
-    if (todo.trim() !== "") {
-      let newtodo = { id: Date.now(), content: todo };
-      setTodos((prev) => [...prev, newtodo]);
+  const AddTodo = () => {
+    if (todo !== "") {
+      let newTodo = { id: Date.now(), content: todo };
+      setTodos((prev) => [...prev, newTodo]);
       setTodo("");
     }
   };
-
-  const handleRemove = (id) => {
-    // let rem = todos.filter((t) => (t.id === id))
-    // setTodos(prev => [...prev, rem])
-    console.log(id);
+  const removeTodo = (id) => {
+    setTodos(todos.filter((t) => t.id != id));
+  };
+  const updateTodo = (id) => {
+    setClickUpdate(!clickUpdate);
   };
-
-  const handleUpdate = (id) => {};
-  
   return (
     <div>
       <input
-        onChange={(e) => setTodo(e.target.value)}
-        placeholder="add todo"
-        type="text"
         value={todo}
+        className="border-2 border-black "
+        placeholder=" eat apple"
+        onChange={(e) => {
+          setTodo(e.target.value);
+        }}
       />
-      <button onClick={handleADD}> add todo</button>
+      <button onClick={AddTodo}>add</button>
       <ul>
         {todos.map((t) => (
-          <div>
-            <li key={t.id}>{t.content}</li>
-            <button onClick={handleRemove(t.id)}> remove</button>
+          <div className="flex gap-10" key={t.id}>
+            {clickUpdate ? (
+              <li>{t.content}</li>
+            ) : (
+              <input
+                value={t.content}
+                className="border-2 border-black "
+                onChange={(e) => {
+                  setTodo(e.target.value);
+                }}
+              />
+            )}
+            <button onClick={() => removeTodo(t.id)}>Remove</button>
+            <button onClick={() => updateTodo(t.id)}>Update</button>
           </div>
         ))}
       </ul>
     </div>
   );
 };
-export default Todo;
-
-
 
-import React, { useState } from "react";
-
-
-const Todo = () => {
-  const [todo, setTodo] = useState('')
-
-  const handleChange = (e) => {
-setTodo(e.target.value)
-  }
-  return (
-    <div>
-      <input className='border-2 border-black ' placeholder=' eat apple' onChange={handleChange}/>
-    </div>
-  )
-}
-
-export default Todo
\ No newline at end of file
+export default Todo;

From 81b6616dcb007a14d5fadae1cee26c610c5fe3b5 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Sat, 4 Jan 2025 14:06:23 +0530
Subject: [PATCH 23/30] Form Validation

---
 src/All Assessment/assessment24/FormValidation.jsx | 9 +++++++++
 src/All Assessment/assessment24/readme.md          | 1 +
 src/App.jsx                                        | 3 +++
 src/Utils.js                                       | 4 ++++
 4 files changed, 17 insertions(+)
 create mode 100644 src/All Assessment/assessment24/FormValidation.jsx
 create mode 100644 src/All Assessment/assessment24/readme.md

diff --git a/src/All Assessment/assessment24/FormValidation.jsx b/src/All Assessment/assessment24/FormValidation.jsx
new file mode 100644
index 0000000..0911b8e
--- /dev/null
+++ b/src/All Assessment/assessment24/FormValidation.jsx	
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const FormValidation = () => {
+  return (
+    <div>FormValidation</div>
+  )
+}
+
+export default FormValidation
\ No newline at end of file
diff --git a/src/All Assessment/assessment24/readme.md b/src/All Assessment/assessment24/readme.md
new file mode 100644
index 0000000..93ba11c
--- /dev/null
+++ b/src/All Assessment/assessment24/readme.md	
@@ -0,0 +1 @@
+## Blink game
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 40b53f6..7184c7e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -38,6 +38,7 @@ import Toster from "./All Assessment/assessment21/Toster";
 import MyToaster from "./All Assessment/assessment21/MyToaster";
 import Todo from "./All Assessment/assessment22/Todo";
 import Counter_p from './All Assessment/assessment23/Counter_p'
+import FormValidation from "./All Assessment/assessment24/FormValidation";
 
 ReactGA.initialize("G-R3DJ0V5QK6");
 
@@ -111,6 +112,8 @@ const App = () => {
         <Route path="/mytoster" element={<MyToaster />} />
         <Route path="/todo" element={<Todo />} />
         <Route path="/counter_p" element={<Counter_p />} />
+        <Route path="/formValidation" element={<FormValidation />} />
+
 
         
         <Route
diff --git a/src/Utils.js b/src/Utils.js
index 6725dd6..c99e885 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -96,6 +96,10 @@ export const buttonDetails = [
   {
     name: "Counter_p",
     description: "Advanced Counter "
+  },
+  {
+    name: "FormValidation",
+    description: "Advanced Counter "
   }
 ];
 

From d1cd091e5dcd222228dc392189b6ef2691b85fc2 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Sat, 4 Jan 2025 14:13:49 +0530
Subject: [PATCH 24/30] FormValidation

---
 src/All Assessment/assessment24/FormValidation.jsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/All Assessment/assessment24/FormValidation.jsx b/src/All Assessment/assessment24/FormValidation.jsx
index 0911b8e..ee116f6 100644
--- a/src/All Assessment/assessment24/FormValidation.jsx	
+++ b/src/All Assessment/assessment24/FormValidation.jsx	
@@ -1,8 +1,19 @@
 import React from 'react'
 
 const FormValidation = () => {
+
+  const handleForm = () => {
+    alert("sameer")
+  }
   return (
-    <div>FormValidation</div>
+    <div className='h-screen flex justify-center items-center'>
+      <div className='flex flex-col gap-4 '>
+        <input type='text' placeholder='name' className='border-2 pl-2' />
+        <input  type='email' placeholder='abc@xyz.com' className='border-2 pl-2'/>
+        <input  type='password' className='border-2 pl-2' />
+        <button onClick={handleForm}>Submit</button>
+      </div>
+    </div>
   )
 }
 

From 68415f3a8e57d2236fb77af2a0dabb3347c5eebe Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Sat, 4 Jan 2025 16:09:21 +0530
Subject: [PATCH 25/30] Form Validation stat es

---
 .../assessment24/FormValidation.jsx               | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/All Assessment/assessment24/FormValidation.jsx b/src/All Assessment/assessment24/FormValidation.jsx
index ee116f6..c3f6b17 100644
--- a/src/All Assessment/assessment24/FormValidation.jsx	
+++ b/src/All Assessment/assessment24/FormValidation.jsx	
@@ -1,6 +1,19 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 const FormValidation = () => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleName = (e) => {
+    setName(e.target.value)
+  }
+  const handleEmail = (e) => {
+    setName(e.target.value)
+  }
+  const handlePassword = (e) => {
+    setName(e.target.value)
+  }
 
   const handleForm = () => {
     alert("sameer")

From a65d61f26051826fc96d46d61a62415ae812e0f6 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Sun, 5 Jan 2025 11:35:20 +0530
Subject: [PATCH 26/30] Form Validation

---
 .../assessment24/FormValidation.jsx           | 108 ++++++++++++++----
 1 file changed, 86 insertions(+), 22 deletions(-)

diff --git a/src/All Assessment/assessment24/FormValidation.jsx b/src/All Assessment/assessment24/FormValidation.jsx
index c3f6b17..dbae76e 100644
--- a/src/All Assessment/assessment24/FormValidation.jsx	
+++ b/src/All Assessment/assessment24/FormValidation.jsx	
@@ -1,33 +1,97 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 
 const FormValidation = () => {
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [errors, setErrors] = useState({});
 
-  const handleName = (e) => {
-    setName(e.target.value)
-  }
-  const handleEmail = (e) => {
-    setName(e.target.value)
-  }
-  const handlePassword = (e) => {
-    setName(e.target.value)
-  }
+  const validateForm = () => {
+    const newErrors = {};
+
+    if (!name.trim()) {
+      newErrors.name = 'Name is required.';
+    }
+    if (!email.trim()) {
+      newErrors.email = 'Email is required.';
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      newErrors.email = 'Invalid email format.';
+    }
+    if (!password.trim()) {
+      newErrors.password = 'Password is required.';
+    } else if (password.length < 6) {
+      newErrors.password = 'Password must be at least 6 characters.';
+    }
+
+    return newErrors;
+  };
+
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    const formErrors = validateForm();
+    if (Object.keys(formErrors).length > 0) {
+      setErrors(formErrors);
+    } else {
+      alert('Form submitted successfully!');
+      setErrors({});
+      // Reset fields after submission
+      setName('');
+      setEmail('');
+      setPassword('');
+    }
+  };
 
-  const handleForm = () => {
-    alert("sameer")
-  }
   return (
-    <div className='h-screen flex justify-center items-center'>
-      <div className='flex flex-col gap-4 '>
-        <input type='text' placeholder='name' className='border-2 pl-2' />
-        <input  type='email' placeholder='abc@xyz.com' className='border-2 pl-2'/>
-        <input  type='password' className='border-2 pl-2' />
-        <button onClick={handleForm}>Submit</button>
+    <div className="h-screen flex justify-center items-center bg-gray-100">
+      <div className="w-full max-w-sm bg-white p-6 rounded shadow-lg">
+        <h1 className="text-2xl font-bold text-center mb-4">Form Validation</h1>
+        <form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
+          <div>
+            <input
+              type="text"
+              placeholder="Name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="border-2 p-2 w-full rounded"
+            />
+            {errors.name && (
+              <p className="text-red-500 text-sm mt-1">{errors.name}</p>
+            )}
+          </div>
+          <div>
+            <input
+              type="email"
+              placeholder="abc@xyz.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="border-2 p-2 w-full rounded"
+            />
+            {errors.email && (
+              <p className="text-red-500 text-sm mt-1">{errors.email}</p>
+            )}
+          </div>
+          <div>
+            <input
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="border-2 p-2 w-full rounded"
+            />
+            {errors.password && (
+              <p className="text-red-500 text-sm mt-1">{errors.password}</p>
+            )}
+          </div>
+          <button
+            type="submit"
+            className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
+          >
+            Submit
+          </button>
+        </form>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default FormValidation
\ No newline at end of file
+export default FormValidation;

From 76d637b6f3f2981c599cf4599156b88f63a250ba Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Sun, 5 Jan 2025 12:20:25 +0530
Subject: [PATCH 27/30] InfiniteScroll

---
 src/All Assessment/assessment01/StopWatch.jsx | 80 +++++++---------
 .../assessment05/InfiniteScroll.jsx           | 92 ++++++++++++-------
 .../assessment24/FormValidation.jsx           | 30 +++---
 3 files changed, 111 insertions(+), 91 deletions(-)

diff --git a/src/All Assessment/assessment01/StopWatch.jsx b/src/All Assessment/assessment01/StopWatch.jsx
index c03f0e3..45da1af 100644
--- a/src/All Assessment/assessment01/StopWatch.jsx	
+++ b/src/All Assessment/assessment01/StopWatch.jsx	
@@ -1,50 +1,38 @@
-// import React, { useEffect, useState } from "react";
-// import '../../index.css'
-// import GoToHome from "../../Components/GoToHome";
+import React, { useEffect, useState } from "react";
+import '../../index.css'
+import GoToHome from "../../Components/GoToHome";
 
-// const StopWatch = () => {
-//   const [clicked, setClicked] = useState(false);
-//   const [time, setTime] = useState(0);
+const StopWatch = () => {
+  const [clicked, setClicked] = useState(false);
+  const [time, setTime] = useState(0);
 
  
 
-//   useEffect(() => {
-//     let interval;
-//     if (clicked) {
-//       interval = setInterval(() => {
-//         setTime(prevTime => prevTime + 1);
-//       }, 500);
-//     } else {
-//       clearInterval(interval);
-//     }
-
-//     return () => clearInterval(interval);
-//   }, [clicked]);
-
-//   return (
-//     <div className="flex flex-col items-center justify-center h-screen gap-10">
-//       <div className="text-6xl">{time}</div>
-//       <button
-//         className="custom-button"
-//         onClick={() => setClicked(!clicked)}
-//       >
-//         {clicked ? 'Stop' : 'Start'}
-//       </button>
-//       <GoToHome/>
-//     </div>
-//   );
-// };
-
-// export default StopWatch;
-
-
-const StopWatch =()=> {
-return(
-  <div>
-    <div>{time}</div>
-    <button onClick={null}>click me</button>
-  </div>
-)
-}
-
-export default StopWatch;
\ No newline at end of file
+  useEffect(() => {
+    let interval;
+    if (clicked) {
+      interval = setInterval(() => {
+        setTime(prevTime => prevTime + 1);
+      }, 500);
+    } else {
+      clearInterval(interval);
+    }
+
+    return () => clearInterval(interval);
+  }, [clicked]);
+
+  return (
+    <div className="flex flex-col items-center justify-center h-screen gap-10">
+      <div className="text-6xl">{time}</div>
+      <button
+        className="custom-button"
+        onClick={() => setClicked(!clicked)}
+      >
+        {clicked ? 'Stop' : 'Start'}
+      </button>
+      <GoToHome/>
+    </div>
+  );
+};
+
+export default StopWatch;
diff --git a/src/All Assessment/assessment05/InfiniteScroll.jsx b/src/All Assessment/assessment05/InfiniteScroll.jsx
index d277ff0..dd0dfd6 100644
--- a/src/All Assessment/assessment05/InfiniteScroll.jsx	
+++ b/src/All Assessment/assessment05/InfiniteScroll.jsx	
@@ -1,41 +1,71 @@
-import React, { useState, useEffect } from "react";
-import GoToHome from "../../Components/GoToHome";
+// import React, { useState, useEffect } from "react";
+// import GoToHome from "../../Components/GoToHome";
+
+import { useEffect, useState } from "react";
+
+// const InfiniteScroll = () => {
+//   const [count, setCount] = useState(50);
+
+//   useEffect(() => {
+//       const onScroll = () => {
+//         if (
+//           window.innerHeight + window.scrollY >=
+//           window.document.body.offsetHeight - 30
+//         ) {
+//           setCount(count + 50);
+//         }
+//       };
+
+//       window.addEventListener("scroll", onScroll);
+//       return () => window.removeEventListener("scroll", onScroll);
+
+//     },
+//     [count]);
+
+//   const elements = [];
+//   for (let i = 0; i < count; i++) {
+//     elements.push(
+//       <div key={i}>
+//         {i + 1}
+//       </div>
+//     );
+//   }
+//   return (
+//     <main className="flex flex-col items-center w-full">
+//     <h1 className="text-4xl">Infinite Scroll</h1>
+//     <GoToHome/>
+//       {elements}
+//     </main>
+//   );
+// };
 
 const InfiniteScroll = () => {
-  const [count, setCount] = useState(50);
 
+  const [count, setCount] = useState(50);
   useEffect(() => {
-      const onScroll = () => {
-        if (
-          window.innerHeight + window.scrollY >=
-          window.document.body.offsetHeight - 30
-        ) {
-          setCount(count + 50);
-        }
-      };
-
-      window.addEventListener("scroll", onScroll);
-      return () => window.removeEventListener("scroll", onScroll);
-
-    },
-    [count]);
-
-  const elements = [];
-  for (let i = 0; i < count; i++) {
-    elements.push(
-      <div key={i}>
-        {i + 1}
-      </div>
-    );
+const onscroll = () => {
+  if(window.innerHeight + window.scrollY >= window.document.body.offsetHeight){
+ 
+    setCount(prev => prev + 50);
+  }
+}
+let event = window.addEventListener("scroll", onscroll);
+return () => window.removeEventListener("scroll", event);
+  }, [count]);
+
+  let elements = []
+  for(let i=0; i<count; i++){
+elements.push(
+  <p key={i}>{i+1}</p>
+)
   }
+
   return (
-    <main className="flex flex-col items-center w-full">
-    <h1 className="text-4xl">Infinite Scroll</h1>
-    <GoToHome/>
-      {elements}
-    </main>
+    <div>
+      <h1>Infinite Scroll</h1>
+      <div>{elements}</div>
+    </div>
   );
 };
 
 export default InfiniteScroll;
-
diff --git a/src/All Assessment/assessment24/FormValidation.jsx b/src/All Assessment/assessment24/FormValidation.jsx
index dbae76e..330b7bf 100644
--- a/src/All Assessment/assessment24/FormValidation.jsx	
+++ b/src/All Assessment/assessment24/FormValidation.jsx	
@@ -1,26 +1,27 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
+import GoToHome from "../../Components/GoToHome";
 
 const FormValidation = () => {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
   const [errors, setErrors] = useState({});
 
   const validateForm = () => {
     const newErrors = {};
 
     if (!name.trim()) {
-      newErrors.name = 'Name is required.';
+      newErrors.name = "Name is required.";
     }
     if (!email.trim()) {
-      newErrors.email = 'Email is required.';
+      newErrors.email = "Email is required.";
     } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      newErrors.email = 'Invalid email format.';
+      newErrors.email = "Invalid email format.";
     }
     if (!password.trim()) {
-      newErrors.password = 'Password is required.';
+      newErrors.password = "Password is required.";
     } else if (password.length < 6) {
-      newErrors.password = 'Password must be at least 6 characters.';
+      newErrors.password = "Password must be at least 6 characters.";
     }
 
     return newErrors;
@@ -32,17 +33,18 @@ const FormValidation = () => {
     if (Object.keys(formErrors).length > 0) {
       setErrors(formErrors);
     } else {
-      alert('Form submitted successfully!');
+      alert("Form submitted successfully!");
       setErrors({});
       // Reset fields after submission
-      setName('');
-      setEmail('');
-      setPassword('');
+      setName("");
+      setEmail("");
+      setPassword("");
     }
   };
 
   return (
     <div className="h-screen flex justify-center items-center bg-gray-100">
+    
       <div className="w-full max-w-sm bg-white p-6 rounded shadow-lg">
         <h1 className="text-2xl font-bold text-center mb-4">Form Validation</h1>
         <form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
@@ -88,10 +90,10 @@ const FormValidation = () => {
           >
             Submit
           </button>
+          <GoToHome />
         </form>
       </div>
     </div>
   );
 };
-
 export default FormValidation;

From a628ce867ecb261baad3669d329bba497aff69ce Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Tue, 7 Jan 2025 17:27:47 +0530
Subject: [PATCH 28/30] StopWatch

---
 src/All Assessment/assessment01/StopWatch.jsx | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/All Assessment/assessment01/StopWatch.jsx b/src/All Assessment/assessment01/StopWatch.jsx
index 45da1af..0447c81 100644
--- a/src/All Assessment/assessment01/StopWatch.jsx	
+++ b/src/All Assessment/assessment01/StopWatch.jsx	
@@ -1,18 +1,16 @@
 import React, { useEffect, useState } from "react";
-import '../../index.css'
+import "../../index.css";
 import GoToHome from "../../Components/GoToHome";
 
 const StopWatch = () => {
   const [clicked, setClicked] = useState(false);
   const [time, setTime] = useState(0);
 
- 
-
   useEffect(() => {
     let interval;
     if (clicked) {
       interval = setInterval(() => {
-        setTime(prevTime => prevTime + 1);
+        setTime((prevTime) => prevTime + 1);
       }, 500);
     } else {
       clearInterval(interval);
@@ -24,13 +22,10 @@ const StopWatch = () => {
   return (
     <div className="flex flex-col items-center justify-center h-screen gap-10">
       <div className="text-6xl">{time}</div>
-      <button
-        className="custom-button"
-        onClick={() => setClicked(!clicked)}
-      >
-        {clicked ? 'Stop' : 'Start'}
+      <button className="custom-button" onClick={() => setClicked(!clicked)}>
+        {clicked ? "Stop" : "Start"}
       </button>
-      <GoToHome/>
+      <GoToHome />
     </div>
   );
 };

From c61221f39cd3163d94358221d52c2fde2e0da140 Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Wed, 22 Jan 2025 17:29:45 +0530
Subject: [PATCH 29/30] test something on local server

---
 .../assessment24/FormValidation.jsx           | 208 ++++++++++--------
 1 file changed, 116 insertions(+), 92 deletions(-)

diff --git a/src/All Assessment/assessment24/FormValidation.jsx b/src/All Assessment/assessment24/FormValidation.jsx
index 330b7bf..5a64dec 100644
--- a/src/All Assessment/assessment24/FormValidation.jsx	
+++ b/src/All Assessment/assessment24/FormValidation.jsx	
@@ -1,99 +1,123 @@
-import React, { useState } from "react";
-import GoToHome from "../../Components/GoToHome";
+// import React, { useState } from "react";
+// import GoToHome from "../../Components/GoToHome";
 
-const FormValidation = () => {
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [errors, setErrors] = useState({});
+// const FormValidation = () => {
+//   const [name, setName] = useState("");
+//   const [email, setEmail] = useState("");
+//   const [password, setPassword] = useState("");
+//   const [errors, setErrors] = useState({});
 
-  const validateForm = () => {
-    const newErrors = {};
+//   const validateForm = () => {
+//     const newErrors = {};
 
-    if (!name.trim()) {
-      newErrors.name = "Name is required.";
-    }
-    if (!email.trim()) {
-      newErrors.email = "Email is required.";
-    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      newErrors.email = "Invalid email format.";
-    }
-    if (!password.trim()) {
-      newErrors.password = "Password is required.";
-    } else if (password.length < 6) {
-      newErrors.password = "Password must be at least 6 characters.";
-    }
+//     if (!name.trim()) {
+//       newErrors.name = "Name is required.";
+//     }
+//     if (!email.trim()) {
+//       newErrors.email = "Email is required.";
+//     } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+//       newErrors.email = "Invalid email format.";
+//     }
+//     if (!password.trim()) {
+//       newErrors.password = "Password is required.";
+//     } else if (password.length < 6) {
+//       newErrors.password = "Password must be at least 6 characters.";
+//     }
 
-    return newErrors;
-  };
+//     return newErrors;
+//   };
 
-  const handleFormSubmit = (e) => {
-    e.preventDefault();
-    const formErrors = validateForm();
-    if (Object.keys(formErrors).length > 0) {
-      setErrors(formErrors);
-    } else {
-      alert("Form submitted successfully!");
-      setErrors({});
-      // Reset fields after submission
-      setName("");
-      setEmail("");
-      setPassword("");
-    }
-  };
+//   const handleFormSubmit = (e) => {
+//     e.preventDefault();
+//     const formErrors = validateForm();
+//     if (Object.keys(formErrors).length > 0) {
+//       setErrors(formErrors);
+//     } else {
+//       alert("Form submitted successfully!");
+//       setErrors({});
+//       // Reset fields after submission
+//       setName("");
+//       setEmail("");
+//       setPassword("");
+//     }
+//   };
 
-  return (
-    <div className="h-screen flex justify-center items-center bg-gray-100">
+//   return (
+//     <div className="h-screen flex justify-center items-center bg-gray-100">
     
-      <div className="w-full max-w-sm bg-white p-6 rounded shadow-lg">
-        <h1 className="text-2xl font-bold text-center mb-4">Form Validation</h1>
-        <form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
-          <div>
-            <input
-              type="text"
-              placeholder="Name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="border-2 p-2 w-full rounded"
-            />
-            {errors.name && (
-              <p className="text-red-500 text-sm mt-1">{errors.name}</p>
-            )}
-          </div>
-          <div>
-            <input
-              type="email"
-              placeholder="abc@xyz.com"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="border-2 p-2 w-full rounded"
-            />
-            {errors.email && (
-              <p className="text-red-500 text-sm mt-1">{errors.email}</p>
-            )}
-          </div>
-          <div>
-            <input
-              type="password"
-              placeholder="Password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="border-2 p-2 w-full rounded"
-            />
-            {errors.password && (
-              <p className="text-red-500 text-sm mt-1">{errors.password}</p>
-            )}
-          </div>
-          <button
-            type="submit"
-            className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
-          >
-            Submit
-          </button>
-          <GoToHome />
-        </form>
-      </div>
-    </div>
-  );
-};
-export default FormValidation;
+//       <div className="w-full max-w-sm bg-white p-6 rounded shadow-lg">
+//         <h1 className="text-2xl font-bold text-center mb-4">Form Validation</h1>
+//         <form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
+//           <div>
+//             <input
+//               type="text"
+//               placeholder="Name"
+//               value={name}
+//               onChange={(e) => setName(e.target.value)}
+//               className="border-2 p-2 w-full rounded"
+//             />
+//             {errors.name && (
+//               <p className="text-red-500 text-sm mt-1">{errors.name}</p>
+//             )}
+//           </div>
+//           <div>
+//             <input
+//               type="email"
+//               placeholder="abc@xyz.com"
+//               value={email}
+//               onChange={(e) => setEmail(e.target.value)}
+//               className="border-2 p-2 w-full rounded"
+//             />
+//             {errors.email && (
+//               <p className="text-red-500 text-sm mt-1">{errors.email}</p>
+//             )}
+//           </div>
+//           <div>
+//             <input
+//               type="password"
+//               placeholder="Password"
+//               value={password}
+//               onChange={(e) => setPassword(e.target.value)}
+//               className="border-2 p-2 w-full rounded"
+//             />
+//             {errors.password && (
+//               <p className="text-red-500 text-sm mt-1">{errors.password}</p>
+//             )}
+//           </div>
+//           <button
+//             type="submit"
+//             className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
+//           >
+//             Submit
+//           </button>
+//           <GoToHome />
+//         </form>
+//       </div>
+//     </div>
+//   );
+// };
+// export default FormValidation;
+
+
+import React, { useEffect, useState } from 'react'
+
+const FormValidation = () => {
+  const [data, setData] =  useState([])
+  console.log(data)
+
+  const call = async()=> {
+    let a = await fetch("http://localhost:6969/")
+    let b = await a.json()
+    console.log(a)
+    setData(b)
+  }
+  useEffect(() => {
+  call()
+  }, []);
+
+  return (
+    <div className='flex h-screen items-center justify-center'>{`sam`}</div>
+  )
+}
+
+export default FormValidation
\ No newline at end of file

From c47f5067e0b0b4a8ec91c2d72ec52d15aede86cb Mon Sep 17 00:00:00 2001
From: sameerkali <s.faridi007@gmail.com>
Date: Wed, 22 Jan 2025 17:30:01 +0530
Subject: [PATCH 30/30] testing over on local server

---
 .../assessment24/FormValidation.jsx           | 208 ++++++++----------
 1 file changed, 92 insertions(+), 116 deletions(-)

diff --git a/src/All Assessment/assessment24/FormValidation.jsx b/src/All Assessment/assessment24/FormValidation.jsx
index 5a64dec..330b7bf 100644
--- a/src/All Assessment/assessment24/FormValidation.jsx	
+++ b/src/All Assessment/assessment24/FormValidation.jsx	
@@ -1,123 +1,99 @@
-// import React, { useState } from "react";
-// import GoToHome from "../../Components/GoToHome";
+import React, { useState } from "react";
+import GoToHome from "../../Components/GoToHome";
 
-// const FormValidation = () => {
-//   const [name, setName] = useState("");
-//   const [email, setEmail] = useState("");
-//   const [password, setPassword] = useState("");
-//   const [errors, setErrors] = useState({});
-
-//   const validateForm = () => {
-//     const newErrors = {};
-
-//     if (!name.trim()) {
-//       newErrors.name = "Name is required.";
-//     }
-//     if (!email.trim()) {
-//       newErrors.email = "Email is required.";
-//     } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-//       newErrors.email = "Invalid email format.";
-//     }
-//     if (!password.trim()) {
-//       newErrors.password = "Password is required.";
-//     } else if (password.length < 6) {
-//       newErrors.password = "Password must be at least 6 characters.";
-//     }
-
-//     return newErrors;
-//   };
-
-//   const handleFormSubmit = (e) => {
-//     e.preventDefault();
-//     const formErrors = validateForm();
-//     if (Object.keys(formErrors).length > 0) {
-//       setErrors(formErrors);
-//     } else {
-//       alert("Form submitted successfully!");
-//       setErrors({});
-//       // Reset fields after submission
-//       setName("");
-//       setEmail("");
-//       setPassword("");
-//     }
-//   };
-
-//   return (
-//     <div className="h-screen flex justify-center items-center bg-gray-100">
-    
-//       <div className="w-full max-w-sm bg-white p-6 rounded shadow-lg">
-//         <h1 className="text-2xl font-bold text-center mb-4">Form Validation</h1>
-//         <form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
-//           <div>
-//             <input
-//               type="text"
-//               placeholder="Name"
-//               value={name}
-//               onChange={(e) => setName(e.target.value)}
-//               className="border-2 p-2 w-full rounded"
-//             />
-//             {errors.name && (
-//               <p className="text-red-500 text-sm mt-1">{errors.name}</p>
-//             )}
-//           </div>
-//           <div>
-//             <input
-//               type="email"
-//               placeholder="abc@xyz.com"
-//               value={email}
-//               onChange={(e) => setEmail(e.target.value)}
-//               className="border-2 p-2 w-full rounded"
-//             />
-//             {errors.email && (
-//               <p className="text-red-500 text-sm mt-1">{errors.email}</p>
-//             )}
-//           </div>
-//           <div>
-//             <input
-//               type="password"
-//               placeholder="Password"
-//               value={password}
-//               onChange={(e) => setPassword(e.target.value)}
-//               className="border-2 p-2 w-full rounded"
-//             />
-//             {errors.password && (
-//               <p className="text-red-500 text-sm mt-1">{errors.password}</p>
-//             )}
-//           </div>
-//           <button
-//             type="submit"
-//             className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
-//           >
-//             Submit
-//           </button>
-//           <GoToHome />
-//         </form>
-//       </div>
-//     </div>
-//   );
-// };
-// export default FormValidation;
+const FormValidation = () => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [errors, setErrors] = useState({});
 
+  const validateForm = () => {
+    const newErrors = {};
 
-import React, { useEffect, useState } from 'react'
+    if (!name.trim()) {
+      newErrors.name = "Name is required.";
+    }
+    if (!email.trim()) {
+      newErrors.email = "Email is required.";
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      newErrors.email = "Invalid email format.";
+    }
+    if (!password.trim()) {
+      newErrors.password = "Password is required.";
+    } else if (password.length < 6) {
+      newErrors.password = "Password must be at least 6 characters.";
+    }
 
-const FormValidation = () => {
-  const [data, setData] =  useState([])
-  console.log(data)
+    return newErrors;
+  };
 
-  const call = async()=> {
-    let a = await fetch("http://localhost:6969/")
-    let b = await a.json()
-    console.log(a)
-    setData(b)
-  }
-  useEffect(() => {
-  call()
-  }, []);
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    const formErrors = validateForm();
+    if (Object.keys(formErrors).length > 0) {
+      setErrors(formErrors);
+    } else {
+      alert("Form submitted successfully!");
+      setErrors({});
+      // Reset fields after submission
+      setName("");
+      setEmail("");
+      setPassword("");
+    }
+  };
 
   return (
-    <div className='flex h-screen items-center justify-center'>{`sam`}</div>
-  )
-}
-
-export default FormValidation
\ No newline at end of file
+    <div className="h-screen flex justify-center items-center bg-gray-100">
+    
+      <div className="w-full max-w-sm bg-white p-6 rounded shadow-lg">
+        <h1 className="text-2xl font-bold text-center mb-4">Form Validation</h1>
+        <form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
+          <div>
+            <input
+              type="text"
+              placeholder="Name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="border-2 p-2 w-full rounded"
+            />
+            {errors.name && (
+              <p className="text-red-500 text-sm mt-1">{errors.name}</p>
+            )}
+          </div>
+          <div>
+            <input
+              type="email"
+              placeholder="abc@xyz.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="border-2 p-2 w-full rounded"
+            />
+            {errors.email && (
+              <p className="text-red-500 text-sm mt-1">{errors.email}</p>
+            )}
+          </div>
+          <div>
+            <input
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="border-2 p-2 w-full rounded"
+            />
+            {errors.password && (
+              <p className="text-red-500 text-sm mt-1">{errors.password}</p>
+            )}
+          </div>
+          <button
+            type="submit"
+            className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
+          >
+            Submit
+          </button>
+          <GoToHome />
+        </form>
+      </div>
+    </div>
+  );
+};
+export default FormValidation;