akarshanxyz 1.0.0

package/a1/array

@@ -0,0 +1,3 @@
+function getStringLengths(arr: string[]): number[] {
+  return arr.map(str => str.length);
+}

package/a1/functions

@@ -0,0 +1,5 @@
+type AllowedNumbers = 1 | 2 | 3 | 4 | 5;
+
+function acceptNumber(n: AllowedNumbers): void {
+  console.log(n);
+}

package/a1/interfaceDatabase

@@ -0,0 +1,19 @@
+interface Database {
+  connect(): void;
+  disconnect(): void;
+  query(sql: string): any;
+}
+
+class MyDatabase implements Database {
+  connect(): void {
+    console.log("Connected");
+  }
+
+  disconnect(): void {
+    console.log("Disconnected");
+  }
+
+  query(sql: string): any {
+    return `Executing: ${sql}`;
+  }
+}

package/a1/interfaceObject

@@ -0,0 +1,18 @@
+interface Product {
+  id: number;
+  name: string;
+  price: number;
+  inStock: boolean;
+}
+
+function getInStockProducts(products: Product[]): Product[] {
+  return products.filter(p => p.inStock);
+}
+
+const products: Product[] = [
+  { id: 1, name: "Laptop", price: 1000, inStock: true },
+  { id: 2, name: "Phone", price: 500, inStock: false },
+  { id: 3, name: "Tablet", price: 300, inStock: true }
+];
+
+console.log(getInStockProducts(products));

package/a2/TypeSpeedApp

@@ -0,0 +1,32 @@
+const input = document.createElement("input");
+const timerDisplay = document.createElement("div");
+const wpmDisplay = document.createElement("div");
+const startButton = document.createElement("button");
+
+input.type = "text";
+input.placeholder = "Start typing...";
+timerDisplay.textContent = "Time: 0";
+wpmDisplay.textContent = "WPM: 0";
+startButton.textContent = "Start";
+
+let startTime = 0;
+let timer: number;
+
+startButton.addEventListener("click", () => {
+  input.value = "";
+  startTime = Date.now();
+
+  clearInterval(timer);
+  timer = setInterval(() => {
+    const elapsed = Math.floor((Date.now() - startTime) / 1000);
+    timerDisplay.textContent = `Time: ${elapsed}`;
+
+    const words = input.value.trim().split(/\s+/).filter(Boolean).length;
+    const minutes = elapsed / 60;
+    const wpm = minutes > 0 ? Math.round(words / minutes) : 0;
+
+    wpmDisplay.textContent = `WPM: ${wpm}`;
+  }, 1000);
+});
+
+document.body.append(input, startButton, timerDisplay, wpmDisplay);

package/a2/showHidePass

@@ -0,0 +1,18 @@
+const passwordInput = document.createElement("input");
+passwordInput.type = "password";
+
+const toggleButton = document.createElement("button");
+toggleButton.textContent = "Show";
+
+toggleButton.addEventListener("click", () => {
+  if (passwordInput.type === "password") {
+    passwordInput.type = "text";
+    toggleButton.textContent = "Hide";
+  } else {
+    passwordInput.type = "password";
+    toggleButton.textContent = "Show";
+  }
+});
+
+document.body.appendChild(passwordInput);
+document.body.appendChild(toggleButton);

package/a2/ticTacToe

