added timers - setTimeout assignments

Author: amezng

04-react-portfolio/docs/04-timers.md

@@ -0,0 +1,99 @@
+# JavaScript Timers: Managing Time-Based Operations ⏰
+
+JavaScript provides several timer functions to execute code after a delay or at regular intervals. These are essential for animations, polling, and managing time-sensitive operations.
+
+## Types of Timers
+
+### 1. setTimeout() - Execute Once After Delay
+
+Executes a function once after a specified delay.
+
+```typescript
+// Basic setTimeout
+setTimeout(() => {
+  console.log("Executed after 2 seconds");
+}, 2000);
+
+// With parameters
+function greet(name: string, greeting: string) {
+  console.log(`${greeting}, ${name}!`);
+}
+
+setTimeout(greet, 1000, "John", "Hello");
+```
+
+## Practice Assignments: setTimeout in React/Next.js 🎯
+
+### Assignment 1: Auto-Dismiss Notification
+
+Create a notification component that automatically dismisses after a specified duration.
+
+```typescript
+interface NotificationProps {
+  message: string;
+  duration?: number;
+  onDismiss: () => void;
+}
+
+// TODO: Create a Notification component that:
+// - Shows a message
+// - Automatically dismisses after duration (default 3000ms)
+// - Allows manual dismissal
+// - Cleans up timer on unmount
+```
+
+### Assignment 2: Delayed Search Input
+
+Implement a search input that delays API calls until user stops typing.
+
+```typescript
+interface SearchInputProps {
+  onSearch: (query: string) => Promise<void>;
+  delay?: number;
+}
+
+// TODO: Create a SearchInput component that:
+// - Accepts user input
+// - Waits for user to stop typing (default 500ms)
+// - Then triggers search
+// - Cancels previous timeout if user types again
+```
+
+### Assignment 3: Countdown Button
+
+Implement a button that shows countdown before enabling action.
+
+```typescript
+interface CountdownButtonProps {
+  onComplete: () => void;
+  duration?: number;
+  text: string;
+}
+
+// TODO: Create a CountdownButton that:
+// - Shows countdown in seconds
+// - Disables interaction during countdown
+// - Executes action after countdown
+// - Resets on unmount
+```
+
+### Assignment 4: Timed Quiz Question
+
+Create a quiz question component with time limit.
+
+```typescript
+interface QuizQuestionProps {
+  question: string;
+  options: string[];
+  timeLimit: number;
+  onTimeout: () => void;
+  onAnswer: (answer: string) => void;
+}
+
+// TODO: Create a QuizQuestion component that:
+// - Displays question and options
+// - Shows remaining time
+// - Auto-submits on timeout
+// - Cancels timer if answered early
+// - Cleans up on unmount
+```

04-react-portfolio/learn-react/src/components/timers/01-notification.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface NotificationProps {
+  message: string;
+  duration?: number;
+  onDismiss: () => void;
+}
+
+const Notification: React.FC<NotificationProps> = ({
+  message,
+  duration = 3000, // Default duration: 3000ms
+  onDismiss,
+}) => {
+  return (
+    <div className='notification'>
+      <div className='notification-content'></div>
+    </div>
+  );
+};
+
+export default Notification;

04-react-portfolio/learn-react/src/components/timers/02-search-input.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+
+interface SearchInputProps {
+  onSearch: (query: string) => Promise<void>;
+  delay?: number;
+}
+
+const SearchInput: React.FC<SearchInputProps> = ({
+  onSearch,
+  delay = 500, // Default delay of 500ms
+}) => {
+  const [query, setQuery] = useState("");
+
+  // TODO: Implement delayed search functionality
+  // - Handle input changes
+  // - Set up delay timer
+  // - Cancel previous timer
+  // - Trigger search after delay
+  // - Clean up on unmount
+
+  return (
+    <div className='search-input'>
+      <input type='text' value={query} onChange={(e) => setQuery(e.target.value)} placeholder='Search...' aria-label='Search input' />
+    </div>
+  );
+};
+
+export default SearchInput;

04-react-portfolio/learn-react/src/components/timers/03-countdown.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface CountdownButtonProps {
+  onComplete: () => void;
+  duration?: number;
+  text: string;
+}
+
+const CountdownButton: React.FC<CountdownButtonProps> = ({
+  onComplete,
+  duration = 5, // Default 5 seconds countdown
+  text,
+}) => {
+  // TODO: Implement countdown functionality
+  // - Set up countdown timer
+  // - Update countdown display
+  // - Handle button disable state
+  // - Execute onComplete callback
+  // - Clean up on unmount
+
+  return (
+    <button
+      className='countdown-button'
+      disabled={false} // TODO: Implement disable logic
+      onClick={onComplete}>
+      {text}
+    </button>
+  );
+};
+
+export default CountdownButton;

04-react-portfolio/learn-react/src/components/timers/04-quiz.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+interface QuizQuestionProps {
+  question: string;
+  options: string[];
+  timeLimit: number;
+  onTimeout: () => void;
+  onAnswer: (answer: string) => void;
+}
+
+const QuizQuestion: React.FC<QuizQuestionProps> = ({ question, options, timeLimit, onTimeout, onAnswer }) => {
+  // TODO: Implement quiz functionality
+  // - Set up countdown timer
+  // - Handle option selection
+  // - Show remaining time
+  // - Handle timeout
+  // - Clean up timer on unmount
+
+  return (
+    <div className='quiz-question'>
+      <h3>{question}</h3>
+      <div className='time-remaining'>Time remaining: {timeLimit} seconds</div>
+      <div className='options'>
+        {options.map((option, index) => (
+          <button key={index} onClick={() => onAnswer(option)} className='option-button'>
+            {option}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default QuizQuestion;