@@ -0,0 +1,77 @@
+const board = document.createElement("div");
+const result = document.createElement("div");
+const resetBtn = document.createElement("button");
+
+board.style.display = "grid";
+board.style.gridTemplateColumns = "repeat(3, 100px)";
+board.style.gap = "5px";
+
+resetBtn.textContent = "Reset";
+result.textContent = "Current Player: X";
+
+let currentPlayer: "X" | "O" = "X";
+let cells: HTMLButtonElement[] = [];
+
+const winPatterns = [
+  [0,1,2],[3,4,5],[6,7,8],
+  [0,3,6],[1,4,7],[2,5,8],
+  [0,4,8],[2,4,6]
+];
+
+function checkWinner(): string | null {
+  for (const [a,b,c] of winPatterns) {
+    if (
+      cells[a].textContent &&
+      cells[a].textContent === cells[b].textContent &&
+      cells[a].textContent === cells[c].textContent
+    ) {
+      return cells[a].textContent;
+    }
+  }
+  return null;
+}
+
+function handleClick(e: MouseEvent) {
+  const btn = e.target as HTMLButtonElement;
+  if (btn.textContent) return;
+
+  btn.textContent = currentPlayer;
+  const winner = checkWinner();
+
+  if (winner) {
+    result.textContent = `Winner: ${winner}`;
+    cells.forEach(c => c.disabled = true);
+    return;
+  }
+
+  if (cells.every(c => c.textContent)) {
+    result.textContent = "Draw";
+    return;
+  }
+
+  currentPlayer = currentPlayer === "X" ? "O" : "X";
+  result.textContent = `Current Player: ${currentPlayer}`;
+}
+
+function createBoard() {
+  board.innerHTML = "";
+  cells = [];
+
+  for (let i = 0; i < 9; i++) {
+    const btn = document.createElement("button");
+    btn.style.height = "100px";
+    btn.style.fontSize = "24px";
+    btn.addEventListener("click", handleClick);
+    cells.push(btn);
+    board.appendChild(btn);
+  }
+}
+
+resetBtn.addEventListener("click", () => {
+  currentPlayer = "X";
+  result.textContent = "Current Player: X";
+  createBoard();
+});
+
+createBoard();
+document.body.append(board, result, resetBtn);

package/a3/FoodRating

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+
+interface FoodItem {
+  id: number;
+  name: string;
+  rating: number;
+}
+
+type Filter = "all" | "high" | "low" | "unrated";
+
+const App: React.FC = () => {
+  const [foods, setFoods] = useState<FoodItem[]>([
+    { id: 1, name: "Pizza", rating: 0 },
+    { id: 2, name: "Burger", rating: 0 },
+    { id: 3, name: "Taco", rating: 0 },
+    { id: 4, name: "Salad", rating: 0 }
+  ]);
+
+  const [filter, setFilter] = useState<Filter>("all");
+
+  const updateRating = (id: number, rating: number) => {
+    setFoods(prev =>
+      prev.map(f => (f.id === id ? { ...f, rating } : f))
+    );
+  };
+
+  const filteredFoods = foods.filter(f => {
+    if (filter === "high") return f.rating >= 4;
+    if (filter === "low") return f.rating < 3;
+    if (filter === "unrated") return f.rating === 0;
+    return true;
+  });
+
+  const ratings = foods.map(f => f.rating);
+  const hasRatings = ratings.some(r => r > 0);
+
+  const avg =
+    ratings.reduce((a, b) => a + b, 0) / foods.length || 0;
+
+  const highest = foods.reduce((a, b) =>
+    a.rating >= b.rating ? a : b
+  );
+
+  const lowest = foods.reduce((a, b) =>
+    a.rating <= b.rating ? a : b
+  );
+
+  const highCount = foods.filter(f => f.rating >= 4).length;
+
+  const resetRatings = () => {
+    setFoods(prev => prev.map(f => ({ ...f, rating: 0 })));
+  };
+
+  return (
+    <div style={{ padding: 20 }}>
+      <h2>Food Rating App</h2>
+
+      <div>
+        <button onClick={() => setFilter("all")}>Show All</button>
+        <button onClick={() => setFilter("high")}>
+          High Rated (4+)
+        </button>
+        <button onClick={() => setFilter("low")}>
+          Low Rated (&lt; 3)
+        </button>
+        <button onClick={() => setFilter("unrated")}>
+          Unrated (0)
+        </button>
+      </div>
+
+      <div>
+        {filteredFoods.map(food => (
+          <div key={food.id} style={{ margin: "10px 0" }}>
+            <span>
+              {food.name} - {food.rating}
+            </span>
+            <div>
+              {[1, 2, 3, 4, 5].map(star => (
+                <button
+                  key={star}
+                  onClick={() => updateRating(food.id, star)}
+                >
+                  {star}
+                </button>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <h3>Statistics</h3>
+      {!hasRatings ? (
+        <p>No ratings available</p>
+      ) : (
+        <div>
+          <p>Average Rating: {avg.toFixed(2)}</p>
+          <p>Highest Rated: {highest.name}</p>
+          <p>Lowest Rated: {lowest.name}</p>
+          <p>Foods with rating >= 4: {highCount}</p>
+        </div>
+      )}
+
+      <button onClick={resetRatings}>Reset All Ratings</button>
+    </div>
+  );
+};
+
+export default App;

package/a3/ShopApp

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+
+interface Product {
+  id: number;
+  name: string;
+}
+
+interface ProductItemProps {
+  product: Product;
+  onDelete: (id: number) => void;
+  onAddToCart: (product: Product) => void;
+}
+
+const ProductItem: React.FC<ProductItemProps> = ({
+  product,
+  onDelete,
+  onAddToCart
+}) => {
+  const handleView = () => {
+    alert(product.name);
+  };
+
+  return (
+    <div style={{ margin: "10px 0" }}>
+      <span>{product.name}</span>
+      <button onClick={handleView}>View</button>
+      <button onClick={() => onDelete(product.id)}>Delete</button>
+      <button onClick={() => onAddToCart(product)}>Add to Cart</button>
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const [products, setProducts] = useState<Product[]>([
+    { id: 1, name: "Phone" },
+    { id: 2, name: "Laptop" },
+    { id: 3, name: "Headphones" }
+  ]);
+
+  const [cart, setCart] = useState<Product[]>([]);
+
+  const handleDelete = (id: number) => {
+    setProducts(prev => prev.filter(p => p.id !== id));
+  };
+
+  const handleAddToCart = (product: Product) => {
+    setCart(prev => [...prev, product]);
+  };
+
+  return (
+    <div style={{ padding: 20 }}>
+      <h2>Products</h2>
+
+      {products.map(product => (
+        <ProductItem
+          key={product.id}
+          product={product}
+          onDelete={handleDelete}
+          onAddToCart={handleAddToCart}
+        />
+      ))}
+
+      <h2>Cart</h2>
+      {cart.length === 0 ? (
+        <p>No items in cart</p>
+      ) : (
+        cart.map(item => <div key={item.id}>{item.name}</div>)
+      )}
+    </div>
+  );
+};
+
+export default App;

package/a4/contextApi

@@ -0,0 +1,59 @@
+import React, { createContext, useContext, useState } from "react";
+
+interface CounterContextType {
+  count: number;
+  step: number;
+  increment: () => void;
+  decrement: () => void;
+  reset: () => void;
+  setStep: (value: number) => void;
+}
+
+const CounterContext = createContext<CounterContextType | null>(null);
+
+const Controls: React.FC = () => {
+  const ctx = useContext(CounterContext)!;
+
+  return (
+    <div>
+      <button onClick={ctx.increment}>Increment</button>
+      <button onClick={ctx.decrement}>Decrement</button>
+      <button onClick={ctx.reset}>Reset</button>
+      <div>
+        <button onClick={() => ctx.setStep(1)}>Step +1</button>
+        <button onClick={() => ctx.setStep(5)}>Step +5</button>
+      </div>
+    </div>
+  );
+};
+
+const Display: React.FC = () => {
+  const ctx = useContext(CounterContext)!;
+
+  return (
+    <div>
+      <h2>Count: {ctx.count}</h2>
+      <h3>Current Step: {ctx.step}</h3>
+      <Controls />
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const [count, setCount] = useState(0);
+  const [step, setStep] = useState(1);
+
+  const increment = () => setCount(c => c + step);
+  const decrement = () => setCount(c => c - step);
+  const reset = () => setCount(0);
+
+  return (
+    <CounterContext.Provider
+      value={{ count, step, increment, decrement, reset, setStep }}
+    >
+      <Display />
+    </CounterContext.Provider>
+  );
+};
+
+export default App;

package/a4/reactRouter

@@ -0,0 +1,81 @@
+import React from "react";
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+  NavLink,
+  useNavigate
+} from "react-router-dom";
+
+const Navbar: React.FC = () => {
+  const activeStyle = ({ isActive }: { isActive: boolean }) => ({
+    marginRight: "10px",
+    fontWeight: isActive ? "bold" : "normal",
+    color: isActive ? "red" : "black"
+  });
+
+  return (
+    <nav>
+      <NavLink to="/" style={activeStyle}>Home</NavLink>
+      <NavLink to="/about" style={activeStyle}>About</NavLink>
+      <NavLink to="/contact" style={activeStyle}>Contact</NavLink>
+    </nav>
+  );
+};
+
+const Home: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div>
+      <h2>Home</h2>
+      <button onClick={() => navigate("/contact")}>
+        Go to Contact
+      </button>
+    </div>
+  );
+};
+
+const About: React.FC = () => {
+  return <h2>About</h2>;
+};
+
+const Contact: React.FC = () => {
+  const navigate = useNavigate();
+  const [name, setName] = React.useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    alert("Form Submitted");
+    navigate("/");
+  };
+
+  return (
+    <div>
+      <h2>Contact</h2>
+      <form onSubmit={handleSubmit}>
+        <input
+          value={name}
+          onChange={e => setName(e.target.value)}
+          placeholder="Enter name"
+        />
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  return (
+    <BrowserRouter>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/contact" element={<Contact />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default App;

package/a4/useReducer

@@ -0,0 +1,129 @@
+import React, { useReducer, useState } from "react";
+
+interface Student {
+  id: number;
+  name: string;
+  score: number;
+}
+
+interface State {
+  students: Student[];
+}
+
+type Action =
+  | { type: "ADD_STUDENT"; payload: string }
+  | { type: "INCREMENT_SCORE"; payload: number }
+  | { type: "DECREMENT_SCORE"; payload: number }
+  | { type: "RESET_SCORE"; payload: number };
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_STUDENT":
+      if (!action.payload.trim()) return state;
+      return {
+        students: [
+          ...state.students,
+          {
+            id: Date.now(),
+            name: action.payload,
+            score: 0
+          }
+        ]
+      };
+
+    case "INCREMENT_SCORE":
+      return {
+        students: state.students.map(s =>
+          s.id === action.payload ? { ...s, score: s.score + 1 } : s
+        )
+      };
+
+    case "DECREMENT_SCORE":
+      return {
+        students: state.students.map(s =>
+          s.id === action.payload ? { ...s, score: s.score - 1 } : s
+        )
+      };
+
+    case "RESET_SCORE":
+      return {
+        students: state.students.map(s =>
+          s.id === action.payload ? { ...s, score: 0 } : s
+        )
+      };
+
+    default:
+      return state;
+  }
+};
+
+const App: React.FC = () => {
+  const [state, dispatch] = useReducer(reducer, { students: [] });
+  const [name, setName] = useState("");
+
+  const topStudent =
+    state.students.length > 0
+      ? state.students.reduce((a, b) => (a.score >= b.score ? a : b))
+      : null;
+
+  return (
+    <div style={{ padding: 20 }}>
+      <h2>Student Scores</h2>
+
+      <input
+        value={name}
+        onChange={e => setName(e.target.value)}
+        placeholder="Enter student name"
+      />
+      <button
+        onClick={() => {
+          dispatch({ type: "ADD_STUDENT", payload: name });
+          setName("");
+        }}
+      >
+        Add Student
+      </button>
+
+      <div>
+        {state.students.map(student => (
+          <div key={student.id} style={{ margin: "10px 0" }}>
+            <span>
+              {student.name} - {student.score}
+            </span>
+            <div>
+              <button
+                onClick={() =>
+                  dispatch({ type: "INCREMENT_SCORE", payload: student.id })
+                }
+              >
+                Increase
+              </button>
+              <button
+                onClick={() =>
+                  dispatch({ type: "DECREMENT_SCORE", payload: student.id })
+                }
+              >
+                Decrease
+              </button>
+              <button
+                onClick={() =>
+                  dispatch({ type: "RESET_SCORE", payload: student.id })
+                }
+              >
+                Reset
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <h3>
+        {topStudent
+          ? `Top Student: ${topStudent.name}`
+          : "No students available"}
+      </h3>
+    </div>
+  );
+};
+
+export default App;

package/a5/E-commerce

@@ -0,0 +1,148 @@
+interface Product<T = string> {
+  id: T;
+  name: string;
+  basePrice: number;
+  category: string;
+  getDiscountedPrice(discount: number): number;
+}
+
+interface PaymentMethod {
+  processPayment(amount: number): Promise<boolean>;
+  validatePayment(): boolean;
+  getTransactionId(): string;
+}
+
+class BaseProduct implements Product<string> {
+  constructor(
+    public id: string,
+    public name: string,
+    public basePrice: number,
+    public category: string
+  ) {}
+
+  getDiscountedPrice(discount: number): number {
+    return this.basePrice - (this.basePrice * discount) / 100;
+  }
+}
+
+class ElectronicsProduct extends BaseProduct {
+  getDiscountedPrice(discount: number): number {
+    const maxDiscount = Math.min(discount, 20);
+    const extra = this.basePrice > 1000 ? 5 : 0;
+    const finalDiscount = maxDiscount + extra;
+    return this.basePrice - (this.basePrice * finalDiscount) / 100;
+  }
+}
+
+class ClothingProduct extends BaseProduct {
+  getDiscountedPrice(discount: number): number {
+    const maxDiscount = Math.min(discount, 30);
+    const extra = this.category === "premium" ? 10 : 0;
+    const finalDiscount = maxDiscount + extra;
+    return this.basePrice - (this.basePrice * finalDiscount) / 100;
+  }
+}
+
+class Inventory<T extends { id: string }> {
+  private items: T[] = [];
+
+  addItem(item: T): void {
+    this.items.push(item);
+  }
+
+  removeItem(id: string): boolean {
+    const index = this.items.findIndex(i => i.id === id);
+    if (index !== -1) {
+      this.items.splice(index, 1);
+      return true;
+    }
+    return false;
+  }
+
+  findById(id: string): T | undefined {
+    return this.items.find(i => i.id === id);
+  }
+
+  getAllItems(): T[] {
+    return this.items;
+  }
+}
+
+class CreditCardPayment implements PaymentMethod {
+  private transactionId: string = "";
+
+  validatePayment(): boolean {
+    return true;
+  }
+
+  async processPayment(amount: number): Promise<boolean> {
+    if (!this.validatePayment()) return false;
+    this.transactionId = "CC-" + Date.now();
+    return true;
+  }
+
+  getTransactionId(): string {
+    return this.transactionId;
+  }
+}
+
+class PayPalPayment implements PaymentMethod {
+  private transactionId: string = "";
+
+  validatePayment(): boolean {
+    return true;
+  }
+
+  async processPayment(amount: number): Promise<boolean> {
+    if (!this.validatePayment()) return false;
+    this.transactionId = "PP-" + Date.now();
+    return true;
+  }
+
+  getTransactionId(): string {
+    return this.transactionId;
+  }
+}
+
+class Order {
+  private items: { product: Product; quantity: number }[] = [];
+
+  constructor(private payment: PaymentMethod) {}
+
+  addProduct(product: Product, quantity: number): void {
+    this.items.push({ product, quantity });
+  }
+
+  calculateSubtotal(): number {
+    return this.items.reduce(
+      (sum, item) =>
+        sum + item.product.getDiscountedPrice(10) * item.quantity,
+      0
+    );
+  }
+
+  async checkout(): Promise<{ success: boolean; transactionId: string }> {
+    const total = this.calculateSubtotal();
+    const success = await this.payment.processPayment(total);
+
+    return {
+      success,
+      transactionId: success ? this.payment.getTransactionId() : ""
+    };
+  }
+}
+
+const p1 = new ElectronicsProduct("1", "Laptop", 1200, "electronics");
+const p2 = new ClothingProduct("2", "Jacket", 200, "premium");
+
+const inventory = new Inventory<BaseProduct>();
+inventory.addItem(p1);
+inventory.addItem(p2);
+
+const payment = new CreditCardPayment();
+const order = new Order(payment);
+
+order.addProduct(p1, 1);
+order.addProduct(p2, 2);
+
+order.checkout().then(res => console.log(res));

package/a5/onlineFoodOrder

@@ -0,0 +1,68 @@
+class Order {
+  public customerName: string;
+  private orderId: string;
+  private amount: number;
+  private isDelivered: boolean;
+
+  constructor(customerName: string, orderId: string, amount: number) {
+    this.customerName = customerName;
+    this.orderId = orderId;
+    this.amount = amount;
+    this.isDelivered = false;
+  }
+
+  getOrderId(): string {
+    return this.orderId;
+  }
+
+  getAmount(): number {
+    return this.amount;
+  }
+
+  getDeliveryStatus(): boolean {
+    return this.isDelivered;
+  }
+
+  addAmount(value: number): void;
+  addAmount(value: number, note: string): void;
+  addAmount(value: number, note?: string): void {
+    this.amount += value;
+    if (note) console.log(note);
+  }
+
+  markAsDelivered(): void {
+    this.isDelivered = true;
+  }
+
+  applyDiscount(percent: number): void {
+    this.amount -= (this.amount * percent) / 100;
+  }
+
+  toString(): string {
+    return `Order[name=${this.customerName}, id=${this.orderId}, amount=${this.amount}, delivered=${this.isDelivered}]`;
+  }
+}
+
+const o1 = new Order("Riya", "101", 500);
+const o2 = new Order("Aman", "102", 300);
+const o3 = new Order("Neha", "103", 700);
+
+o1.addAmount(100);
+o2.addAmount(50, "Extra item added");
+o3.addAmount(200);
+
+o1.applyDiscount(10);
+o2.markAsDelivered();
+
+const orders = [o1, o2, o3];
+
+orders.forEach(o => console.log(o.toString()));
+
+const highest = orders.reduce((a, b) =>
+  a.getAmount() >= b.getAmount() ? a : b
+);
+
+const deliveredCount = orders.filter(o => o.getDeliveryStatus()).length;
+
+console.log("Highest Amount Order:", highest.toString());
+console.log("Delivered Orders Count:", deliveredCount);

package/a6/ControlFormrealTimeVali&UIupdate

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+
+const App: React.FC = () => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const emailError = email && !email.includes("@");
+  const passwordError = password && password.length < 6;
+
+  const isValid =
+    name.trim() !== "" && !emailError && !passwordError;
+
+  return (
+    <div style={{ padding: 20 }}>
+      <h2>Signup Form</h2>
+
+      <div>
+        <input
+          placeholder="Name"
+          value={name}
+          onChange={e => setName(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <input
+          placeholder="Email"
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+        />
+        {emailError && <p>Email must contain @</p>}
+      </div>
+
+      <div>
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={e => setPassword(e.target.value)}
+        />
+        {passwordError && <p>Password must be at least 6 characters</p>}
+      </div>
+
+      <button disabled={!isValid}>Submit</button>
+
+      <h3>Preview</h3>
+      <p>Name: {name}</p>
+      <p>Email: {email}</p>
+      <p>Password: {password}</p>
+    </div>
+  );
+};
+
+export default App;

package/a6/UncontrolledForm(useRef)Avoidre-renderssimple data

@@ -0,0 +1,35 @@
+import React, { useRef } from "react";
+
+const App: React.FC = () => {
+  const nameRef = useRef<HTMLInputElement>(null);
+  const feedbackRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const name = nameRef.current?.value || "";
+    const feedback = feedbackRef.current?.value || "";
+
+    console.log({ name, feedback });
+  };
+
+  return (
+    <div style={{ padding: 20 }}>
+      <h2>Feedback Form</h2>
+
+      <form onSubmit={handleSubmit}>
+        <div>
+          <input ref={nameRef} placeholder="Name" />
+        </div>
+
+        <div>
+          <textarea ref={feedbackRef} placeholder="Feedback" />
+        </div>
+
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+export default App;

package/a6/login+backendErrorHandling

@@ -0,0 +1,79 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+
+interface LoginData {
+  email: string;
+  password: string;
+}
+
+const App: React.FC = () => {
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isSubmitting }
+  } = useForm<LoginData>();
+
+  const onSubmit = async (data: LoginData) => {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    const isValid =
+      data.email === "test@example.com" &&
+      data.password === "123456";
+
+    if (!isValid) {
+      setError("root", {
+        type: "manual",
+        message: "Invalid email or password"
+      });
+      return;
+    }
+
+    console.log("Login successful");
+  };
+
+  return (
+    <div style={{ padding: 20 }}>
+      <h2>Login</h2>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div>
+          <input
+            placeholder="Email"
+            {...register("email", {
+              required: "Email is required",
+              pattern: {
+                value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                message: "Invalid email format"
+              }
+            })}
+          />
+          {errors.email && <p>{errors.email.message}</p>}
+        </div>
+
+        <div>
+          <input
+            type="password"
+            placeholder="Password"
+            {...register("password", {
+              required: "Password is required",
+              minLength: {
+                value: 6,
+                message: "Minimum 6 characters"
+              }
+            })}
+          />
+          {errors.password && <p>{errors.password.message}</p>}
+        </div>
+
+        {errors.root && <p>{errors.root.message}</p>}
+
+        <button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? "Logging in..." : "Login"}
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default App;

package/a6/userRegisterForm(ReactHook+Typrescript)

@@ -0,0 +1,103 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+
+interface FormData {
+  fullName: string;
+  email: string;
+  password: string;
+  age: number;
+}
+
+const App: React.FC = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormData>({
+    defaultValues: {
+      fullName: "Guest User",
+      age: 18
+    }
+  });
+
+  const onSubmit = (data: FormData) => {
+    console.log(data);
+  };
+
+  return (
+    <div style={{ padding: 20 }}>
+      <h2>User Registration</h2>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div>
+          <input
+            placeholder="Full Name"
+            {...register("fullName", {
+              required: "Full Name is required",
+              minLength: {
+                value: 3,
+                message: "Minimum 3 characters"
+              }
+            })}
+          />
+          {errors.fullName && <p>{errors.fullName.message}</p>}
+        </div>
+
+        <div>
+          <input
+            placeholder="Email"
+            {...register("email", {
+              required: "Email is required",
+              pattern: {
+                value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                message: "Invalid email format"
+              }
+            })}
+          />
+          {errors.email && <p>{errors.email.message}</p>}
+        </div>
+
+        <div>
+          <input
+            type="password"
+            placeholder="Password"
+            {...register("password", {
+              required: "Password is required",
+              minLength: {
+                value: 6,
+                message: "Minimum 6 characters"
+              },
+              validate: value =>
+                /\d/.test(value) || "Must include a number"
+            })}
+          />
+          {errors.password && <p>{errors.password.message}</p>}
+        </div>
+
+        <div>
+          <input
+            type="number"
+            placeholder="Age"
+            {...register("age", {
+              required: "Age is required",
+              min: {
+                value: 18,
+                message: "Minimum age is 18"
+              },
+              max: {
+                value: 60,
+                message: "Maximum age is 60"
+              },
+              valueAsNumber: true
+            })}
+          />
+          {errors.age && <p>{errors.age.message}</p>}
+        </div>
+
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+export default App;

package/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "akarshanxyz",
+  "version": "1.0.0"
+}